Auto Cross-fading Image Slider For jQuery - Lslider

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.

<ul class="lslider">
  <li class="active"><img src="1.jpg" alt="Item 1" /></li>
  <li><img src="2.jpg" alt="Item 2" /></li>
  <li><img src="3.jpg" alt="Item 3" /></li>
  <li><img src="4.jpg" alt="Item 4" /></li>
  ...
</ul>

2. Put jQuery library and the jQuery Lslider plugin's script at the bottom of your webpage.

<script src="//code.jquery.com/jquery.min.js"></script>
<script src="dist/js/jquery.lslider.js"></script>

3. Initialize the image slider with default options.

$('.lslider').lslider();

4. The required CSS styles. Override & modify the CSS styles and insert them to your existing CSS file.

.lslider {
  display: block;
  margin: 0 auto;
  width: 960px;
  height: 360px;
  box-shadow: 1px 5px 10px rgba(0, 0, 0, 0.5);
  padding: 0;
  list-style-type: none;
}

.lslider li {
  display: none;
  position: absolute;
  margin: 0;
}

.lslider li.active { display: block; }

5. Set the animation speed & transition delay.

$('.lslider').lslider({
  animationSpeed: 350
  pause: 5000,    
});

6. Callback functions available.

$('.lslider').lslider({
  beforeDisplay: function(e, hiddenElement){},
  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.