Easy Responsive jQuery Auto Slider Plugin - Much Slide
File Size: | 16.2 KB |
---|---|
Views Total: | 1479 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

Much Slide is an easy-to-use jQuery slider plugin that provides lots of options to create a fully customizable & controllable content slider for multiple purposes.
Basic Usage:
1. Include jQuery javascript library and jQuery much slide plugin on the web page.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> <script src="src/jquery.muchslide.js"></script>
2. Wrap the Html contents you want to slide using Html unordered lists.
<ul id="demo"> <li> Slide 1 </li> <li> Slide 2 </li> <li> Slide 3 </li> ... </ul>
4. Call the plugin with default options.
<script> $(function() { $("#demo").muchslide(); }); </script>
5. All the options and defaults.
<script> $(function() { $("#demo").muchslide({ // Integer : # of elements to be displayed at once numShow: 3, // String : Element type of children children: "li", // String : ID of Next clicker element // Note :: Both nextId and prevId must be defined for the defaults to be overridden nextId: null, // String : ID of Prev clicker element prevId: null, // String : Class of Prev clicker element nextClass: "much_selector", // String : Class of Prev clicker element prevClass: "much_selector", // String : Class for the currently displayed element currentDisplayed: "much_select", // String : Callback class for the selected child element selectedClass: "much_selected", // Function : Callback function upon the selected child element selectedCallback: function() {}, // Boolean : Forever cycle keeps going and going and ... foreverScroll: true, // Boolean : Display editable pagination paged: false, // String : Class of current pagination ul pagedClass: "much_pagination", // String : Class of current pagination pagedSelectedClass: "much_current_page", // Function : Callback for current pagination pagedSelectedCallback: function() {}, // String : Class for children of pagination pagedChildClass: "much_paged", // Boolean : Slider automatically advances autoSlide: false, // Int : # of milliseconds between each auto transition autoSlideSpeed: 3500, // Boolean : Auto sliding is paused on slider elements autoSlidePause: true, // String : Class for children of pagination autoSlidePauseClass: null, // Function : Callback function for slider hover on elements autoSlidePauseCallback: function() {}, // String / JSON : pass any accepable anmiation argument in to increase the scroll, position, or duration animation: null }); }); </script>
6. Style the slider however you like.
.much_selector { ... } #muchNext { ... } #demo { ... } #demo li { ... } #demo li .much_select { ... } ...
This awesome jQuery plugin is developed by fuhton. For more Advanced Usages, please check the demo page or visit the official website.