Lightweight Responsive Carousel Slider Plugin - jQuery lightSlider
File Size: | 26.4 KB |
---|---|
Views Total: | 3953 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
The jQuery lightSlider plugin makes it easier to create a fast, responsive, cross-browser carousel slider from any html content (images, text, mixed content, etc).
Features:
- Autoplay.
- Pause auto rotation on hover.
- Infinite loop.
- Custom navigation arrows.
- Custom pagination bullets.
- Configurable duration of animation.
How to use it:
1. Link to jQuery library and the jQuery lightSlider plugin's files as follows:
<link rel="stylesheet" href="css/lightslider.css"> <script src="//code.jquery.com/jquery.min.js"></script> <script src="js/jquery.lightslider.min.js"></script>
2. Create a list of html contents to be presented in the carousel slider.
<ul class="slider"> <li> <a href="#"><img src="1.jpg" alt="One"></a> <div class="caption"> <p>Description 1</p> </div> </li> <li> <a href="#"><img src="2.jpg" alt="Two"></a> <div class="caption"> <p>Description 2</p> </div> </li> <li> <a href="#"><img src="3.jpg" alt="Three"></a> <div class="caption"> <p>Description 3</p> </div> </li> <li> <a href="#"><img src="4.jpg" alt="Four"></a> <div class="caption"> <p>Description 4</p> </div> </li> ... </ul>
3. Initialize the carousel slider with default options.
$(document).ready(function() { $('ul.slider').lightSlider(); });
4. Config the carousel slider by overriding the default options and passing them to the lightSlider()
method.
$(document).ready(function() { $('ul.slider').lightSlider({ // auto play 'auto': true, // shows navigation arrows 'arrowsNavigation': true, // shows pagination bullets 'bullets': true, // infinite loop 'loop': true, // duration of animation 'slideDuration': 500, // delay 'pause': 4000, }); });
This awesome jQuery plugin is developed by Ajax30. For more Advanced Usages, please check the demo page or visit the official website.