Share your code. npm Orgs help your team discover, share, and reuse code. Create a free org »



    Backers on Open Collective Sponsors on Open Collective Join the chat at

    Carousel component built with React. It is a react port of slick carousel




    npm install react-slick


    yarn add react-slick

    ⚠️ Also install slick-carousel for css and font

    npm install slick-carousel
    @import "~slick-carousel/slick/slick.css";
    @import "~slick-carousel/slick/slick-theme.css";

    But be aware slick-carousel has a peer-dependancy on jQuery which you, or your colleagues may not like to see in your console output, so you can always grab the CSS from there and convert it into any CSS in JS solution that you might be using.

    or add cdn link in your html

    <link rel="stylesheet" type="text/css" charset="UTF-8" href="" />
    <link rel="stylesheet" type="text/css" href="" />


    Use CodeSandbox template to try react-slick with different settings.

    Filing issues

    Please replicate your issue with CodeSandbox template and post it along with issue to make it easy for me to debug.

    Starter Kit

    Checkout yeoman generator to quickly get started with react-slick.


    import React from 'react'
    import Slider from 'react-slick'
    class SimpleSlider extends React.Component {
      render () {
        var settings = {
          dots: true,
          infinite: true,
          speed: 500,
          slidesToShow: 1,
          slidesToScroll: 1
        return (
          <Slider {...settings}>


    Props Type Default Value Description Working
    accessibility bool true Enable tabbing and arrow key navigation Yes
    adaptiveHeight bool false Adjust the slide's height automatically Yes
    afterChange func Default Index change callback. index => ... Yes
    appendDots func dots => <ul>{dots}</ul> Custom dots templates. Works same as customPaging Yes
    arrows bool true Yes
    asNavFor ref undefined provide ref to another slider and sync it with current slider Yes
    autoplaySpeed int 3000 Delay between each auto scroll (in milliseconds) Yes
    autoplay bool false Yes
    beforeChange func null Index change callback. (oldIndex, newIndex) => ... Yes
    centerMode bool false Center current slide Yes
    centerPadding string '50px' Yes
    className string '' CSS class for inner slider div Yes
    cssEase 'ease' Yes
    customPaging func i => <button>{i + 1}</button> Custom paging templates. Example Yes
    dotsClass string 'slick-dots' CSS class for dots Yes
    dots bool Default Yes
    draggable bool true Enable scrollable via dragging on desktop Yes
    easing string 'linear' Yes
    fade bool Default Yes
    focusOnSelect bool false Go to slide on click Yes
    infinite bool true Infinitely wrap around contents Yes
    initialSlide int 0 Index of first slide Yes
    lazyLoad ondemand/progressive null Load images or render components on demand or progressively Yes
    nextArrow React Element null React element for next arrow. Example Yes
    onEdge func null Edge dragged event in finite case, direction => {...} Yes
    onInit func null componentWillMount callback. () => void Yes
    onLazyLoad func null Callback after slides load lazily slidesLoaded => {...} Yes
    onReInit func null componentDidUpdate callback. () => void Yes
    onSwipe func null Callback after slide changes by swiping Yes
    pauseOnDotsHover bool false Prevents autoplay while hovering on dots Yes
    pauseOnFocus bool false Prevents autoplay while focused on slides Yes
    pauseOnHover bool true Prevents autoplay while hovering on track Yes
    prevArrow React Element null React element for prev arrow. Example Yes
    responsive array null Customize based on breakpoints (detailed explanation below) Yes
    rtl bool false Reverses the slide order Yes
    slide string 'div' Slide container type Yes
    slidesToScroll int 1 How many slides to scroll at once Yes
    slidesToShow int 1 How many slides to show in one frame Yes
    speed int 500 Animation speed in milliseconds Yes
    swipeToSlide bool false Enable drag/swipe irrespective of slidesToScroll Yes
    swipe bool true Enable/disable swiping to change slides Yes
    touchMove bool true Yes
    touchThreshold int 5 Yes
    useCSS bool true Enable/Disable CSS Transitions Yes
    useTransform bool true Enable/Disable CSS transforms Yes
    variableWidth bool false Yes
    vertical bool false Yes


    Name Arguments Description
    slickPrev None go to previous slide
    slickNext None go to next slide
    slickGoTo index:number go to the given slide index
    slickPause None pause the autoplay
    slickPlay None start the autoplay

    Followings are not going to be implemented

    Name type Reason
    unslick method same functionality can be achieved with unslick prop
    slickSetOption method same functionality can be achieved via props and managing state for them in wrapper
    slickFilter method same functionality can be achieved as with dynamic slides, look at dynamic slides example
    slickUnfilter method same functionality can be achieved as with dynamic slides, look at dynamic slides example
    slickAdd method same functionality can be achieved as with dynamic slides, look at dynamic slides example
    slickRemove method same functionality can be achieved as with dynamic slides, look at dynamic slides example
    slickCurrentSlide method same functionality can be achieved with beforeChange hook
    slickGetOption method manage wrapper state for desired options
    getSlick method a simple ref will do

    responsive property

    Array of objects in the form of { breakpoint: int, settings: { ... } } The breakpoint int is the maxWidth so the settings will be applied when resolution is below this value. Breakpoints in the array should be ordered from smallest to greatest. Use 'unslick' in place of the settings object to disable rendering the carousel at that breakpoint. Example: [ { breakpoint: 768, settings: { slidesToShow: 3 } }, { breakpoint: 1024, settings: { slidesToShow: 5 } }, { breakpoint: 100000, settings: 'unslick' } ]

    Custom next/prev arrows

    To customize the next/prev arrow elements, simply create new React components and set them as the values of nextArrow and prevArrow.

    class LeftNavButton extends React.Component {
      render() {
        return <button {...this.props}>Next</button>

    Important: be sure that you pass your component's props to your clickable element like the example above. If you don't, your custom component won't trigger the click handler.

    You can also set onClick={this.props.onClick} if you only want to set the click handler.

    Flexbox support

    If you have flex property on container div of slider, add below css

    * {
      min-height: 0;
      min-width: 0;

    Test Setup

    If you try to run tests with jest in a project that uses react-slick, you may run into this error

    matchMedia not present, legacy browsers require a polyfill

    To fix this issue add below snippet in test-setup.js

    window.matchMedia = window.matchMedia || function() {
        return {
            matches : false,
            addListener : function() {},
            removeListener: function() {}

    and add below jest config in package.json

        "setupFiles": ["test-setup.js"]


    Want to run demos locally

    git clone
    cd react-slick
    npm install
    npm start
    open http://localhost:8080

    Polyfills for old IE support

    matchMedia support from media-match


    This project exists thanks to all the people who contribute. [Contribute].


    Thank you to all our backers! 🙏 [Become a backer]


    Support this project by becoming a sponsor. Your logo will show up here with a link to your website. [Become a sponsor]


    npm i react-slick

    Downloadslast 7 days







    last publish


    • avatar