Skip to main content

​
Installation

Slick Carousel requires jQuery 1.7 or higher. You can install it via CDN, npm, or Bower.
Add the CSS files in your <head> tag:
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/kenwheeler/[email protected]/slick/slick.css"/>
<!-- Add the slick-theme.css if you want default styling -->
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/kenwheeler/[email protected]/slick/slick-theme.css"/>
Then, before your closing </body> tag add:
<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/kenwheeler/[email protected]/slick/slick.min.js"></script>

​
Basic Setup

1

Create HTML markup

Create a container with your slide elements:
<div class="my-slider">
  <div><img src="slide1.jpg"></div>
  <div><img src="slide2.jpg"></div>
  <div><img src="slide3.jpg"></div>
  <div><img src="slide4.jpg"></div>
  <div><img src="slide5.jpg"></div>
  <div><img src="slide6.jpg"></div>
</div>
2

Initialize Slick

Initialize the carousel with jQuery:
$(document).ready(function(){
  $('.my-slider').slick();
});

​
Multiple Slides Pattern

Show multiple slides at once with navigation arrows: 
$('.slider').slick({
  dots: true,
  infinite: true,
  slidesToShow: 3,
  slidesToScroll: 3
});

slidesToShow

Number of slides visible at once

slidesToScroll

Number of slides to scroll on navigation

​
HTML Example

<section class="regular slider">
  <div><img src="https://placehold.co/350x300?text=1"></div>
  <div><img src="https://placehold.co/350x300?text=2"></div>
  <div><img src="https://placehold.co/350x300?text=3"></div>
  <div><img src="https://placehold.co/350x300?text=4"></div>
  <div><img src="https://placehold.co/350x300?text=5"></div>
  <div><img src="https://placehold.co/350x300?text=6"></div>
</section>

<script>
$('.regular').slick({
  dots: true,
  infinite: true,
  slidesToShow: 3,
  slidesToScroll: 3
});
</script>
Arrows are enabled by default. You can customize them or disable them: 
$('.slider').slick({
  arrows: true  // enabled by default
});

​
Arrow Positioning

Customize where arrows are attached: 
$('.slider').slick({
  arrows: true,
  appendArrows: '.custom-arrows-container'
});

​
Dot Navigation

Add dot indicators to show the current slide: 
$('.slider').slick({
  dots: true,
  dotsClass: 'slick-dots',  // custom class for dots container
  appendDots: '.custom-dots-container'  // where to append dots
});

​
Custom Dot Templates

Customize the appearance of dots using the customPaging function: 
$('.slider').slick({
  dots: true,
  customPaging: function(slider, i) {
    return $('<button type="button"></button>').text(i + 1);
  }
});

​
Common Configuration Options

These are the most frequently used options for basic implementations.
OptionTypeDefaultDescription
infinitebooleantrueInfinite loop sliding
speedint500Slide transition speed in milliseconds
slidesToShowint1Number of slides to show at a time
slidesToScrollint1Number of slides to scroll at a time
arrowsbooleantrueEnable Next/Prev arrows
dotsbooleanfalseCurrent slide indicator dots
autoplaybooleanfalseEnables auto play of slides
autoplaySpeedint3000Auto play change interval
pauseOnHoverbooleantruePauses autoplay on hover
draggablebooleantrueEnables desktop dragging
swipebooleantrueEnables touch swipe

​
Autoplay Example

Create an automatically advancing carousel: 
$('.slider').slick({
  dots: true,
  infinite: true,
  autoplay: true,
  autoplaySpeed: 3000,
  pauseOnHover: true,
  pauseOnFocus: true
});
When using autoplay, always include pauseOnHover and pauseOnFocus for better accessibility.

​
Simple Configuration Example

Here’s a complete example with common settings: 
<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/kenwheeler/[email protected]/slick/slick.css"/>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/kenwheeler/[email protected]/slick/slick-theme.css"/>
</head>
<body>
  <div class="slider">
    <div><h3>Slide 1</h3></div>
    <div><h3>Slide 2</h3></div>
    <div><h3>Slide 3</h3></div>
    <div><h3>Slide 4</h3></div>
  </div>

  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
  <script src="https://cdn.jsdelivr.net/gh/kenwheeler/[email protected]/slick/slick.min.js"></script>
  <script>
    $(document).ready(function(){
      $('.slider').slick({
        dots: true,
        infinite: true,
        speed: 500,
        slidesToShow: 1,
        slidesToScroll: 1,
        autoplay: true,
        autoplaySpeed: 2000
      });
    });
  </script>
</body>
</html>

​
Responsive Breakpoints

Slick makes it easy to adjust settings at different screen sizes: 
$('.slider').slick({
  infinite: false,
  slidesToShow: 4,
  slidesToScroll: 4,
  responsive: [
    {
      breakpoint: 1024,
      settings: {
        slidesToShow: 3,
        slidesToScroll: 3,
        infinite: true
      }
    },
    {
      breakpoint: 600,
      settings: {
        slidesToShow: 2,
        slidesToScroll: 2,
        dots: true
      }
    },
    {
      breakpoint: 300,
      settings: "unslick"  // destroys slick at this breakpoint
    }
  ]
});
The responsive option uses max-width breakpoints by default. Set mobileFirst: true to use min-width instead.

Build docs developers (and LLMs) love

Get started for freeTalk to us