This time I will share jQuery Plugin and tutorial about Auto Cross-fading Image Slider For jQuery – Lslider, hope it will help you in programming stack.
Lslider is an extremely simple jQuery plugin for creating a basic slider that automatically fades through a series of images just like a slideshow.
How to use it:
1. Create a list of images for the slider.
2 |
<li class="active"><img src="1.jpg" alt="Item 1" /></li> |
3 |
<li><img src="2.jpg" alt="Item 2" /></li> |
4 |
<li><img src="3.jpg" alt="Item 3" /></li> |
5 |
<li><img src="4.jpg" alt="Item 4" /></li> |
2. Put jQuery library and the jQuery Lslider plugin’s script at the bottom of your webpage.
1 |
<script src="//code.jquery.com/jquery.min.js"></script> |
2 |
<script src="dist/js/jquery.lslider.js"></script> |
3. Initialize the image slider with default options.
1 |
$('.lslider').lslider(); |
4. The required CSS styles. Override & modify the CSS styles and insert them to your existing CSS file.
06 |
box-shadow: 1px 5px 10px rgba(0, 0, 0, 0.5); |
08 |
list-style-type: none; |
17 |
.lslider li.active { display: block; } |
5. Set the animation speed & transition delay.
1 |
$('.lslider').lslider({ |
6. Callback functions available.
1 |
$('.lslider').lslider({ |
2 |
beforeDisplay: function(e, hiddenElement){}, |
3 |
afterDisplay: function(e, visibleElement){} |
This awesome jQuery plugin is developed by e-lLess. For more Advanced Usages, please check the demo page or visit the official website.
