Best React carousel libraries and example

A comprehensive step-by-step tutorial on building a responsive React Carousel in React 18 using some of the popular carousel libraries. A carousel is a slideshow for cycling through a series of content, content can be image or text, or any other, and used in web or mobile applications.

React image slider or carousel is used for interactive content and visually appealing to the page content with slideshows and animations. Carousels are commonly used to highlight important content news heading, feature articles, or image galleries.

In this tutorial, we will integrate the different React carousel or React image slider libraries into our project. First, we will list some of the best available third parties libraries, and second, we’ll demonstrate some it examples. So let’s get started.

Best React carousel libraries

There are plenty of third parties libraries to implement React image sliders or carousels. We’ll list here some, that you can select based on your requirement.

React carousel example using React responsive carousel

We’ll demonstrate the first carousel example using the third-party library the react-responsive-carousel. Here we first need to install this library in our project by following the command.

npx create-react-app react-responsive-carousel
cd react-responsive-carousel
npm install react-responsive-carousel

React responsive carousel is a powerful, lightweight, and fully customizable carousel component for React apps. It offers many features and but I have highlighted some.

1. Responsive
2. Mobile friendly
3. Swipe to slide
4. Mouse emulating touch
5. Server-side rendering is compatible
6. Supports images, videos, text content, or anything you want.
7. Highly customizable:
8. Custom thumbnail

By default, we can have an image thumbnail, and we can enable or display thumbnail by configuring the Carousel component.

Implementing Responsive Carousel in React 18

To demonstrate a responsive carousel from React responsive carousel library we need to import Carousel component from “react-responsive-carousel”. We will implement a carousel in App.js and let edit it.

import "react-responsive-carousel/lib/styles/carousel.min.css"; // requires a loader
import { Carousel } from "react-responsive-carousel";
import horseImage from "./assets/horse.jpg";
import carnivalImage from "./assets/carnival.jpg";
import fairGroundImage from "./assets/fairGround.jpg";
import "./App.css";

function App() {
  return (
    <Carousel>
      <div className="slider-item">
        <img src={horseImage} alt="horse" />
        <p className="horse">Horse</p>
      </div>
      <div className="slider-item">
        <img src={carnivalImage} alt="carnival" />
        <p className="carnival">Carnival</p>
      </div>
      <div className="slider-item">
        <img src={fairGroundImage} alt="fair ground" />
        <p className="ground">Fair fairGround</p>
      </div>
    </Carousel>
  );
}

export default App;

We have taken images from pixbay.com and uploaded images to the src/assets folder.

By adding Animation to the Carousel component, we can use Carousel component configuration or props to add autoplay, infinite loop, and more. Here we can configure the following in the Carousel component.

    <Carousel
      className="carousel"
      infiniteLoop={true}
      autoPlay={true}
      showStatus={false}
      showArrows={false}
      showThumbs={false}
      interval={500}
      onChange={onChange}
      onClickItem={onClickItem}
      onClickThumb={onClickThumb}
    >
    .....
</Carousel>

We can also configure the Carousel image height by running the following CSS style for the image.

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

.slider-item img {
  max-height: 600px;
}

Understanding Carousel component methods, carousel components provide some methods to handle events in the Carousel component.

onChange={onChange}
onClickItem={onClickItem}
onClickThumb={onClickThumb}

React slick carousel example

Let’s implement our second example using React slick library, which is also one of the most popular carousel libraries. Here is a screenshot of React slick example.

We have followed the following steps to configure the slick library in our react project, let’s first install the library in our react project.

npm i react-slick

Once we have Slick installed, let’s add CSS style, and theme from the slick library by adding the following link inside the head tag of the public/index.html file.

<link
  rel="stylesheet"
  type="text/css"
  charset="UTF-8"
  href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.css"
/>
<link
  rel="stylesheet"
  type="text/css"
  href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick-theme.min.css"
/>

Let’s now use the Slider component from React slick library inside our App.js component file.

import Slider from "react-slick";
import horseImage from "./assets/horse.jpg";
import carnivalImage from "./assets/carnival.jpg";
import fairGroundImage from "./assets/fairGround.jpg";
import "./App.css";

function App() {
  const settings = {
    dots: true,
    infinite: true,
    speed: 500,
    slidesToShow: 2,
    slidesToScroll: 1,
  };

  return (
    <Slider {...settings}>
      <div>
        <img src={horseImage} alt="horse" />
      </div>
      <div>
        <img src={carnivalImage} alt="carnival" />
      </div>
      <div>
        <img src={fairGroundImage} alt="fair ground" />
      </div>
    </Slider>
  );
}

export default App;

Conclusion
Finally, we have completed React Carousel and react image slider tutorial with examples. I hope you liked this tutorial, please consider it sharing with others.

Related Articles

1. When and how to use React Context API in react 18?
2. React router navigates outside components.
3. How to implement React routing using react-router-dom?
4. What is react-redux – an example in React?
5. What is React hooks API – How to used it?