This time I will share jQuery Plugin and tutorial about Creating A Vertical News Slider with jQuery and CSS3, hope it will help you in programming stack.
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
2 |
<script src="js/vertical.news.slider.js"></script> |
2. Load the required jQuery Vertical News Slider stylesheet file in the header
1 |
<link rel="stylesheet" href="css/vertical.news.slider.css"> |
3. Create the html for the content slider
01 |
<div class="news-holder cf"> |
03 |
<ul class="news-headlines"> |
04 |
<li class="selected">Title 1</li> |
12 |
<div class="news-preview"> |
14 |
<div class="news-content top-content"> |
19 |
<div class="news-content"> |
24 |
<div class="news-content"> |
30 |
<div class="news-content"> |
36 |
<div class="news-content"> |
42 |
<div class="news-content"> |
Change log:
2016-11-22
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.
