Creating A Vertical News Slider with jQuery and CSS3

A neat and clean content slider built with jQuery and CSS3 that displays headlines on the left along with a preview image and brief description on the right. The current item is highlighted and switches automatically at intervals with smooth CSS3 transition effects.

How to use it:

1. Load the latest version of jQuery library and jQuery Vertical News Slider at the bottom of your page

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
<script src="js/vertical.news.slider.js"></script>

2. Load the required jQuery Vertical News Slider stylesheet file in the header

<link rel="stylesheet" href="css/vertical.news.slider.css">

3. Create the html for the content slider

<div class="news-holder cf">

<ul class="news-headlines">
<li class="selected">Title 1</li>
<li>Title 2</li>
<li>Title 3</li>
<li>Title 4</li>
<li>Title 5</li>
<li>Title 6</li>
</ul>

<div class="news-preview">

<div class="news-content top-content"> 
<img src="1.jpg">
<p>Content 1</p>
</div>

<div class="news-content">
<img src="2.jpg">
<p>Content 2</p>
</div>

<div class="news-content">
<img src="3.jpg">
<p>Content 3</p>
</div>


<div class="news-content">
<img src="4.jpg">
<p>Content 4</p>
</div>


<div class="news-content">
<img src="5.jpg">
<p>Content 5</p>
</div>


<div class="news-content">
<img src="6.jpg">
<p>Content 6</p>
</div>

</div>

</div>

Change log:

2016-11-22

• fixed for jQuery 1.9+

2014-06-27

• everted to jquery 1.8.x to fix auto-slider functionality

---

This awesome jQuery plugin is developed by impressivewebs. For more Advanced Usages, please check the demo page or visit the official website.