Easy, Customizable And Responsive Slider Plugin - jQuery Slidester
| File Size: | 29.7 KB | 
|---|---|
| Views Total: | 1180 | 
| Last Update: | |
| Publish Date: | |
| Official Website: | Go to website | 
| License: | MIT | 
 
A jQuery plugin used for creating an easy, responsive and customizable slider/slideshow component that supports any type of content and allows for various custom configurations on each slide.
How to use it:
1. Import the jQuery Slidester plugin's core JavaScript and CSS files into the webpage which has jQuery library loaded.
<link rel="stylesheet" href="slidester.css"> <script src="//code.jquery.com/jquery.min.js"></script> <script src="jquery.slidester.js"></script>
2. Insert a group of html content into the slider.
<div id="demo" class="slider">
  <div class="images">
    <img src="slides/1.jpg">
    <img src="slides/2.jpg">
    <img src="slides/3.jpg">
    <img src="slides/4.jpg">
    <img src="slides/5.jpg">
    <img src="slides/6.jpg">
  </div>
</div>
3. Active the plugin by calling slidester() on the top container element.
$("#demo").slidester();
4. All default options to customize the slider.
$("#demo").slidester({
  width: null,
  height: null,
  startSlide: 0, // initia slide
  initHeightSpeed: 500,
  initSlideSpeed: 500,
  heightSpeed: 1000,
  animationSpeed: 1500,
  pauseOnHover: true,
  controlButtons: true,
  controlButtonsDisplayClass: "hover"
});
Todo:
- More animations.
- Thumbnail preview when hover over the controls.
- Image captions.
This awesome jQuery plugin is developed by nezhar. For more Advanced Usages, please check the demo page or visit the official website.










