jQuery Plugins › jQuery Slider Plugins › jQuery Slick

Slick.js: Responsive & Flexible jQuery Carousel Slider Plugin

File Size:	52 KB
Views Total:	559758
Last Update:	08/31/2026 06:08:00 UTC
Publish Date:	03/26/2014 03:57:24 UTC
Official Website:	Go to website
License:	MIT

Demo Download

Features:

Responsive breakpoint settings with an optional mobile-first mode.
Touch swiping, mouse dragging, and keyboard navigation.
Single-slide, multi-item, center, fade, vertical, and variable-width layouts.
Autoplay with hover, focus, and dot-hover pause controls.
On-demand and progressive image lazy loading.
Synced main and thumbnail sliders through asNavFor.
Programmatic navigation, filtering, dynamic slides, and runtime option changes.
Configuration through JavaScript or the data-slick attribute.

Use Cases:

Product galleries with a large image slider and synchronized thumbnail navigation.
Logo, card, or product carousels that change the number of visible items at responsive breakpoints.
Testimonials, announcements, or featured content that rotate on a timer with dots or arrows.
Vertical, center-mode, fade, or variable-width sliders for custom page layouts.

How to use it:

jQuery dependency and build choice

Slick requires jQuery. jQuery 4 projects can use the current 2.x GitHub/CDN build. The slick-carousel npm package currently installs 1.8.1, not the 2.x build.

Load Slick with jQuery 4

<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">

<script src="https://code.jquery.com/jquery-4.0.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/kenwheeler/[email protected]/slick/slick.min.js"></script>

Install from npm

The npm registry currently serves Slick 1.8.1. Installing the package returns that legacy build. jQuery 4 projects need the 2.x GitHub/CDN files shown above.

npm install slick-carousel

Basic slider markup

Place each slide inside one carousel container. Slides can contain images, text, cards, or other HTML.

<div class="product-carousel">
  <div><img src="product-1.jpg" alt="Product view 1"></div>
  <div><img src="product-2.jpg" alt="Product view 2"></div>
  <div><img src="product-3.jpg" alt="Product view 3"></div>
</div>

Initialize Slick

Call .slick() on the carousel container after jQuery and Slick have loaded.

$(function() {
  $('.product-carousel').slick({
    dots: true,
    arrows: true
  });
});

Responsive multi-item carousel

The responsive option changes Slick settings at defined breakpoints. The default desktop-first behavior applies each breakpoint when the viewport becomes narrower than that value.

$('.product-carousel').slick({
  slidesToShow: 4,
  slidesToScroll: 1,
  dots: true,
  responsive: [
    {
      breakpoint: 1024,
      settings: {
        slidesToShow: 3
      }
    },
    {
      breakpoint: 768,
      settings: {
        slidesToShow: 2
      }
    },
    {
      breakpoint: 480,
      settings: {
        slidesToShow: 1,
        arrows: false
      }
    }
  ]
});

Autoplay slider

Set autoplay to true and control the interval through autoplaySpeed. Hover and keyboard focus pause autoplay by default.

$('.news-slider').slick({
  autoplay: true,
  autoplaySpeed: 4000,
  pauseOnHover: true,
  pauseOnFocus: true,
  dots: true
});

Synced main slider and thumbnails

The asNavFor option links two Slick instances. focusOnSelect lets a thumbnail move both sliders to the selected item.

$('.gallery-main').slick({
  slidesToShow: 1,
  arrows: false,
  asNavFor: '.gallery-thumbs'
});

$('.gallery-thumbs').slick({
  slidesToShow: 4,
  asNavFor: '.gallery-main',
  focusOnSelect: true
});

Configure Slick with data attributes

The data-slick attribute stores instance settings in the markup. Call .slick() once to initialize the element.

<div class="promo-slider" data-slick='{"slidesToShow":3,"slidesToScroll":1,"dots":true}'>
  <div>Promotion 1</div>
  <div>Promotion 2</div>
  <div>Promotion 3</div>
  <div>Promotion 4</div>
</div>

$('.promo-slider').slick();

Slick Options:

Navigation and Paging Options

Option	Description
`arrows`	Shows previous and next buttons. Type: Boolean. Default: `true`.
`prevArrow`	Sets the previous button markup or selector. Type: String, DOM node, or jQuery object. Default: Slick previous button.
`nextArrow`	Sets the next button markup or selector. Type: String, DOM node, or jQuery object. Default: Slick next button.
`appendArrows`	Sets the element that receives the arrow buttons. Type: Selector, HTML string, element, array, or jQuery object. Default: Slider element.
`dots`	Shows slide indicator dots. Type: Boolean. Default: `false`.
`dotsClass`	Sets the class name for the dots container. Type: String. Default: `slick-dots`.
`appendDots`	Sets the element that receives the dots container. Type: Selector, HTML string, element, array, or jQuery object. Default: Slider element.
`customPaging`	Returns custom markup for each paging button. Type: Function. Default: Numbered button.

