React Carousel - Flowbite

Get started with the carousel component to showcase images and content and slide through them using custom controls, intervals, and indicators with React and Tailwind CSS

Use the responsive carousel component to allow users to slide through multiple items and navigate between them using the control buttons and indicators.

Choose from multiple examples and options to update the intervals, make the carousel static and set custom control button and indicator by configuring React and the utility classes from Tailwind CSS.

To start using the carousel component you first need to import it from Flowbite React:

'use client';

import { Carousel } from 'flowbite';

Default carousel

Use this example by adding a series of images inside of the <Carousel> component.

<Carousel>
  <img
    alt="..."
    src="https://flowbite.com/docs/images/carousel/carousel-1.svg"
  />
  <img
    alt="..."
    src="https://flowbite.com/docs/images/carousel/carousel-2.svg"
  />
  <img
    alt="..."
    src="https://flowbite.com/docs/images/carousel/carousel-3.svg"
  />
  <img
    alt="..."
    src="https://flowbite.com/docs/images/carousel/carousel-4.svg"
  />
  <img
    alt="..."
    src="https://flowbite.com/docs/images/carousel/carousel-5.svg"
  />
</Carousel>

Static carousel

Pass the slide prop to the carousel component to make it static and disable the automatic sliding functionality. This does not disable the control or indicator buttons.

<Carousel>
  <img
    alt="..."
    src="https://flowbite.com/docs/images/carousel/carousel-1.svg"
  />
  <img
    alt="..."
    src="https://flowbite.com/docs/images/carousel/carousel-2.svg"
  />
  <img
    alt="..."
    src="https://flowbite.com/docs/images/carousel/carousel-3.svg"
  />
  <img
    alt="..."
    src="https://flowbite.com/docs/images/carousel/carousel-4.svg"
  />
  <img
    alt="..."
    src="https://flowbite.com/docs/images/carousel/carousel-5.svg"
  />
</Carousel>

Sliding interval

Use the slideInterval prop to set the interval between slides in milliseconds. The default value is 3000.

<Carousel slideInterval={5000}>
  <img
    alt="..."
    src="https://flowbite.com/docs/images/carousel/carousel-1.svg"
  />
  <img
    alt="..."
    src="https://flowbite.com/docs/images/carousel/carousel-2.svg"
  />
  <img
    alt="..."
    src="https://flowbite.com/docs/images/carousel/carousel-3.svg"
  />
  <img
    alt="..."
    src="https://flowbite.com/docs/images/carousel/carousel-4.svg"
  />
  <img
    alt="..."
    src="https://flowbite.com/docs/images/carousel/carousel-5.svg"
  />
</Carousel>

Custom controls

Use the leftControl and rightControl props to set custom control buttons.

<Carousel
  leftControl="left"
  rightControl="right"
>
  <img
    alt="..."
    src="https://flowbite.com/docs/images/carousel/carousel-1.svg"
  />
  <img
    alt="..."
    src="https://flowbite.com/docs/images/carousel/carousel-2.svg"
  />
  <img
    alt="..."
    src="https://flowbite.com/docs/images/carousel/carousel-3.svg"
  />
  <img
    alt="..."
    src="https://flowbite.com/docs/images/carousel/carousel-4.svg"
  />
  <img
    alt="..."
    src="https://flowbite.com/docs/images/carousel/carousel-5.svg"
  />
</Carousel>

Indicators

Add custom indicators or disable them by passing the indicators prop to the <Carousel> component.

<Carousel>
  <img
    alt="..."
    src="https://flowbite.com/docs/images/carousel/carousel-1.svg"
  />
  <img
    alt="..."
    src="https://flowbite.com/docs/images/carousel/carousel-2.svg"
  />
  <img
    alt="..."
    src="https://flowbite.com/docs/images/carousel/carousel-3.svg"
  />
  <img
    alt="..."
    src="https://flowbite.com/docs/images/carousel/carousel-4.svg"
  />
  <img
    alt="..."
    src="https://flowbite.com/docs/images/carousel/carousel-5.svg"
  />
</Carousel>
<Carousel>
  <img
    alt="..."
    src="https://flowbite.com/docs/images/carousel/carousel-1.svg"
  />
  <img
    alt="..."
    src="https://flowbite.com/docs/images/carousel/carousel-2.svg"
  />
  <img
    alt="..."
    src="https://flowbite.com/docs/images/carousel/carousel-3.svg"
  />
  <img
    alt="..."
    src="https://flowbite.com/docs/images/carousel/carousel-4.svg"
  />
  <img
    alt="..."
    src="https://flowbite.com/docs/images/carousel/carousel-5.svg"
  />
</Carousel>

Slider content

Instead of images you can also use any type of markup and content inside the carousel such as simple text.

Slide 1

Slide 2

Slide 3

<Carousel>
  <div className="flex h-full items-center justify-center bg-gray-400 dark:bg-gray-700 dark:text-white">
    Slide 1
  </div>
  <div className="flex h-full items-center justify-center bg-gray-400 dark:bg-gray-700 dark:text-white">
    Slide 2
  </div>
  <div className="flex h-full items-center justify-center bg-gray-400 dark:bg-gray-700 dark:text-white">
    Slide 3
  </div>
</Carousel>

References

Flowbite Carousel