Lightweight jQuery Content Slider/Carousel Plugin - sliders

File Size: 104 KB
Views Total: 2386
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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=""></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">
<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>

4. Call the plugin on the parent element.


5. Optional settings to customize the slider/carousel.

slideType : 'leftSlide',// fadeSlide, leftSlide, leftSlideLoop, leftSlideAnimation, selectAnimation or moveOn
changeTime: 1500,
showTime: 3000,
allTime: 15000,
animeType: 'swing' // easing options

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