react-slick

What is react-slick?

The react-slick npm package is a React component that provides a carousel/slider functionality. It is a wrapper around the popular Slick carousel jQuery plugin, offering a way to add carousel features to React applications. It supports a range of options and settings to customize the behavior and appearance of the carousel.

What are react-slick's main functionalities?

Simple Slider

This code sample demonstrates how to create a simple slider with dots, infinite looping, and a set speed for slide transitions.

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

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

export default SimpleSlider;

Responsive Slider

This code sample shows how to create a responsive slider that adjusts the number of slides shown based on the screen width.

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

function ResponsiveSlider() {
  const settings = {
    dots: true,
    infinite: false,
    speed: 500,
    slidesToShow: 4,
    slidesToScroll: 4,
    responsive: [
      {
        breakpoint: 1024,
        settings: {
          slidesToShow: 3,
          slidesToScroll: 3,
          infinite: true,
          dots: true
        }
      },
      {
        breakpoint: 600,
        settings: {
          slidesToShow: 2,
          slidesToScroll: 2
        }
      },
      {
        breakpoint: 480,
        settings: {
          slidesToShow: 1,
          slidesToScroll: 1
        }
      }
    ]
  };
  return (
    <Slider {...settings}>
      <div><h3>Slide 1</h3></div>
      <div><h3>Slide 2</h3></div>
      <div><h3>Slide 3</h3></div>
      <div><h3>Slide 4</h3></div>
    </Slider>
  );
}

export default ResponsiveSlider;

Custom Arrows

This code sample illustrates how to create a slider with custom arrow components for navigation.

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

function CustomArrowsSlider() {
  function SampleNextArrow(props) {
    const { className, style, onClick } = props;
    return (
      <div
        className={className}
        style={{ ...style, display: 'block', background: 'red' }}
        onClick={onClick}
      />
    );
  }

  function SamplePrevArrow(props) {
    const { className, style, onClick } = props;
    return (
      <div
        className={className}
        style={{ ...style, display: 'block', background: 'green' }}
        onClick={onClick}
      />
    );
  }

  const settings = {
    dots: true,
    infinite: true,
    speed: 500,
    slidesToShow: 1,
    slidesToScroll: 1,
    nextArrow: <SampleNextArrow />,
    prevArrow: <SamplePrevArrow />
  };
  return (
    <Slider {...settings}>
      <div><h3>Slide 1</h3></div>
      <div><h3>Slide 2</h3></div>
    </Slider>
  );
}

export default CustomArrowsSlider;

Other packages similar to react-slick

swiper

Swiper is a powerful and modern touch slider with hardware accelerated transitions. It is highly customizable and has a similar set of features to react-slick, such as responsive breakpoints, navigation, pagination, and more. Swiper also supports virtual slides and multi-row slides, which can be an advantage over react-slick.

react-responsive-carousel

This package provides a simple and customizable carousel component for React applications. It is less feature-rich compared to react-slick but offers a lightweight alternative with basic carousel functionalities like auto play, infinite loop, and custom rendering for arrows and indicators.

keen-slider

Keen-slider is a free library agnostic touch slider with native touch/swipe behavior and great performance. It is a lightweight alternative to react-slick and offers a minimalistic approach to sliders with no dependencies. It provides essential features like touch support and responsiveness but lacks some of the more advanced features found in react-slick.

README

react-slick

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

Documentation

Installation

npm

npm install react-slick --save

yarn

yarn add react-slick

⚠️ Also install slick-carousel for css and font

npm install slick-carousel

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

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

PlayGround

Example

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}>
        <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>
    );
  }
}

Props

For all available props, go here.

Methods

For all available methods, go here

Development

Want to run demos locally

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

Contributing

Please see the contributing guidelines

Contributors

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

Backers

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

Sponsors

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