Fully Responsive Customizable Image Carousel Plugin jQuery - Free Download Fully Responsive & Customizable Image Carousel Plugin For jQuery

Free Download Fully Responsive & Customizable Image Carousel Plugin For jQuery

Posted on

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.

Fully Responsive Customizable Image Carousel Plugin jQuery - Free Download Fully Responsive & Customizable Image Carousel Plugin For jQuery
File Size: 180 KB
Views Total: 4828
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.

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.

01 <ul class="slider">
02   <li>
03     <img src="1.jpg" alt="slide1"/>
04   </li>
05   <li>
06     <img src="2.jpg" alt="slide2"/>
07   </li>
08   <li>
09     <img src="3.jpg" alt="slide3"/>
10   </li>
11 </ul>

3. Initialize the carousel/slider plugin with default settings.

1 $(".slider").slider();

4. Customize the carousel/slider with the following options.

01 $(".slider").slider({
02  
03   // animation speed
04   speed: 1000,
05  
06   // animation delay
07   delay: 3000,
08  
09   // autoplay
10   autoplay: true,
11  
12   // pause on hover
13   pauseonhover: true,
14  
15   // shows navigation
16   navigation: true,
17  
18   // shows pagination
19   pagination: true,
20  
21   // or 'thumbnail'
22   paginationType: 'dots',
23  
24   // initial slide
25   initialslide: 1,
26  
27   // width/height
28   width: '100%',
29   height: 'auto',
30  
31   // or right
32   direction: 'left',
33  
34   // is responsive
35   responsive: true,
36  
37   // custom navigation buttons
38   buttons: {
39     prev: "<div class='prev slider-buttons'><span>&#8249;</span></div>",
40     next: "<div class='next slider-buttons'><span>&#8250;</span></div>"
41   }
42    
43 });

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.

source : jquery.net