Easy, Customizable And Responsive Slider Plugin - jQuery Slidester
File Size: | 29.7 KB |
---|---|
Views Total: | 1178 |
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.