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:

import { Carousel } from "flowbite-react";

Default carousel#

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

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.

Sliding interval#

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

Custom controls#

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

Indicators#

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

Pause On Hover#

To conditionally pause the carousel on mouse hover (desktop), or touch and hold (mobile), you can use the pauseOnHover property on the <Carousel> component. Default value is false.

Slider content#

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

Handle onSlideChanged event#

To hook events to slide changed you can use onSlideChange property.

Theme#

To learn more about how to customize the appearance of components, please see the Theme docs.

{
  "root": {
    "base": "relative h-full w-full",
    "leftControl": "absolute left-0 top-0 flex h-full items-center justify-center px-4 focus:outline-none",
    "rightControl": "absolute right-0 top-0 flex h-full items-center justify-center px-4 focus:outline-none"
  },
  "indicators": {
    "active": {
      "off": "bg-white/50 hover:bg-white dark:bg-gray-800/50 dark:hover:bg-gray-800",
      "on": "bg-white dark:bg-gray-800"
    },
    "base": "h-3 w-3 rounded-full",
    "wrapper": "absolute bottom-5 left-1/2 flex -translate-x-1/2 space-x-3"
  },
  "item": {
    "base": "absolute left-1/2 top-1/2 block w-full -translate-x-1/2 -translate-y-1/2",
    "wrapper": {
      "off": "w-full shrink-0 transform cursor-default snap-center",
      "on": "w-full shrink-0 transform cursor-grab snap-center"
    }
  },
  "control": {
    "base": "inline-flex h-8 w-8 items-center justify-center rounded-full bg-white/30 group-hover:bg-white/50 group-focus:outline-none group-focus:ring-4 group-focus:ring-white sm:h-10 sm:w-10 dark:bg-gray-800/30 dark:group-hover:bg-gray-800/60 dark:group-focus:ring-gray-800/70",
    "icon": "h-5 w-5 text-white sm:h-6 sm:w-6 dark:text-gray-800"
  },
  "scrollContainer": {
    "base": "flex h-full snap-mandatory overflow-y-hidden overflow-x-scroll scroll-smooth rounded-lg",
    "snap": "snap-x"
  }
}

References#