React Carousel Slider Tutorial for Beginners –

Published by Pawan Sargar on

React Slider Carousel

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.

Pawan Sargar
Follow him
Spread the love
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  

0 Comments

Leave a Reply

Avatar placeholder

Your email address will not be published. Required fields are marked *