• Logo

    Elementra UI

    v0.1.8 - Documentation
  1. Docs
  3. Components/carousel/

Carousel

A touch-friendly, responsive slideshow slider for images, testimonials, and feature highlights.

1Installation

npm i elementra-ui

2Add Component CLI

npx elementra-ui add carousel

3Interactive Preview

Modern Design Systems

Crafted with Tailwind CSS & Framer Motion

Accessible & Responsive

Keyboard navigation & touch gestures out of the box

Zero Dependencies

Pure React state management with fluid transitions

Code Usage

import {
  Carousel,
  CarouselContent,
  CarouselItem,
  CarouselPrevious,
  CarouselNext,
  CarouselIndicators,
} from "@/components/ui/carousel";

export default function CarouselDemo() {
  return (
    <Carousel opts={{ loop: true, autoplay: true }}>
      <CarouselContent>
        <CarouselItem>
          <div className="p-8 bg-card border border-border rounded-xl text-center">
            <h3 className="text-xl font-bold">Slide 1</h3>
          </div>
        </CarouselItem>
        <CarouselItem>
          <div className="p-8 bg-card border border-border rounded-xl text-center">
            <h3 className="text-xl font-bold">Slide 2</h3>
          </div>
        </CarouselItem>
      </CarouselContent>
      <CarouselPrevious />
      <CarouselNext />
      <CarouselIndicators />
    </Carousel>
  );
}