Slide and Layout Options

Option	Description
`adaptiveHeight`	Changes slider height to the current slide. Type: Boolean. Default: `false`.
`centerMode`	Centers the active slide and shows partial neighboring slides. Type: Boolean. Default: `false`.
`centerPadding`	Sets side padding in center mode. Type: String. Default: `50px`.
`fade`	Uses a fade transition. Type: Boolean. Default: `false`.
`infinite`	Loops slides continuously. Type: Boolean. Default: `true`.
`initialSlide`	Sets the zero-based starting slide. Type: Integer. Default: `0`.
`slide`	Sets a child selector for slide elements. Type: String. Default: Empty string.
`slidesToShow`	Sets the number of visible slides. Type: Integer. Default: `1`.
`slidesToScroll`	Sets the number of slides moved per navigation action. Type: Integer. Default: `1`.
`variableWidth`	Uses each slide's own width. Type: Boolean. Default: `false`.

Responsive, Grid, and Direction Options

Option	Description
`mobileFirst`	Switches breakpoint evaluation to mobile-first behavior. Type: Boolean. Default: `false`.
`respondTo`	Uses `window`, `slider`, or `min` as the responsive width source. Type: String. Default: `window`.
`responsive`	Defines breakpoint and settings objects. A breakpoint can use `"unslick"` to destroy the slider at that width. Type: Array. Default: `null`.
`rows`	Sets the number of grid rows. Values above `1` activate grid mode. Type: Integer. Default: `1`.
`slidesPerRow`	Sets the number of slides in each grid row. Type: Integer. Default: `1`.
`rtl`	Switches the slider to right-to-left direction. Type: Boolean. Default: `false`.
`vertical`	Uses vertical slide movement. Type: Boolean. Default: `false`.
`verticalSwiping`	Uses vertical swipe direction. Type: Boolean. Default: `false`.

Interaction and Accessibility Options

Option	Description
`accessibility`	Activates tabbing and arrow-key navigation behavior. Type: Boolean. Default: `true`.
`draggable`	Activates mouse dragging on desktop. Type: Boolean. Default: `true`.
`focusOnSelect`	Moves the slider when a slide receives a selection click. Type: Boolean. Default: `false`.
`focusOnChange`	Moves browser focus to the active slide after a slide change. Type: Boolean. Default: `false`.
`swipe`	Activates touch swiping. Type: Boolean. Default: `true`.
`swipeToSlide`	Lets swipe distance select the destination slide independently of `slidesToScroll`. Type: Boolean. Default: `false`.
`touchMove`	Lets touch gestures move slides. Type: Boolean. Default: `true`.
`touchThreshold`	Sets the swipe distance threshold as a fraction of slider width or height. Type: Integer. Default: `5`.
`waitForAnimate`	Ignores navigation requests while a slide animation is active. Type: Boolean. Default: `true`.

Autoplay and Lazy Loading Options

Option	Description
`autoplay`	Starts automatic slide rotation. Type: Boolean. Default: `false`.
`autoplaySpeed`	Sets the delay between automatic slide changes in milliseconds. Type: Integer. Default: `3000`.
`pauseOnHover`	Pauses autoplay while the pointer is over the slider. Type: Boolean. Default: `true`.
`pauseOnFocus`	Pauses autoplay while an element inside the slider has focus. Type: Boolean. Default: `true`.
`pauseOnDotsHover`	Pauses autoplay while the pointer is over navigation dots. Type: Boolean. Default: `false`.
`lazyLoad`	Uses `ondemand` or `progressive` image loading. Type: String. Default: `ondemand`.

Animation and Slider Integration Options

Option	Description
`asNavFor`	Links another Slick instance for synchronized navigation. Type: Selector string. Default: `null`.
`cssEase`	Sets the CSS transition timing function. Type: String. Default: `ease`.
`easing`	Sets the jQuery `animate()` fallback easing. Type: String. Default: `linear`.
`edgeFriction`	Sets resistance at the edge of a non-infinite slider. Type: Number. Default: `0.35`.
`speed`	Sets transition duration in milliseconds. Type: Integer. Default: `500`.
`useCSS`	Activates CSS transitions when supported. Type: Boolean. Default: `true`.
`useTransform`	Activates CSS transforms when supported. Type: Boolean. Default: `true`.
`zIndex`	Sets slide z-index values for fade mode and older browser behavior. Type: Number. Default: `1000`.

Slick API Methods:

Navigation and Playback Methods

