Get Started

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

Installation

npm

npm install react-slick --save

Yarn

yarn add react-slick

pnpm

pnpm add react-slick

Include CSS

You can include css required for this library in 2 ways

1. Install the slick-carousel package and import css in to your slider component

npm

npm install slick-carousel --save

Yarn

yarn add slick-carousel

pnpm

pnpm add slick-carousel

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

2. or you can add cdn link in your html

<link
  rel="stylesheet"
  type="text/css"
  charset="UTF-8"
  href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.css"
/>
<link
  rel="stylesheet"
  type="text/css"
  href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick-theme.min.css"
/>

6

1

2

3

4

5

6

1

2

3

4

5

6

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>
      <div>
        <h3>4</h3>
      </div>
      <div>
        <h3>5</h3>
      </div>
      <div>
        <h3>6</h3>
      </div>
    </Slider>
  );
}