How to Create a React Carousel ⚛️ 🎠

In this blog, we will be looking at how to implement a carousel slider in React. I recreated a website for a tech start-up that provides its products for many enterprise businesses and proudly displays those brand logos on its website. When recreating the site, I decided to display the brands on a carousel, that is, it’s automatic, infinite, and allows for manual swiping.

Installing React Slick 📥

I used a library, called React Slick, to achieve the carousel slider. We need to first install the library by typing the below into our command line:

npm install react-slick --save

or

yarn add react-slick

Once you have successfully installed React Slick, you will need to include CSS in your project by adding the below into your command line:

npm install slick-carousel --save

Then add these two lines of code in your CSS file:

@import "~slick-carousel/slick/slick.css";
@import "~slick-carousel/slick/slick-theme.css";

Let’s Get Cracking ⚒️

Now, we will dive in by building out our slider, which I have named the component as BrandSlider and importing Slider from react-slick as follows:

import React, { useState } from 'react';
import Slider from 'react-slick';
import '../../styling/brandslider.css';
const BrandSlider = () => {
  return (
  )
}

As you can see above, we have also used the { useState } hook, as we will be using state to keep track of the image index and styling the central image on the slider.

Calling All Images! 🖼️

For each brand, I found png files of the logo on Google and made them roughly the same size and colour on photoshop, to stick with the theme of the company. I imported each image and then created an array which I will map through inside the component. In the example below, I have not added the brand names but just Brand followed by a number.

import React, { useState } from 'react';
import Slider from 'react-slick';
import brandOne from '../../assets/Brand1Logo.png';
import brandTwo from '../../assets/Brand2Logo.png';
import brandThree from '../../assets/Brand3Logo.png';
import brandFour from '../../assets/Brand4Logo.png';
import brandFive from '../../assets/Brand5Logo.png';
import brandSix from '../../assets/Brand6Logo.png';
import brandSeven from '../../assets/Brand7Logo.png';
import brandEight from '../../assets/Brand8Logo.png';
import '../../styling/brandslider.css';
const images = [brandOne, brandTwo, brandThree, brandFour, brandFive, brandSix, brandSeven, brandEight];
const BrandSlider = () => {
  return (
  )
}

State and Map 🗳️ 🗺️

We will now declare a new state variable, which we’ll call “imageIndex” and set it to 0. We will then add our main code that will map through the array as shown below:

import React, { useState } from 'react';
import Slider from 'react-slick';
import brandOne from '../../assets/Brand1Logo.png';
import brandTwo from '../../assets/Brand2Logo.png';
import brandThree from '../../assets/Brand3Logo.png';
import brandFour from '../../assets/Brand4Logo.png';
import brandFive from '../../assets/Brand5Logo.png';
import brandSix from '../../assets/Brand6Logo.png';
import brandSeven from '../../assets/Brand7Logo.png';
import brandEight from '../../assets/Brand8Logo.png';
import '../../styling/brandslider.css';
const images = [brandOne, brandTwo, brandThree, brandFour, brandFive, brandSix, brandSeven, brandEight];
const BrandSlider = () => {
  const [imageIndex, setImageIndex] = useState(0);
  return (
    <div className='slider'>
      <p>Empowering leading global brands</p>
      <Slider>
        {images.map((img) => (
          <div className='temp'>
            <img src={img} alt={img} />
          </div>
        ))}
      </Slider>
     </div>
  )
}

It is important to note a few things here. Firstly, we have not finished working on the BrandSlider component just yet, as we need to work on how we deal with each image index. As you can see, the className for each img is 'temp' as we will be adding a ternary operator to style the central logo image.

Settings and Styling ⚙️ 🖌️

We will add the className for the div as a ternary operator to express which image is ‘active’ (centered) and which images aren’t. We will also add settings to configure our slider (this may vary in your project).

import React, { useState } from 'react';
import Slider from 'react-slick';
import brandOne from '../../assets/Brand1Logo.png';
import brandTwo from '../../assets/Brand2Logo.png';
import brandThree from '../../assets/Brand3Logo.png';
import brandFour from '../../assets/Brand4Logo.png';
import brandFive from '../../assets/Brand5Logo.png';
import brandSix from '../../assets/Brand6Logo.png';
import brandSeven from '../../assets/Brand7Logo.png';
import brandEight from '../../assets/Brand8Logo.png';
import '../../styling/brandslider.css';
const images = [brandOne, brandTwo, brandThree, brandFour, brandFive, brandSix, brandSeven, brandEight];
const BrandSlider = () => {
  const [imageIndex, setImageIndex] = useState(0);
  const settings = {
    infinite: true,
    lazyload: true,
    speed: 500,
    slidesToShow: 5,
    centerMode: true,
    centerPadding: 0,
    autoplay: true,
    beforeChange: (current, next) => setImageIndex(next)
  };
  return (
    <div className='slider'>
      <p>Empowering leading global brands</p>
      <Slider {...settings}>
        {images.map((img, idx) => (
          <div className={idx === imageIndex ? "slide activeSlide" : "slide"}>
            <img src={img} alt={img} />
          </div>
        ))}
      </Slider>
    </div>
  )
}

Now we go over to the CSS file to style the centered brand logo to increase its scale and its opacity is set to 1 while the non-centered logos are set to 0.2, as follows:

.slide {
  transform: scale(0.5);
  transition: transform 300ms;
  opacity: 0.2;
}
.activeSlide {
  transform: scale(1.5);
  transition: transform 300ms;  
  opacity: 1;
}

And there you have it. Hope this walkthrough is helpful and that you are able to create a seamless carousel slider for your projects!

More content at plainenglish.io