jQuery Based General Content Slider Plugin - Slider
File Size: | 9.83KB |
---|---|
Views Total: | 4641 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
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"><</div> <div id="next" class="prevnext">></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.