React Carousel Slider Tutorial for Beginners –

Creating a Carousel for your website can give a premium feel to your users and might increase the authenticity and overall conversions.

But, creating a carousel right from scratch using CSS & JavaScript can be a little bit of pain. So, today I’ll show you a really easy method to create a carousel. You can create a carousel in just a few lines of code and also make it responsive without adding extra CSS

Also, the best part is that you’ll be able to animate it with just one line of code.

So, let’s get started.

What we’ll create?

A Friends Carousel,

Create React App –

So, I assume that you might have created the React app from your terminal and deleted all the boilerplate code and the testing files. So, make sure you are a clean slate.

npx create-react-app my-app

//or

yarn create react-app my-app

Now, cd to your app,

cd my-app

and run the app,

npm start

//or

yarn start

Ok, now I assume that you’re app might be running, so let us install some packages. We will be installing two packages, which will help us to create amazing react carousels in just a minute.

1. react-slick
2. react-carousel

npm install react-slick

//&

npm install react-carousel

now, import the package and add CSS files,

import Slider from "react-slick";

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

Create a settings object and pass the options that you want for your carousel or slider.

const settings = {
    dots: false,
    lazyLoad: true,
    infinite: true,
    speed: 500,
    slidesToShow: 4,
    slidesToScroll: 1,
    autoplay: true,
    autoplaySpeed: 1500,
  };

You can also make it responsive, by adding these options,

responsive: [
      {
        breakpoint: 1024,
        settings: {
          slidesToShow: 3,
          slidesToScroll: 1,
          infinite: true
        }
      },
      {
        breakpoint: 600,
        settings: {
          slidesToShow: 2,
          slidesToScroll: 1,
          initialSlide: 2
        }
      },
      {
        breakPoint: 480,
        settings: {
          slidesToShow: 1,
          slidesToScroll: 1
        }
      }
    ]

Now, add your images and here we are mapping out al the images from the data file, you can do the same instead of repeating the code.

export default function App() {
    return (
    <div className="App">
      <h1>Awesome React Carousel Animation</h1>
      <div className="carousel">
        <Slider {...settings}>
          {images.map((img) => (
            <img alt="" src={img.img} key={img.key} />
          ))}
        </Slider>
      </div>
    </div>
  );
}

Complete Code,

import Slider from "react-slick";

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

import { images } from "./data";

export default function App() {
  const settings = {
    dots: false,
    lazyLoad: true,
    infinite: true,
    speed: 500,
    slidesToShow: 4,
    slidesToScroll: 1,
    autoplay: true,
    autoplaySpeed: 1500,
    responsive: [
      {
        breakpoint: 1024,
        settings: {
          slidesToShow: 3,
          slidesToScroll: 1,
          infinite: true
        }
      },
      {
        breakpoint: 600,
        settings: {
          slidesToShow: 2,
          slidesToScroll: 1,
          initialSlide: 2
        }
      },
      {
        breakPoint: 480,
        settings: {
          slidesToShow: 1,
          slidesToScroll: 1
        }
      }
    ]
  };
  return (
    <div className="App">
      <h1>Awesome React Carousel Animation</h1>
      <div className="carousel">
        <Slider {...settings}>
          {images.map((img) => (
            <img alt="" src={img.img} key={img.key} />
          ))}
        </Slider>
      </div>
    </div>
  );
}

Check the live version here.

I hope this post was helpful, if it was make sure to follow our Coding Master newsletter. Also, let us know if you want any tutorial on web development, we’ll be glad to help you.

• Author
• Recent Posts

Follow him

Pawan Sargar

Blogger at Coding Master

Pawan Sargar is a self-taught web developer & content writer. He is passionate about helping people learn about web development & tech through easily digestible content. He also owns a tech blog waystoweb.com and you can find him on twitter.

Follow him

Latest posts by Pawan Sargar (see all)

• Frontegg: Best Auth System for your Frontend - September 27, 2022
• NextJS vs ReactJS: Which is the best for your project? - September 26, 2022
• 5 Amazing React libraries to make your App Stand Out! - July 28, 2022