Guide · Open source

How to use react-slick: install, configure and build a carousel

Updated 2026-10-29 · written with AI from the project's own documentation and checked against our catalogue data

react-slick is a carousel component for React apps. A carousel is a sliding set of items, such as images or content panels, that the visitor can move through. This guide shows you how to install it, add the CSS it needs, and configure a basic slider with props such as dots, infinite and speed.

react-slickakiran/react-slick · ★ 11.9k · MIT Install options & downloads

Quick start

1Confirm prerequisites. Make sure you have a React project with Node.js and npm or yarn installed.
2Install react-slick. Run npm install react-slick --save or yarn add react-slick.
3Install slick-carousel. Run npm install slick-carousel to get the CSS and font files.
4Import the CSS. Import slick/slick.css and slick/slick-theme.css into your app.
5Add the Slider component. Import Slider from react-slick and wrap your slides in it.
6Set your props. Pass settings such as dots, infinite, speed and slidesToShow as props.

Check the prerequisites before you install

react-slick is installed as a package, and the README lists Node.js and npm or yarn as the prerequisites. It is a React component, so your project needs to be a React app. If you are not using React, this library is not the right tool.

Node.js
npm or yarn
A React project

Install react-slick and slick-carousel

Install the component with npm or yarn. The README also says to install slick-carousel separately, because react-slick does not bring its CSS and fonts with it.

With npm, run the install command shown below.
With yarn, use the yarn command instead.
Install slick-carousel for the CSS and font files.

npm install react-slick --save
yarn add react-slick
npm install slick-carousel

Import the slick CSS files

After installing slick-carousel, import its two stylesheets into your app. If you prefer, the README says you can add the CDN links to your HTML instead of importing the files.

slick/slick.css is the base layout stylesheet.
slick/slick-theme.css is the theme stylesheet.

import "slick-carousel/slick/slick.css";
import "slick-carousel/slick/slick-theme.css";

Create a basic slider with settings

Import Slider from react-slick, then pass your settings as props. Each child element becomes one slide. The example in the README uses dots, infinite, speed, slidesToShow and slidesToScroll.

dots shows navigation dots, infinite loops the slides, speed sets the transition time, and slidesToShow sets how many slides appear at once. The README links to the full list of props in its API documentation.

dots: true shows navigation dots.
infinite: true loops the slides.
speed: 500 sets the transition speed.
slidesToShow and slidesToScroll control how many slides are visible and moved per step.

import React from "react";
import Slider from "react-slick";

export default function SimpleSlider() {
  var settings = {
    dots: true,
    infinite: true,
    speed: 500,
    slidesToShow: 1,
    slidesToScroll: 1
  };
  return (
    <Slider {...settings}>
      <div>
        <h3>1</h3>
      </div>
      <div>
        <h3>2</h3>
      </div>
      <div>
        <h3>3</h3>
      </div>
    </Slider>
  );
}

Find all props and methods

The README does not list every prop itself. It points to the official documentation for the full set of props and for methods you can call on the slider. Check those pages when you need options beyond the basic ones shown here.

Props: see the API page at react-slick.neostack.com/docs/api/.
Methods: see the methods section of the same API documentation.

Run the demos locally

If you want to explore the library's demos, the README describes cloning the repository, installing dependencies and starting the dev server. The demos open on a local port.

Clone the repository from GitHub.
Install dependencies, then start the dev server.
Open the local address in your browser.

git clone https://github.com/akiran/react-slick
cd react-slick
npm install
npm start
open http://localhost:8080

What people use it for

A homepage image slideshow in a React site
A row of product or content panels that visitors scroll through
A testimonials panel that rotates between several quotes

Frequently asked questions

How do I install react-slick?

Run npm install react-slick --save or yarn add react-slick in your React project. The README also asks you to install slick-carousel with npm install slick-carousel for the CSS and fonts.

Is react-slick free to use?

react-slick is released under the MIT licence, according to the project summary. You can read the licence terms in the repository before using it in your project.

Why does my carousel have no styling?

react-slick does not include the slick CSS. Install slick-carousel and import slick/slick.css and slick/slick-theme.css, or add the CDN links from the README to your HTML.

What do I need to run react-slick?

The README lists Node.js and npm or yarn as prerequisites. You also need a React project, since react-slick is a React component.

What is react-slick a port of?

react-slick is a React port of the older slick carousel project, which is described in the README as kenwheeler's slick carousel.

What are alternatives to react-slick?

Comparable projects include Swiper, Embla Carousel and react-responsive-carousel. Compare their features and setup before choosing one for your project.

New agent skills, repos and AI tools — every week

The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.

Our verdict

Use react-slick if you build in React and want a carousel with a familiar, MIT-licensed codebase and a props-based setup. Pick something else if you do not use React, want a carousel that works without extra CSS setup, or need accessibility guarantees, which the README does not describe.

Install options & downloads