Ready-to-Use Components Powered by Flowbite, ShadCN & Headless UI

Component Library

Browse and explore components

Carousel

A Carousel is a UI component used to cycle through a series of images or content in a sliding manner.

Default Carousel

import { Carousel } from 'flowbite-react'

const DefaultCurouselCode = () => {
  return (
    <div>
      <div className='h-56 sm:h-64 xl:h-80 2xl:h-96 overflow-hidden'>
        <Carousel>
          <img src='/images/blog/blog-img1.jpg' alt='...' />
          <img src='/images/blog/blog-img2.jpg' alt='...' />
          <img src='/images/blog/blog-img3.jpg' alt='...' />
          <img src='/images/blog/blog-img4.jpg' alt='...' />
          <img src='/images/blog/blog-img5.jpg' alt='...' />
        </Carousel>
      </div>
    </div>
  )
}

export default DefaultCurouselCode

Static Carousel

import { Carousel } from 'flowbite-react'

const StaticCuroselCode = () => {
  return (
    <div className='h-56 sm:h-64 xl:h-80 2xl:h-96 overflow-hidden'>
      <Carousel slide={false}>
        <img src='/images/blog/blog-img1.jpg' alt='...' />
        <img src='/images/blog/blog-img2.jpg' alt='...' />
        <img src='/images/blog/blog-img3.jpg' alt='...' />
        <img src='/images/blog/blog-img4.jpg' alt='...' />
        <img src='/images/blog/blog-img5.jpg' alt='...' />
      </Carousel>
    </div>
  )
}

export default StaticCuroselCode

Sliding Interval

import { Carousel } from 'flowbite-react'

const SlidingCuroselCode = () => {
  return (
    <div>
      <div className='h-56 sm:h-64 xl:h-80 2xl:h-96 overflow-hidden'>
        <Carousel slideInterval={5000}>
          <img src='/images/blog/blog-img1.jpg' alt='...' />
          <img src='/images/blog/blog-img2.jpg' alt='...' />
          <img src='/images/blog/blog-img3.jpg' alt='...' />
          <img src='/images/blog/blog-img4.jpg' alt='...' />
          <img src='/images/blog/blog-img5.jpg' alt='...' />
        </Carousel>
      </div>
    </div>
  )
}

export default SlidingCuroselCode

Custom controls

import { Carousel } from 'flowbite-react'

const CustomControlCode = () => {
  return (
    <div>
      <div className='h-56 sm:h-64 xl:h-80 2xl:h-96 overflow-hidden'>
        <Carousel leftControl='left' rightControl='Right'>
          <img src='/images/blog/blog-img1.jpg' alt='...' />
          <img src='/images/blog/blog-img2.jpg' alt='...' />
          <img src='/images/blog/blog-img3.jpg' alt='...' />
          <img src='/images/blog/blog-img4.jpg' alt='...' />
          <img src='/images/blog/blog-img5.jpg' alt='...' />
        </Carousel>
      </div>
    </div>
  )
}

export default CustomControlCode

Indicators

import { Carousel } from 'flowbite-react'

const IndicatorsCode = () => {
  return (
    <div>
      <div className='grid h-56 grid-cols-2 gap-4 sm:h-64 xl:h-80 2xl:h-96 overflow-hidden'>
        <Carousel>
          <img src='/images/blog/blog-img1.jpg' alt='...' />
          <img src='/images/blog/blog-img2.jpg' alt='...' />
          <img src='/images/blog/blog-img3.jpg' alt='...' />
          <img src='/images/blog/blog-img4.jpg' alt='...' />
          <img src='/images/blog/blog-img5.jpg' alt='...' />
        </Carousel>
        <Carousel indicators={false}>
          <img src='/images/blog/blog-img1.jpg' alt='...' />
          <img src='/images/blog/blog-img2.jpg' alt='...' />
          <img src='/images/blog/blog-img3.jpg' alt='...' />
          <img src='/images/blog/blog-img4.jpg' alt='...' />
          <img src='/images/blog/blog-img5.jpg' alt='...' />
        </Carousel>
      </div>
    </div>
  )
}

export default IndicatorsCode

Pause On Hover

import { Carousel } from 'flowbite-react'

const PauseHoverCode = () => {
  return (
    <div>
      <div className='h-56 sm:h-64 xl:h-80 2xl:h-96 overflow-hidden'>
        <Carousel pauseOnHover>
          <img src='/images/blog/blog-img1.jpg' alt='...' />
          <img src='/images/blog/blog-img2.jpg' alt='...' />
          <img src='/images/blog/blog-img3.jpg' alt='...' />
          <img src='/images/blog/blog-img4.jpg' alt='...' />
          <img src='/images/blog/blog-img5.jpg' alt='...' />
        </Carousel>
      </div>
    </div>
  )
}

export default PauseHoverCode

Slider Content

Slide 1

Slide 2

Slide 3

import { Carousel } from 'flowbite-react'

const SliderContentCode = () => {
  return (
    <div>
      <div className='h-56 sm:h-64 xl:h-60 overflow-hidden'>
        <Carousel>
          <div className='flex h-full items-center justify-center bg-lightgray text-lg font-semibold text-dark dark:bg-dark dark:text-white'>
            Slide 1
          </div>
          <div className='flex h-full items-center justify-center bg-lightgray text-lg font-semibold text-dark dark:bg-dark dark:text-white'>
            Slide 2
          </div>
          <div className='flex h-full items-center justify-center bg-lightgray text-lg font-semibold text-dark dark:bg-dark dark:text-white'>
            Slide 3
          </div>
        </Carousel>
      </div>
    </div>
  )
}

export default SliderContentCode

Handle Event

Slide 1

Slide 2

Slide 3

import { Carousel } from "flowbite-react";

const SlideEventCode = () => {
  return (
    <div>
      <div className='h-56 sm:h-64 xl:h-60'>
        <Carousel
          onSlideChange={(index) => console.log('onSlideChange()', index)}>
          <div className='flex h-full items-center justify-center bg-lightgray text-lg font-semibold text-dark dark:bg-dark dark:text-white'>
            Slide 1
          </div>
          <div className='flex h-full items-center justify-center bg-lightgray text-lg font-semibold text-dark dark:bg-dark dark:text-white'>
            Slide 2
          </div>
          <div className='flex h-full items-center justify-center bg-lightgray text-lg font-semibold text-dark dark:bg-dark dark:text-white'>
            Slide 3
          </div>
        </Carousel>
      </div>
    </div>
  )
}

export default SlideEventCode

API ( Carousel )

Prop	Description	Type	Default
slide	Enable or disable sliding transitions.	boolean	true
indicators	Show navigation indicators below the carousel.	boolean	true
pauseOnHover	Pause the carousel on mouse hover (desktop) or touch and hold (mobile).	boolean	false
slideInterval	Time interval between slides in milliseconds.	number	5000
leftControl	Custom left navigation control.	'<' \| 'left'	-
rightControl	Custom right navigation control.	'>' \| 'right'	-
onSlideChange	Callback function when the slide changes.	'(index) => console.log("onSlideChange()", index)'	-
activeIndex	Manually control the active slide index.	number	-

Menu

Ready-to-Use Components Powered by Flowbite, ShadCN & Headless UI

Component Library

INPUTS

DATA DISPLAY

FEEDBACK

NAVIGATION

SURFACES

UTILS

Carousel

Default Carousel

Sample Code

Static Carousel

Sample Code

Sliding Interval

Sample Code

Custom controls

Sample Code

Indicators

Sample Code

Pause On Hover

Sample Code

Slider Content

Sample Code

Handle Event

Sample Code

API ( Carousel )