Ui Carousel

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	-

Dashboards

Apps

Chat Application

eCommerce App

Notes App

Calendar App

Contact Application

Tickets App

Email App

Blog App

Chat Application

eCommerce App

Notes App

Calendar App

Contact Application

Tickets App

Email App

Blog App

Dashboards

Apps

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 )