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.

Steps to implement carousel slider

  1. Create react application
  2. Install npm packages for slider
  3. Implement carousel slider
  4. Enable center mode
  5. Output

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.

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

3. Implement carousel slider

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

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.

Check out here for more information about the slider configuration.

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

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

To design a product card use below css.

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

Carousel Slider - Clue Mediator
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.

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

Carousel Slider - Center Mode - Clue Mediator
Carousel Slider – Center Mode – Clue Mediator

5. Output

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

App.js

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

Output - Carousel Slider in React using react-slick - Clue Mediator
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
If you found value in this article,
you can support us by buying me a coffee! ☕

You may also like...

4 Responses

  1. pradip amate says:

    thanks u sir for this valuable guidance

  2. justin says:

    i found this article super helpful but could’t help but notice there are some typos in the code

    • Clue Mediator says:

      Hi Justin,
      We have fixed the syntax error but you will also find the source code via the GitHub repo and that we have tested.

Leave a Reply

Your email address will not be published. Required fields are marked *