Lightweight jQuery Content Slider/Carousel Plugin - sliders

Just another very lightweight jQuery plugin for creating a horizontal Html content carousel slider with lots of cool slide animations.

Basic Usage:

1. Include the jQuery library and jQuery sliders plugin on the web page.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<link rel="stylesheet" href="sliders.css">
<script type="text/javascript" src="sliders.js"></script>

2. Include the jQuery easing plugin for more animation types.

<script type="text/javascript" src="jquery.easing.1.3.js"></script>

3. The Html structure. Wrap the Html elements using unordered list.

<div id="demo">
<ul>
<li><a href="#"><img src="img/img01.gif" width="700" height="426" alt=""></a></li>
<li><a href="#"><img src="img/img02.gif" width="700" height="426" alt=""></a></li>
<li><a href="#"><img src="img/img03.gif" width="700" height="426" alt=""></a></li>
<li><a href="#"><img src="img/img04.gif" width="700" height="426" alt=""></a></li>
<li><a href="#"><img src="img/img05.gif" width="700" height="426" alt=""></a></li>
</ul>
</div>

4. Call the plugin on the parent element.

<script>
$(function(){
$("#demo").sliders();
});
</script>

5. Optional settings to customize the slider/carousel.

<script>
$(function(){
$("#demo").sliders({
slideType : 'leftSlide',// fadeSlide, leftSlide, leftSlideLoop, leftSlideAnimation, selectAnimation or moveOn
changeTime: 1500,
showTime: 3000,
allTime: 15000,
animeType: 'swing' // easing options
});
});
</script>

---

This awesome jQuery plugin is developed by webdrawer-kashu. For more Advanced Usages, please check the demo page or visit the official website.