Easy Responsive jQuery Auto Slider Plugin - Much Slide

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

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.