This time I will share jQuery Plugin and tutorial about Easy, Customizable And Responsive Slider Plugin – jQuery Slidester, hope it will help you in programming stack.
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.
1 |
<link rel="stylesheet" href="slidester.css"> |
2 |
<script src="//code.jquery.com/jquery.min.js"></script> |
3 |
<script src="jquery.slidester.js"></script> |
2. Insert a group of html content into the slider.
01 |
<div id="demo" class="slider"> |
03 |
<img src="slides/1.jpg"> |
04 |
<img src="slides/2.jpg"> |
05 |
<img src="slides/3.jpg"> |
06 |
<img src="slides/4.jpg"> |
07 |
<img src="slides/5.jpg"> |
08 |
<img src="slides/6.jpg"> |
3. Active the plugin by calling slidester() on the top container element.
1 |
$("#demo").slidester(); |
4. All default options to customize the slider.
01 |
$("#demo").slidester({ |
11 |
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.
