Carousel

A responsive and interactive image carousel component with neobrutalism styling, featuring touch support, keyboard navigation, auto-play functionality, and customizable controls.

First Slide

Second Slide

Third Slide

Fourth Slide

1/4

Usage

import Carousel from '@/components/Carousel';

export default function MyPage() {
  const images = [
    {
      src: "/image1.jpg",
      alt: "Image 1 description",
      title: "Beautiful Landscape"
    },
    {
      src: "/image2.jpg",
      alt: "Image 2 description",
      title: "Mountain View"
    },
    {
      src: "/image3.jpg",
      alt: "Image 3 description"
    }
  ];

  return (
    <div className="my-10">
      <h2 className="text-2xl font-bold mb-4">Photo Gallery</h2>
      <Carousel 
        images={images}
        height={400}
        autoPlayInterval={3000}
      />
    </div>
  );
}

Examples

Basic Carousel

A simple carousel with default settings.

First Slide

Second Slide

Third Slide

Fourth Slide

1/4

const images = [
  {
    src: "/image1.jpg",
    alt: "Image 1",
    title: "First Slide"
  },
  {
    src: "/image2.jpg",
    alt: "Image 2",
    title: "Second Slide"
  },
  {
    src: "/image3.jpg",
    alt: "Image 3",
    title: "Third Slide"
  }
];

<Carousel 
  images={images}
  height={300}
/>

Without Auto Play

A carousel with automatic sliding disabled.

First Slide

Second Slide

Third Slide

Fourth Slide

1/4

<Carousel 
  images={images}
  height={300}
  autoPlay={false}
/>

Custom Navigation

A carousel with custom height and hidden dots.

First Slide

Second Slide

Third Slide

Fourth Slide

1/4

<Carousel 
  images={images}
  height={250}
  showDots={false}
/>

Compact Carousel

A smaller carousel with custom styling.

First Slide

Second Slide

1/2

<Carousel 
  images={images.slice(0, 2)}
  height={200}
  width="80%"
  className="mx-auto"
  autoPlayInterval={3000}
/>