slick-carousel/js/scripts.js

the last carousel you'll ever need

$(document).ready(function(){
  $('.single-item').slick({
    dots: true,
    infinite: true,
    speed: 300,
    slidesToShow: 1,
    slidesToScroll: 1
  });
  $('.multiple-items').slick({
    dots: true,
    infinite: true,
    speed: 300,
    slidesToShow: 3,
    slidesToScroll: 3
  });
  $('.one-time').slick({
    dots: false,
    infinite: true,
    speed: 300,
    slidesToShow: 5,
    touchMove: false,
    slidesToScroll: 1
  });
  $('.uneven').slick({
    dots: true,
    infinite: true,
    speed: 300,
    slidesToShow: 4,
    slidesToScroll: 4
  });
  $('.responsive').slick({
    dots: true,
    infinite: false,
    speed: 300,
    slidesToShow: 4,
    slidesToScroll: 4,
    responsive: [
      {
        breakpoint: 1024,
        settings: {
          slidesToShow: 3,
          slidesToScroll: 3,
          infinite: true,
          dots: true,
          fade: true,
          speed: 600
        }
      },
      {
        breakpoint: 600,
        settings: {
          slidesToShow: 2,
          slidesToScroll: 2
        }
      },
      {
        breakpoint: 480,
        settings: {
          slidesToShow: 1,
          slidesToScroll: 1
        }
      }
    ]
  });

  $('.autoplay').slick({
    dots: true,
    infinite: true,
    speed: 300,
    slidesToShow: 3,
    slidesToScroll: 1,
    autoplay: true,
    autoplaySpeed: 2000
  });

  $('.add-remove').slick({
    dots: true,
    slidesToShow: 3,
    slidesToScroll: 3
  });
  var slideIndex = 1;
  $('.js-add-slide').on('click', function(){
    slideIndex++;
    $('.add-remove').slickAdd('<div class="multiple"><h3>'+slideIndex+'</h3></div>');
  });

  $('.js-remove-slide').on('click', function(){
    $('.add-remove').slickRemove(slideIndex - 1);
    slideIndex--;
  });

  $('.filtering').slick({
    dots: true,
    slidesToShow: 4,
    slidesToScroll: 4
  });
  var filtered = false;
  $('.js-filter').on('click', function(){
    if(filtered === false) {
      $('.filtering').slickFilter(':even');
      $(this).text('Unfilter Slides');
      filtered = true;
    } else {
      $('.filtering').slickUnfilter();
      $(this).text('Filter Slides');
      filtered = false;
    }
  });

});