How to make a 3d carousel using React Slick

Overview

Sliders have become an essential part of nearly all the websites we browse through. Generally, they make the webpage appealing to the audience. Today, we’ll learn to build a small 3d slider in ReactJs using the react-slick library. Documentation can be found here. It is easy to use, and we can create a very attractive slider in only a few minutes.

Create the App

We use the below command to make a new react application:

npx create-react-app mySlider

Cleanup

Next, we’ll do the necessary cleanup in our application, which includes removing the logo.svg and tests file from the src folder.

Install dependencies

Next, we need to install some dependencies to use the slick library. We’ll also install react icons, which we’ll use for the next/previous icons in our slider. We’ll run the following command in the terminal to install the packages:

npm i react-icons react-slick slick-carousel

or

yarn add react-icons react-slick slick-carousel

Let’s open the App.js file and remove all the code in the header element because we’ll be writing our own code. For this application, we create an assets folder in the src folder, where we keep a few images to be used in the slider.

Import Assets

First, we’ll import the Slider component ( from ‘react-slick’) and our images from the assets folder in App.js, as shown below:

import Slider from "react-slick";
import pic1 from "./assets/Consulting-rafiki.png";
import pic2 from "./assets/Creative writing-rafiki.png";
import pic3 from "./assets/Football Goal-rafiki.png";
import pic4 from "./assets/Researchers-rafiki.png";
import pic5 from "./assets/User research-rafiki.png";

Also, import the previous and next arrows from react-icons library:

import { FaArrowRight, FaArrowLeft } from "react-icons/fa";

Next, we’ll store the images in an array to make it easy to map through them and display on screen:

const images = [pic1, pic2, pic3, pic4, pic5];

Code for Slider

We’ll open the Slider component and map through the images one by one using the map method inside the return statement of App.js, as shown below:

<div className="App">
      <h1>React 3D Slider</h1>
      <Slider>
        {images.map((img, idx) => (
          <div>   
            <img src={img} alt={idx} />
          </div>
        ))}
      </Slider>
    </div>

The slick library requires us to initialize the settings object, where we define some rules for our slider. We define the settings object below and explain the values:

const settings = {
  infinite:true, //to allow the slides to show infinitely
  lazyLoad: true,
  speed: 300, //this is the speed of slider in ms
  slidesToShow:3, //number of slides to show up on screen
  centerMode: true, 
  centerPadding: 0,
  nextArrow: <NextArrow />, //imported from 'react-icons'
  prevArrow: <PrevArrow />, //imported from 'react-icons'
};

Now, in order to iterate through the images one by one we will create an image index and set it to zero initially:

const [imgIndex,setImgIndex] = useState(0)

and in the settings object we will setImgIndex to iterate on next slide:

 beforeChange: (current, next) => setImgIndex(next), 

We’ll also set the class, ‘active’, to an image if its index is same as the imageIndex so that it pops up a little on the screen and perform a 3d effect:

return (
    <div className="App">
      <h1>React 3D Slider</h1>
      <Slider {...settings}>
        {images.map((img, idx) => (
     
          <div className={idx === imgIndex ? "slide activeSlide" : "slide"}>
                 
            <img src={img} alt={idx} />
          </div>
        ))}
      </Slider>
    </div>
  );

Also, we need to define two methods, one for the previous arrow and one for the next arrow, to which we’ll specify the onClick prop and give the class of next and prev for the slides to be shown.

  const NextArrow = ({onClick}) => {
    return (
      <div className="arrow next" onClick={onClick}>
        <FaArrowRight />
      </div>
    )
  }

  const PrevArrow = ({onClick}) => {
    return (
      <div className="arrow prev" onClick={onClick}>
        <FaArrowLeft />
      </div>
    )
  }

Styles for the application

In the App.css file, we define the styles for the images in each slide and active slides to look bigger than the others. We do not include the stylesheet here, because we want to keep the article simple. However, click here to view the complete code.