react-slick

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

Documentation

Installation

npm

1npm install react-slick --save

yarn

1yarn add react-slick

Also install slick-carousel for css and font

1npm install slick-carousel
2
3// Import css files
4import "slick-carousel/slick/slick.css";
5import "slick-carousel/slick/slick-theme.css";

or add cdn link in your html

1<link
2  rel="stylesheet"
3  type="text/css"
4  charset="UTF-8"
5  href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.css"
6/>
7<link
8  rel="stylesheet"
9  type="text/css"
10  href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.min.css"
11/>

PlayGround

Example

1import React from "react";
2import Slider from "react-slick";
3
4export default function SimpleSlider() {
5  var settings = {
6    dots: true,
7    infinite: true,
8    speed: 500,
9    slidesToShow: 1,
10    slidesToScroll: 1
11  };
12  return (
13    <Slider {...settings}>
14      <div>
15        <h3>1</h3>
16      </div>
17      <div>
18        <h3>2</h3>
19      </div>
20      <div>
21        <h3>3</h3>
22      </div>
23      <div>
24        <h3>4</h3>
25      </div>
26      <div>
27        <h3>5</h3>
28      </div>
29      <div>
30        <h3>6</h3>
31      </div>
32    </Slider>
33  );
34}

Props

For all available props, go here.

Methods

For all available methods, go here

Development

Want to run demos locally

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

Community

Join our discord channel to discuss react-slick bugs and ask for help

Contributing

Please see the contributing guidelines