Creating A Vertical News Slider with jQuery and CSS3

Creating A Vertical News Slider with jQuery and CSS3
File Size: 42.2 KB
Views Total: 10029
Last Update:
Publish Date:
Official Website: Go to website
License: MIT

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=""></script> 
<script src="js/"></script>

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

<link rel="stylesheet" href="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>

<div class="news-preview">

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

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

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

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

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

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



Change log:


  • fixed for jQuery 1.9+


  • 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.