What Is Carousel in React ?

A carousel is a powerful functionality of React. It’s a rotating or sliding component that shows multiple items like images, text, or other components in our app.

Specifically, a carousel is used in banners, product showcases, or portfolios to present content in a visually appealing way.

React provides multiple ready-to-use libraries to build carousel in React. Such as React Silk, Swiper, etc. Also, you can build your own carousel using custom code if you want to add different behavior and design to it.

Why Use a Carousel in React?

1. Enhanced User Experience: Carousel’s main functionality is to allow users to explore content without scrolling or switching pages.
2. Space Efficiency: Carousel is saving space on our webpage, because it is showing multiple items in a single frame.
3. Dynamic Content Display: It can automatically highlight a important content on display.

How To Import Carousel In React?

First, we will install React-Slick library using the following command:

npm install react-slick slick-carousel

Remember, React-Slick depends on Slick Carousel’s CSS, so you also need to import these CSS files:

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

Basic Carousel Example with React-Slick

Here’s a basic example of a carousel using the React-Slick library:

// CarouselComponent.js
import React from 'react';
import Slider from 'react-slick';
import 'slick-carousel/slick/slick.css';
import 'slick-carousel/slick/slick-theme.css';

function CarouselComponent() {
  const settings = {
    dots: true,          // Show navigation dots
    infinite: true,      // Loop slides
    speed: 500,          // Transition speed
    slidesToShow: 1,     // Show one slide at a time
    slidesToScroll: 1,   // Scroll one slide at a time
    autoplay: true,      // Enable autoplay
    autoplaySpeed: 3000, // Slide every 3 seconds
  };

  return (
    <Slider {...settings}>
      <div>
        <img src="image1.jpg" alt="Slide 1" />
      </div>
      <div>
        <img src="image2.jpg" alt="Slide 2" />
      </div>
      <div>
        <img src="image3.jpg" alt="Slide 3" />
      </div>
    </Slider>
  );
}

export default CarouselComponent;

Explanation of Carousel Settings:

• dots: Showing the navigation dots below the carousel.
• Infinite: Working Loops as back to the first slide after the last slide.
• speed: Controls the transition speed between slides (500ms in this case).
• slidesToShow and slidesToScroll: Determine how many slides are available to show on the screen.
• autoplay and autoplaySpeed: Configures the carousel speed to slide automatically every 3 seconds.

Creating a Custom Carousel Without Libraries

Create a custom carousel without any external libraries. This method is more flexible but requires more code to handle transitions, navigation, and autoplay.

Example of a Custom Carousel:

import React, { useState, useEffect } from 'react';

function CustomCarousel() {
  const slides = ['image1.jpg', 'image2.jpg', 'image3.jpg'];
  const [currentSlide, setCurrentSlide] = useState(0);

  const nextSlide = () => {
    setCurrentSlide((prev) => (prev + 1) % slides.length);
  };

  const prevSlide = () => {
    setCurrentSlide((prev) => (prev - 1 + slides.length) % slides.length);
  };

  useEffect(() => {
    const interval = setInterval(nextSlide, 3000);
    return () => clearInterval(interval);
  }, []);

  return (
    <div className="carousel">
      <button onClick={prevSlide}>Previous</button>
      <img src={slides[currentSlide]} alt={`Slide ${currentSlide + 1}`} />
      <button onClick={nextSlide}>Next</button>
    </div>
  );
}

export default CustomCarousel;

CSS of the above Carousel code:

.carousel {
  position: relative;
  max-width: 600px;
  margin: auto;
  overflow: hidden;
}

.carousel img {
  width: 100%;
  transition: transform 0.5s ease-in-out;
}

button {
  position: absolute;
  top: 50%;
  background: rgba(0, 0, 0, 0.5);
  color: white;
  border: none;
  padding: 10px;
  cursor: pointer;
}

button:hover {
  background: rgba(0, 0, 0, 0.7);
}

button:first-of-type {
  left: 10px;
}

button:last-of-type {
  right: 10px;
}

Explanation of the Custom Carousel Logic:

In this code, we add a custom forward and backwards code for the slides. Then adds a useEffect setup display slides in every 3 seconds.