slick

Features

• Fully responsive. Scales with its container.
• Separate settings per breakpoint
• Uses CSS3 when available. Fully functional when not.
• Swipe enabled. Or disabled, if you prefer.
• Desktop mouse dragging
• Infinite looping.
• Fully accessible with arrow key navigation
• Add, remove, filter & unfilter slides
• Autoplay, dots, arrows, callbacks, etc...

---

Single Item

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

---

Multiple Items

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

---

Responsive Display

$('.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
      }
    }
  ]
});
				

---

One At A Time

$('.one-time').slick({
  dots: false,
  slidesToShow: 5,
  slidesToScroll: 1,
  touchMove: false
});
				

---

Uneven Sets

$('.uneven').slick({
  slidesToShow: 4,
  slidesToScroll: 4
});
				

---

Autoplay

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

---

Fade

$('.fade').slick({
  fade: true,
  speed: 1000,
  dots: true,
  infinite: true,
  slide: '.multiple'
});
				

---

Add & Remove

$('.add-remove').slick({
  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

$('.filtering').slick({
  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;
  }
});
				

---

Destroy

If you really want to be that guy...

$('.your-slider').unslick();
				

and a whole lot more...

Settings

Setting	Value	Description
accessibility	boolean, default: true	Enables tabbing and arrow key navigation
autoplay	boolean, default: false	Enables Autoplay
autoplaySpeed	int(ms), default: 3000	Autoplay Speed in milliseconds
arrows	boolean, default: true	Prev/Next Arrows
cssEase	string, default: 'ease'	CSS3 Animation Easing
dots	boolean, default: false	Show dot indicators
draggable	boolean, default: true	Enable mouse dragging
fade	boolean, default: false	Enable fade
easing	string, default: 'linear'	Add easing for jQuery animate. Use with easing libraries or default easing methods
infinite	boolean, default: true	Infinite loop sliding
onBeforeChange	function, default: null	Before slide callback
onAfterChange	function, default: null	After slide callback
pauseOnHover	boolean, default: true	Pause Autoplay On Hover
responsive	object, default: null	Object containing breakpoints as keys and settings objects as values
slide	element, default: 'div'	Slide element
slidesToShow	int, default: 1	# of slides to show
slidesToScroll	int, default: 1	# of slides to scroll
speed	int(ms), default: 300	Slide speed
swipe	boolean, default: true	Enable swiping
touchMove	boolean, default: true	Enable slide motion with touch
touchThreshold	int, default: 5	Swipe distance threshold

Methods

Method	Arguments	Description
slickGoTo	int : slide number	Navigates to a slide by index
slickNext	none	Navigates to the next slide
slickPrev	none	Navigates to the previous slide
slickPause	none	Pauses autoplay
slickPlay	none	Starts autoplay
slickAdd	HTML or Object	Adds slide
slickRemove	index	Removes slide by index
slickFilter	Selector or Function	Filters slides using jQuery .filter()
slickUnfilter	index	Removes applied filtering
unslick	none	Deconstructs slick