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

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

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

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

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

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

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

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