This time I will share jQuery Plugin and tutorial about Fully Responsive & Customizable Image Carousel Plugin For jQuery, hope it will help you in programming stack.
Just another responsive, customizable jQuery image slider/carousel plugin that features auto play, pause on hover, infinite looping, left/right sliding directions and more.
How to use it:
1. Load the plugin’s style sheet and JavaScript files (minified versions are recommended) into your jQuery project.
1 |
< link rel = "stylesheet" href = "slider.min.css" > |
2 |
< script src = "//code.jquery.com/jquery.min.js" ></ script > |
3 |
< script src = "slider.js" ></ script > |
2. Insert your images as an html list into the carousel.
03 |
< img src = "1.jpg" alt = "slide1" /> |
06 |
< img src = "2.jpg" alt = "slide2" /> |
09 |
< img src = "3.jpg" alt = "slide3" /> |
3. Initialize the carousel/slider plugin with default settings.
4. Customize the carousel/slider with the following options.
22 |
paginationType: 'dots' , |
39 |
prev: "<div class='prev slider-buttons'><span>‹</span></div>" , |
40 |
next: "<div class='next slider-buttons'><span>›</span></div>" |
Changelog:
2019-12-18
- added paginationType option to the .slider() function, which accepts the values ‘dots’ (default) and ‘thumbnails’. If ‘thumbnails’, it changes the pagination elements for thumbnails; one for each entry.
2017-02-20
- allows for multiple sliders.
This awesome jQuery plugin is developed by sjoloughlin. For more Advanced Usages, please check the demo page or visit the official website.