React Carousel - Flowbite

Use the carousel component to slide through multiple elements and images using custom controls, indicators, intervals, and options

The carousel component can be used to cycle through a set of elements using custom options, controls, and indicators.

Default 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>

Sliding interval

<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>

Static 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>

Custom controls

<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

<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>

Slide as anything

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>