Fully Responsive & Customizable Image Carousel Plugin For jQuery
File Size: | 180 KB |
---|---|
Views Total: | 5545 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

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.
<link rel="stylesheet" href="slider.min.css"> <script src="//code.jquery.com/jquery.min.js"></script> <script src="slider.js"></script>
2. Insert your images as an html list into the carousel.
<ul class="slider"> <li> <img src="1.jpg" alt="slide1"/> </li> <li> <img src="2.jpg" alt="slide2"/> </li> <li> <img src="3.jpg" alt="slide3"/> </li> </ul>
3. Initialize the carousel/slider plugin with default settings.
$(".slider").slider();
4. Customize the carousel/slider with the following options.
$(".slider").slider({ // animation speed speed: 1000, // animation delay delay: 3000, // autoplay autoplay: true, // pause on hover pauseonhover: true, // shows navigation navigation: true, // shows pagination pagination: true, // or 'thumbnail' paginationType: 'dots', // initial slide initialslide: 1, // width/height width: '100%', height: 'auto', // or right direction: 'left', // is responsive responsive: true, // custom navigation buttons buttons: { prev: "<div class='prev slider-buttons'><span>‹</span></div>", 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.