jQuery Based General Content Slider Plugin - Slider

A customizable, powerful, cross browser and mobile-friendly jQuery slider plugin for creating multi-purpose content silder with easing effects.

Features:

• Vertical or horizontal sliding.
• Mouse wheel, drag, swipe, arrows, bullets and pager navigation.
• Easing options. (jQuery easing plugin needed).
• Supports any html elements.
• Multiple items in one slide.
• Control the slider out of the box.
• Callbacks supported.

Basic Usage:

1. Create a content slider using Html unordered lists.

<div id="demo">
<ul>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">6</a></li>
<li><a href="#">7</a></li>
<li><a href="#">8</a></li>
<li><a href="#">9</a></li>
...
</ul>
</div>

2. Create the container for the pager and next/prev buttons.

<div id="pager"></div>
<div id="prev" class="prevnext">&lt;</div>
<div id="next" class="prevnext">&gt;</div>

3. Include the latest jQuery library and jQuery slider plugin in the page.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="scripts/jquery.slider.js"></script> 

4. Include jQuery easing plugin for easing functions.

<script src="scripts/jquery.easing.js"></script>

5. Include mousewheel.js script for mouse wheel support.

<script src="scripts/jquery.mousewheel.js"></script> 

6. Initialize the slider with options.

<script>
$(function(){
$("#demo").slider({
direction:0, // 0=horizontal, 1=vertical
size:3, // how many items in one slide
prev:"#prev", // prev button selector
next:"#next", // next button selector
prev_disable_class:"prev-disabled",
next_disable_class:"next-disabled",
pager:"#pager", // pager selector
pager_event:'click', // defaults tomouseover
easing:'easeOutBounce', // easing options
mousewheel:true, // mouse wheel support
drag:true, // drag and touch device support
speed:800, // slide speed
autoplay: false, // autoplay on load
interval: 5000,
prev_callback:function(page){//callback
},
next_callback:function(page){//callback
},
pager_callback:function(page){// callback
}
});
});
</script>

Change log:

2014-01-16

• fixed some bugs.

2013-12-27

• Optimized for touch devices

---

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