Carousel Showcase

Introduction

The Carousel component is a versatile tool for displaying a series of items in a rotating fashion. Below are examples demonstrating different carousel configurations.

Usage Examples

<Carousel 
  items={[
    <div key="1" className="w-full h-full bg-red-500 flex items-center justify-center">
      <FaImage className="text-white text-6xl" />
    </div>,
    <div key="2" className="w-full h-full bg-green-500 flex items-center justify-center">
      <FaImage className="text-white text-6xl" />
    </div>,
    <div key="3" className="w-full h-full bg-blue-500 flex items-center justify-center">
      <FaImage className="text-white text-6xl" />
    </div>,
  ]}
  autoPlay={false}
  interval={3000}
  showControls={true}
  className="h-64 bg-gray-200"
/>

<Carousel 
  items={[
    <div key="1" className="w-full h-full bg-red-500 flex items-center justify-center">
      <FaImage className="text-white text-6xl" />
    </div>,
    <div key="2" className="w-full h-full bg-green-500 flex items-center justify-center">
      <FaImage className="text-white text-6xl" />
    </div>,
    <div key="3" className="w-full h-full bg-blue-500 flex items-center justify-center">
      <FaImage className="text-white text-6xl" />
    </div>,
  ]}
  autoPlay={true}
  interval={2000}
  showControls={true}
  className="h-64 bg-gray-200"
/>