Carousel Slider in React using react-slick

Today we’ll show you how to implement a carousel slider in react using react-slick. It’s very easy to implement in a react project. As we are using the react-slick npm package to create a responsive carousel slider that you can use as a product slider or full screen banner slider as well.

In this article, we will show you how to configure a responsive slider for div based content or just images. Basically we are using the NPM package and the custom CSS to design the slider.

1. Create react application

To begin the example, let’s create a sample react application where we can implement a responsive carousel slider.

Refer to the link: Create React Application

2. Install npm packages for slider

In the second step, we have to install the react-slick npm package to add a slider in react application.

Run the following command to install package.

npm i react-slick

Also we need to install the dependency for css and fonts.

npm i slick-carousel

3. Implement carousel slider

First, we have to import the `react-slick` and css by adding the following code.

import Slider from "react-slick";

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

Now we need to use some configuration for the slider. It’s optional, if you want then you can ignore it for a full screen slider.

const config = {
  dots: true,
  infinite: true,
  speed: 500,
  slidesToShow: 3,
  slidesToScroll: 1
};

Check out api" title="here">here for more information about the slider configuration.

Let’s use the `products` array for example to display as a card in a slider.

const products = [
  {
    img: '/images/product1.jpg',
    title: 'Dolore magna',
    text: 'Lorem ipsum dolor sit amet elit.'
  },
  {
    img: '/images/product2.jpg',
    title: 'Eget est lorem',
    text: 'Lorem Ipsum adipiscing elit ipsum.'
  },
  {
    img: '/images/product3.jpg',
    title: 'Tempus imperdiet',
    text: 'Orci porta non pulvinar neque laoreet.'
  },
  {
    img: '/images/product4.jpg',
    title: 'Mattis rhoncus',
    text: 'Bibendum neque egestas congue quisque.'
  },
  {
    img: '/images/product5.jpg',
    title: 'Odio ut enim',
    text: 'Mattis rhoncus urna neque viverra justo.'
  }
]

Use the below HTML to render a slider with the help of the `products` array.

<slider {...config}="">
  {products.map((x, i) => {
    return <div key={i} class="img-card">
      <img class="img" src={x.img}>
      <div class="card-body">
        <div class="card-title">{x.title}</div>
        <div class="card-text">{x.text}</div>
      </div>
    </div>
  })}
</slider>

To design a product card use below css.

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
    sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background: #ddd;
}

code {
  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
    monospace;
}

.App {
  width: 800px;
  margin: 30px;
}

.cb-centermode {
  margin-bottom: 20px;
  display: block;
}
.cb-centermode input {
  margin-right: 7px;
}

/* card style start */

.img-card {
  border-radius: 4px;
  background: #f5f5f5;
  color: #666;
  overflow: hidden;
  box-shadow: 0 2px 4px 0 rgba(0,0,0,0.2);
  transition: 0.3s;
}

.img-card:hover {
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
}

.img {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

.card-body {
  padding: 15px;
}

.card-title {
  font-size: 20px;
  font-weight: 600;
}

.card-text {
  margin-top: 10px;
}

/* card style end */


/* carousel slider style start */

.slick-slide > div {
  margin: 0 10px;
}

.slick-list {
  margin: 0 -10px;
}

.slick-slide *:focus{
  outline: none;
}
/* carousel slider style end */

After successful configuration, you can see the below output in your browser.

Carousel Slider - Clue Mediator

4. Enable center mode

Here we are sharing the additional configuration that is known as center mode.

You have to add two more settings in your configuration to enable center mode.

const config = {
  dots: true,
  infinite: true,
  speed: 500,
  slidesToShow: 3,
  slidesToScroll: 1,
  centerMode: true, // enable center mode
  centerPadding: '50px' // set center padding
};

After updating the configuration, your output should look like below.

Carousel Slider - Center Mode - Clue Mediator

5. Output

So at last, we will implement the above both configurations in single file using React Hooks">React Hooks and also we will use a `checkbox` field that helps us to switch between two settings.

App.js

import React, { useState } from 'react';

import Slider from "react-slick";

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

function App() {

  const config = {
    dots: true,
    infinite: true,
    speed: 500,
    slidesToShow: 3,
    slidesToScroll: 1
  };

  const [settings, setSettings] = useState(config);

  const products = [
    {
      img: '/images/product1.jpg',
      title: 'Dolore magna',
      text: 'Lorem ipsum dolor sit amet elit.'
    },
    {
      img: '/images/product2.jpg',
      title: 'Eget est lorem',
      text: 'Lorem Ipsum adipiscing elit ipsum.'
    },
    {
      img: '/images/product3.jpg',
      title: 'Tempus imperdiet',
      text: 'Orci porta non pulvinar neque laoreet.'
    },
    {
      img: '/images/product4.jpg',
      title: 'Mattis rhoncus',
      text: 'Bibendum neque egestas congue quisque.'
    },
    {
      img: '/images/product5.jpg',
      title: 'Odio ut enim',
      text: 'Mattis rhoncus urna neque viverra justo.'
    }
  ]

  const onChangeCenterMode = e => {
    if (e.target.checked) {
      setSettings({
        ...config,
        centerMode: true,
        centerPadding: '50px'
      });
    } else {
      setSettings(config);
    }
  }

  return (
    <div class="App">
      <h3>Carousel Slider in React - <a href="https://www.cluemediator.com" target="_blank" rel="noopener noreferrer">Clue Mediator</a></h3>

      <label class="cb-centermode">
        <input type="checkbox" checked onchange={onChangeCenterMode}>
        <span>Enable Center Mode</span>
      </label>

      <slider {...settings}="">
        {products.map((x, i) => {
          return <div key={i} class="img-card">
            <img class="img" src={x.img}>
            <div class="card-body">
              <div class="card-title">{x.title}</div>
              <div class="card-text">{x.text}</div>
            </div>
          </div>
        })}
      </slider>
    </div>
  );
}

export default App;

Run the project and check out the output in the browser.

Output - Carousel Slider in React using react-slick - Clue Mediator

That’s it for today.
Thank you for reading. Happy Coding..!!

Demo & Source Code

Github Repository