Simple Lightweight Content Slider Plugin with jQuery - slider.js
File Size: | 5.66 KB |
---|---|
Views Total: | 1601 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
Yet another lightweight jQuery content slider plugin that converts a list of any html content into an automatic slider.
Features:
- Supports both images and html elements.
- Left / right arrow indicators.
- Autoplay and pause on hover.
- Custom sliding speed, transition delay and initial slide.
How to use it:
1. Add a list of images with description boxes into the slider.
<div id="slider"> <div class="indicator"> <div class="previous"></div> <div class="next"></div> </div> <ul class="slides"> <li class="slide"> <img src="1.jpeg" alt=""> <div class="info"> <a href=""><h3>Image 1</h3></a> <p>Descript 1</p> </div> </li> <li class="slide"> <img src="2.jpeg" alt=""> <div class="info"> <a href=""><h3>Image 2</h3></a> <p>Descript 2</p> </div> </li> <li class="slide"> <img src="3.jpg" alt=""> <div class="info"> <a href=""><h3>Image 3</h3></a> <p>Descript 3</p> </div> </li> </ul> </div>
2. The required CSS styles for the content slider.
#slider { width: 800px; height: 400px; overflow: hidden; margin: 50px auto; border-radius: 20px; } #slider .slides { display: block; margin: 0; padding: 0; width: 20000px; height: 100%; } #slider .slide { float: left; width: 800px; height: 400px; list-style: none; } #slider .slide img { width: 100%; height: 100%; } #slider .slide .info { width: 100%; height: 80px; position: relative; bottom: 90px; margin: 0; padding: 8px 0; background: #eee; opacity: 0.6; text-align: center; } #slider .slide .info a { } #slider .slide .info a:hover { text-decoration: none; } #slider .slide .info h3 { font-size: 18px; line-height: 20px; margin: 0; padding: 0; color: #000; } #slider .slide .info p { text-align: left; padding: 5px 15px; } #slider .slide .info .read_more { font-size: 16px; color: #cd0000; } #slider .indicator .previous { width: 30px; height: 30px; background: url("img/direction_nav.png") no-repeat scroll 0px 0px; opacity: 1; cursor: pointer; } #slider .indicator .next { width: 30px; height: 30px; background: url("img/direction_nav.png") no-repeat scroll -26px 0px; opacity: 1; cursor: pointer; } #slider .indicator { margin: -20px 10px 0px; height: 30px; width: 97%; top: 50%; position: relative; } .indicator .previous { left: 0px; float: left; display: block; } .indicator .next { right: 0px; float: right; display: block; }
3. Add jQuery library and the jQuery slider.js script to your html page.
<script src="//code.jquery.com/jquery-1.11.3.js"></script> <script src="js/slider.js"></script>
4. That's it. You can config the content slider by editing the slider.js
in your text editor.
var pause =3000; var speed=1000; var width=800; var current=1;
This awesome jQuery plugin is developed by lincolndu. For more Advanced Usages, please check the demo page or visit the official website.