Make a 3d Carousel using React Slick

Sliders have now become an essential part of almost all the websites that we browse through generally, they look appealing and give a nice cool effect to the webpage. Today, we will also built a small 3d slider in react js using the react slick library, documentation can be found here. It is very easy to use and you can create a very attractive slider in just few minutes.

Let's start by creating a new react app using the following command:

npx create-react-app mySlider

Next, we will do the necessary clean up in our app which includes removing the logo.svg and tests file from the src folder of our app.
Now, we need to install the following dependencies in order to make use of slick library, we will also install react icons which we will use for the next/previous icons in our slider, we will 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

Now let's open the App.js file and remove all the code written in the header element of this file since we will be writing our own code. For the purpose of this app, I have created an assets folder in the src folder where I have kept few images to be used in the slider.
First we will import the Slider component ( from 'react-slick') and our images from assets folder in App.js as follows:

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";

Now, i will store the images in an array just to make it easy to map through them and display on screen:

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

Next, I will open the Slider component and map through the images one by one using the map method inside the return statement of our App.js in the following manner:

<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, I have defined the settings object below and also explained the values that are not self-explanatory:

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 will also set the class of 'active' to an image if its index is same as the imageIndex so that it pops up a little on the screen and give that 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 would need to define two methods, one for the previous arrow and one for the next arrow to which we will 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>
    )
  }

In the App.css file of our app, we have define the styles for the images in each slide and active slides to look bigger than the other ones, I am not including the stylesheet here just to keep the article simple, however you can view the complete code here