Slick slider is a flexible, responsive and swipe enabled jQuery plugin that creates fully functional carousel as per your requirements. It has many predefined options to customize the carousel and you can customize it easily.

Features:

• Slick slide is fully responsive and automatically fits with any container.
• Uses CSS3 when available. Fully functional when not.
• It supports separate settings for every responsive breakpoint.
• Easily draggable with mouse.
• Supports infinite loop and autoplay.

How to use it:

1. Include the Javascript slick.js at the bottom of the web page.

<script src="path/to/slick.js"></script>

2. Include the CSS slick.css in the header of the page.

<link rel="stylesheet" href="path/to/slick.css">

3. For default styling you can add slick-theme.css.

<link rel="stylesheet" href="path/to/slick-theme.css">

4. Add the basic HTML to the page.

<div class="single-item">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
</div>

5. Initialize the plugin and we're ready to go.

$('.single-item').slick();

Data Attribute Settings

<div data-slick='{"slidesToShow": 4, "slidesToScroll": 4}'>
  <div><h3>1</h3></div>
  <div><h3>2</h3></div>
  <div><h3>3</h3></div>
  <div><h3>4</h3></div>
  <div><h3>5</h3></div>
  <div><h3>6</h3></div>
</div>

Settings

Events

// On swipe event
$('.your-element').on('swipe', function(event, slick, direction){
  console.log(direction);
  // left
});

// On edge hit
$('.your-element').on('edge', function(event, slick, direction){
  console.log('edge was hit')
});

// On before slide change
$('.your-element').on('beforeChange', function(event, slick, currentSlide, nextSlide){
  console.log(nextSlide);
});

Methods

// Add a slide
$('.your-element').slick('slickAdd',"<div></div>");

// Get the current slide
var currentSlide = $('.your-element').slick('slickCurrentSlide');

// Manually refresh positioning of slick
$('.your-element').slick('setPosition');

<div class="single-item">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
</div>

$('.single-item').slick();

<div class="multiple-items">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
</div>

$('.multiple-items').slick({
  infinite: true,
  slidesToShow: 3,
  slidesToScroll: 3
});

<div class="responsive">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
</div>

$('.responsive').slick({
  dots: true,
  infinite: false,
  speed: 300,
  slidesToShow: 4,
  slidesToScroll: 4,
  responsive: [
    {
      breakpoint: 1024,
      settings: {
        slidesToShow: 3,
        slidesToScroll: 3,
        infinite: true,
        dots: true
      }
    },
    {
      breakpoint: 600,
      settings: {
        slidesToShow: 2,
        slidesToScroll: 2
      }
    },
    {
      breakpoint: 480,
      settings: {
        slidesToShow: 1,
        slidesToScroll: 1
      }
    }
    // You can unslick at a given breakpoint now by adding:
    // settings: "unslick"
    // instead of a settings object
  ]
});

<div class="center">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
</div>

$('.center').slick({
  centerMode: true,
  centerPadding: '60px',
  slidesToShow: 3,
  responsive: [
    {
      breakpoint: 768,
      settings: {
        arrows: false,
        centerMode: true,
        centerPadding: '40px',
        slidesToShow: 3
      }
    },
    {
      breakpoint: 480,
      settings: {
        arrows: false,
        centerMode: true,
        centerPadding: '40px',
        slidesToShow: 1
      }
    }
  ]
});