Method	Description
`slickNext`	Moves to the next slide. Usage: `$('.slider').slick('slickNext')`.
`slickPrev`	Moves to the previous slide. Usage: `$('.slider').slick('slickPrev')`.
`slickGoTo`	Moves to a zero-based slide index. An optional second Boolean skips animation. Usage: `$('.slider').slick('slickGoTo', 3)`.
`slickCurrentSlide`	Returns the current zero-based slide index. Usage: `$('.slider').slick('slickCurrentSlide')`.
`slickPause`	Pauses autoplay. Usage: `$('.slider').slick('slickPause')`.
`slickPlay`	Starts autoplay and sets the autoplay option to true. Usage: `$('.slider').slick('slickPlay')`.

Dynamic Slide and Filter Methods

Method	Description
`slickAdd`	Inserts a slide from an HTML string or DOM object. Optional index and `addBefore` arguments control placement.
`slickRemove`	Removes a slide by index. The optional Boolean controls removal before the supplied index.
`slickFilter`	Filters slides with a jQuery-compatible selector or function.
`slickUnfilter`	Restores slides after a filter has been applied.

Configuration and Instance Methods

Method	Description
`slickGetOption`	Returns the current value of an option. Usage: `$('.slider').slick('slickGetOption', 'slidesToShow')`.
`slickSetOption`	Changes one option, multiple options, or responsive settings. Pass `true` as the refresh argument when the UI must be recalculated.
`getSlick`	Returns the Slick instance object. Usage: `$('.slider').slick('getSlick')`.
`setPosition`	Recalculates slide positioning. Usage: `$('.slider').slick('setPosition')`.
`unslick`	Destroys the Slick instance and restores the element. Usage: `$('.slider').slick('unslick')`.

Change options after initialization

slickSetOption can update one setting or several settings on an existing slider. Pass the refresh flag when the new value affects layout.

$('.product-carousel').slick('slickSetOption', 'slidesToShow', 3, true);

$('.product-carousel').slick('slickSetOption', {
  arrows: false,
  dots: true
}, true);

Slick Events:

Slide and Lifecycle Events

Event	Fires When
`init`	The slider initializes for the first time.
`reInit`	The slider initializes again after an internal refresh.
`beforeChange`	A slide change starts. Arguments include the current and next slide indexes.
`afterChange`	A slide change finishes. Arguments include the Slick instance and current slide index.
`setPosition`	Slick recalculates slide positioning.
`breakpoint`	A responsive breakpoint is reached.
`destroy`	The slider is destroyed.

Interaction and Lazy Loading Events

Event	Fires When
`swipe`	A swipe or drag finishes.
`edge`	A swipe reaches an edge in non-infinite mode.
`lazyLoaded`	A lazy-loaded image finishes loading.
`lazyLoadError`	A lazy-loaded image fails to load.

Listen for slide changes

Bind events before initialization when you also need the first init event.

$('.product-carousel')
  .on('init', function(event, slick) {
    console.log('Slides:', slick.slideCount);
  })
  .on('beforeChange', function(event, slick, currentSlide, nextSlide) {
    console.log('Moving to:', nextSlide);
  })
  .on('afterChange', function(event, slick, currentSlide) {
    console.log('Current slide:', currentSlide);
  })
  .slick({
    dots: true
  });

Alternatives and Related Resources:

FAQs:

Q: Does Slick require jQuery?
A: Yes. Slick is a jQuery plugin and must load after jQuery.

Q: Does Slick work with jQuery 4?
A: Yes. The current 2.x build includes jQuery 4 compatibility. Load jQuery before Slick.

Q: Why does npm install slick-carousel install version 1.8.1?
A: The npm package currently installs version 1.8.1. Use the GitHub/CDN 2.x files for jQuery 4 projects.

Q: How do I create a responsive Slick carousel with a different number of visible slides?
A: Set the desktop value through slidesToShow, then define smaller viewport settings inside the responsive array.

Q: How do I destroy a Slick slider?
A: Call $('.slider').slick('unslick'). You can initialize the element again later with a new .slick() call.

Changelog:

v2.0.1 (2026-07-30)

Fixed right-to-left layouts when rtl: true is used with variable-width slides.

v2.0.0 (2026-07-24)

Added compatibility with jQuery 4.
Updated focus handling, center-mode behavior, cloned slide IDs, dot labels, transforms, fonts, and drag cursor behavior.

v1.9.0 (2018-04-19)

update.

v1.5.9 (2016-02-05)

update.

v1.4.0 (2015-01-26)

update.

v1.3.3 (2014-04-09)

Fixing menu for firefox

v1.3.2 (2014-04-03)

Changing prev/next anchors to button tags
updating styles
updating placeholder code

v1.2.8 (2014-03-31)

Adding Fade

v1.2.7 (2014-03-30)

Add/Remove items patch

v1.2.4 (2014-03-29)

Removing sprites, adding icon font

v1.2.1 (2014-03-28)

update.

This awesome jQuery plugin is developed by kenwheeler. For more Advanced Usages, please check the demo page or visit the official website.