Carousel

A flexible and accessible carousel component for displaying content in a sliding format. Built with Embla Carousel for smooth animations and touch support.

1. Basic Carousel

The simplest way to use the carousel with default controls and indicators.

Slide 1

Slide 2

Slide 3

import { Carousel } from "@/components/ui/carousel";

<Carousel
    items={[
      <div>Slide 1</div>,
      <div>Slide 2</div>,
      <div>Slide 3</div>,
    ]}
/>

2. Image Carousel

Perfect for showcasing product images or photo galleries.

import { Carousel } from "@/components/ui/carousel";
import Image from "next/image";

<Carousel
    items={[
      <div key={1} className="w-full h-[400px] relative"><Image src="/img1.webp" alt="Image 1" fill className="object-cover" /></div>,
      <div key={2} className="w-full h-[400px] relative"><Image src="/img2.avif" alt="Image 2" fill className="object-cover" /></div>,
      <div key={3} className="w-full h-[400px] relative"><Image src="/img3.avif" alt="Image 3" fill className="object-cover" /></div>,
    ]}
    contentClassName="gap-2"
    itemClassName="overflow-hidden rounded-xl"
/>

3. Testimonial Carousel

Display customer testimonials with custom styling.

This product has completely transformed how we work. Highly recommend!

John Doe

CEO, Company Inc.

Incredible experience from start to finish. The team was amazing!

Jane Smith

Designer, Studio XYZ

Best investment we've made this year. Results speak for themselves.

Mike Brown

Founder, Startup Labs

import { Carousel } from "@/components/ui/carousel";

<Carousel
  items={[
    <div className="p-8 bg-alpha-white rounded-lg">
      <p className="text-lg mb-4">"Amazing product!"</p>
      <div className="flex items-center gap-3">
        <img src="/avatar.jpg" className="w-12 h-12 rounded-full" />
        <div>
          <p className="font-semibold">John Doe</p>
          <p className="text-sm text-quaternary">CEO, Company</p>
        </div>
      </div>
    </div>,
    // More testimonials...
  ]}
  opts={{ loop: true }}
/>

4. Auto-play Carousel

Carousel without manual controls, ideal for banner rotations.

Summer Sale

Up to 50% off

New Arrivals

Check out our latest collection

Free Shipping

On orders over $50

import { Carousel } from "@/components/ui/carousel";

<Carousel
  items={[...]}
  showControls={false}
  opts={{ loop: true }}
/>

5. Advanced Custom Carousel

For complex use cases, use CarouselCustom for full control over layout and behavior.

Featured Products

Product 1

Product Name 1

Description of product

$29.99

Product 2

Product Name 2

Description of product

$59.98

Product 3

Product Name 3

Description of product

$89.97

Product 4

Product Name 4

Description of product

$119.96

import { CarouselCustom } from "@/components/ui/carousel";

<CarouselCustom.Root opts={{ align: "start", loop: true }}>
  <div className="flex justify-between items-center mb-4">
    <h3>Featured Products</h3>
    <div className="flex gap-2">
      <CarouselCustom.PrevTrigger>←</CarouselCustom.PrevTrigger>
      <CarouselCustom.NextTrigger>→</CarouselCustom.NextTrigger>
    </div>
  </div>
  
  <CarouselCustom.Content className="gap-4">
    <CarouselCustom.Item className="basis-1/3">
      {/* Your content */}
    </CarouselCustom.Item>
  </CarouselCustom.Content>
  
  <CarouselCustom.IndicatorGroup>
    {({ index }) => (
      <CarouselCustom.Indicator 
        key={index} 
        index={index} 
      />
    )}
  </CarouselCustom.IndicatorGroup>
</CarouselCustom.Root>

API Reference

Carousel Props (Simple API)

Prop	Type	Default	Description
items	ReactNode[]	—	Array of slides to display in the carousel.
opts?	CarouselOptions		Embla Carousel options (loop, align, etc.).
orientation?	"horizontal" \| "vertical"	"horizontal"	Direction of the carousel.
showControls?	boolean	true	Show previous/next navigation buttons.
showIndicators?	boolean	true	Show dot indicators for each slide.
controlsClassName?	string	—	Custom classes for control buttons.
indicatorsClassName?	string	—	Custom classes for indicators container.
itemClassName?	string	—	Custom classes for each carousel item.
contentClassName?	string	—	Custom classes for content container.

CarouselCustom Components

Component	Description
Root	Main carousel wrapper with context provider.
Content	Container for carousel items with overflow handling.
Item	Individual slide wrapper.
PrevTrigger	Button to navigate to previous slide.
NextTrigger	Button to navigate to next slide.
IndicatorGroup	Container for slide indicators.
Indicator	Individual dot indicator for each slide.

Common Options

Frequently used Embla Carousel options that you can pass to the opts prop.

Option	Type	Description
loop	boolean	Enable infinite looping.
align	"start" \| "center" \| "end"	Align slides to start, center, or end.
slidesToScroll	number	Number of slides to scroll at once.
skipSnaps	boolean	Skip snapping to slides.
dragFree	boolean	Enable free-scroll dragging.

💡 Tip: For a complete list of options, visit the Embla Carousel documentation.