Fully Responsive & Customizable Image Carousel Plugin For jQuery

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>&#8249;</span></div>",
    next: "<div class='next slider-buttons'><span>&#8250;</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.