Easy Responsive jQuery Auto Slider Plugin - Much Slide
| File Size: | 16.2 KB |
|---|---|
| Views Total: | 1495 |
| 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.











