Introduction

In this tutorial, I am going to show you how to build a carousel with React-slick. React-slick is an npm package that provides an easy way to implement any form of sliding display with minimal css. This I believe is a better approach than building from scratch because it is faster and allows you to focus on other important parts of your application.

Prerequisites

You've built stuff with React before.

What we will build

Get your React application up and running

Type the following command into your terminal to create the react application and get the dev server running.

npx create-react-app react-carousel
cd react-carousel
npm start

Then we install the react-slick package

npm install react-slick 
npm install slick-carousel

//or

yarn add react-slick
yarn add slick-carousel

Once that is done installing, we can simply import the component and use it. In this case, we'd create a slider.jsx file that will contain our slider. We'll also need to import the css file from slick-carousel.

import Slider from "react-slick";

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

import image01 from "../assets/images/pexels-jeremy-bishop-2922672.jpg";
import image02 from "../assets/images/pexels-boys-in-bristol-photography-10528234.jpg";
import image03 from "../assets/images/pexels-chris-10666527.jpg";
import image04 from "../assets/images/pexels-joyston-judah-933054.jpg";
import image05 from "../assets/images/pexels-mirco-violent-blur-4072840.jpg";
import image06 from "../assets/images/pexels-tatiana-syrikova-3933881.jpg";

const PictureSlide = () => {
  return (
    <section>
      <div className="gallery">
        <h3 className="header">Image Gallery</h3>
      </div>
      <Slider>
        <div className="image-container">
          <img src={image01} alt="" className="carousel-img" />
        </div>
        <div className="image-container">
          <img src={image02} alt="" className="carousel-img" />
        </div>
        <div className="image-container">
          <img src={image03} alt="" className="carousel-img" />
        </div>
        <div className="image-container">
          <img src={image04} alt="" className="carousel-img" />
        </div>
        <div className="image-container">
          <img src={image05} alt="" className="carousel-img" />
        </div>
        <div className="image-container">
          <img src={image06} alt="" className="carousel-img" />
        </div>
      </Slider>
    </section>
  );
};

export default PictureSlide;

I have six images in my assets folder which I have imported into this component I am using for my gallery.

For the styling, add the following code to your app.css. Nothing fancy, just to center the image and make it look nice, that's all.

#root {
  margin: 0 auto;
  padding: 2rem;
  text-align: center;
  overflow-x: hidden;
}

.gallery {
  width: 100%;
  text-align: center;
}

.header {
  font-size: 2rem;
  font-weight: 500;
}

.carousel-img {
  border-radius: 5px;
  width: 90%;
}

Before we proceed, let us pass this component to our app component to display for us.

import "./App.css";
import PictureSlide from "./components/picture-slide";

function App() {
  return (
    <div>
      <PictureSlide />
    </div>
  );
}

export default App;

The next step is to add the required props for our slider component to work in any way we choose. React-slick exposes certain props that we can consume to make our component look the way we want.

At the top of your file, add this.

import Slider from 'react-slick'

const settings = {
  dots: true,
  infinite: true,
  slidesToShow: 3,
  slidesToScroll: 6,
  autoplay: true,
  speed: 80000,
  autoplaySpeed: 1000,
  cssEase: "linear",
};

//your jsx code comes beneath here

So at this point, our slider component should look something like this

import React from "react";

import Slider from "react-slick";
import image01 from "../assets/images/pexels-jeremy-bishop-2922672.jpg";
import image02 from "../assets/images/pexels-boys-in-bristol-photography-10528234.jpg";
import image03 from "../assets/images/pexels-chris-10666527.jpg";
import image04 from "../assets/images/pexels-joyston-judah-933054.jpg";
import image05 from "../assets/images/pexels-mirco-violent-blur-4072840.jpg";
import image06 from "../assets/images/pexels-tatiana-syrikova-3933881.jpg";
import image07 from "../assets/images/pexels-quang-nguyen-vinh-2649403.jpg";
import image08 from "../assets/images/pexels-walid-ahmad-1509582.jpg";

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

const settings = {
  dots: true,
  infinite: true,
  slidesToShow: 3,
  slidesToScroll: 6,
  autoplay: true,
  speed: 80000,
  autoplaySpeed: 1000,
  cssEase: "linear",
};

const PictureSlide = () => {
  return (
    <section>
      <div className="gallery">
        <h3 className="header">Image Gallery</h3>
      </div>
      <Slider {...settings} className="">
        <div className="image-container">
          <img src={image01} alt="" className="carousel-img" />
        </div>
        <div className="image-container">
          <img src={image02} alt="" className="carousel-img" />
        </div>
        <div className="image-container">
          <img src={image03} alt="" className="carousel-img" />
        </div>
        <div className="image-container">
          <img src={image04} alt="" className="carousel-img" />
        </div>
        <div className="image-container">
          <img src={image05} alt="" className="carousel-img" />
        </div>
        <div className="image-container">
          <img src={image06} alt="" className="carousel-img" />
        </div>
      </Slider>
    </section>
  );
};

export default PictureSlide;

At this point, your carousel should be working just like the example we had at the beginning. Feel free to tweak the settings to change the the slide speed, duration, number of slides to appear on the screen and so many other things.

Conclusion

In this tutorial, you saw how you could create an image carousel with the react-slick npm package. The code example can be found on GitHub.

Tochukwu Ali