Carousel

A slideshow component for cycling through elements like images or cards.

Carousels provide an engaging way to display multiple items in a limited space, allowing users to navigate through content horizontally or vertically. They support touch gestures, keyboard navigation, and automatic playback, making them ideal for image galleries, testimonials, or featured content.

Example

"use client"

import { Card, CardContent } from "@strongtie/design-system/card"
import {
  Carousel,
  CarouselContent,
  CarouselItem,
  CarouselNext,
  CarouselPrevious,
} from "@strongtie/design-system/carousel"

export function CarouselDefault() {
  return (
    <Carousel className="w-full max-w-xs">
      <CarouselContent>
        {Array.from({ length: 5 }).map((_, index) => (
          <CarouselItem key={index}>
            <div className="p-1">
              <Card>
                <CardContent className="flex aspect-square items-center justify-center p-6">
                  <span className="text-4xl font-semibold">{index + 1}</span>
                </CardContent>
              </Card>
            </div>
          </CarouselItem>
        ))}
      </CarouselContent>
      <CarouselPrevious />
      <CarouselNext />
    </Carousel>
  )
}

Installation


npm install @strongtie/design-system

import { Carousel } from "@strongtie/design-system/carousel"

Components

This module exports the following components:

Carousel
CarouselContent
CarouselItem
CarouselNext
CarouselPrevious

Props

`<Carousel>`

Prop	Type	Default
`opts`	`Partial<OptionsType>`	-
`orientation`	`horizontal` \| `vertical`	-
`plugins`	`CreatePluginType<LoosePluginType, {}>[]`	-
`setApi`	`((api: EmblaCarouselType) => void)`	-

`<CarouselNext>`

Prop	Type	Default	Description
`size`	`"default" \| "sm" \| "lg" \| "icon" \| "icon-sm" \| "icon-lg" \| null`	-
`variant`	`"link" \| "default" \| "destructive" \| "outline" \| "secondary" \| "ghost" \| null`	-

`<CarouselPrevious>`

Prop	Type	Default	Description
`size`	`"default" \| "sm" \| "lg" \| "icon" \| "icon-sm" \| "icon-lg" \| null`	-
`variant`	`"link" \| "default" \| "destructive" \| "outline" \| "secondary" \| "ghost" \| null`	-

Examples

"use client"

import { Card, CardContent } from "@strongtie/design-system/card"
import {
  Carousel,
  CarouselContent,
  CarouselItem,
  CarouselNext,
  CarouselPrevious,
} from "@strongtie/design-system/carousel"

export function CarouselDefault() {
  return (
    <Carousel className="w-full max-w-xs">
      <CarouselContent>
        {Array.from({ length: 5 }).map((_, index) => (
          <CarouselItem key={index}>
            <div className="p-1">
              <Card>
                <CardContent className="flex aspect-square items-center justify-center p-6">
                  <span className="text-4xl font-semibold">{index + 1}</span>
                </CardContent>
              </Card>
            </div>
          </CarouselItem>
        ))}
      </CarouselContent>
      <CarouselPrevious />
      <CarouselNext />
    </Carousel>
  )
}

Double

"use client"

import {
  Carousel,
  CarouselContent,
  CarouselItem,
  CarouselNext,
  CarouselPrevious,
} from "@strongtie/design-system/carousel"

export function CarouselDouble() {
  return (
    <div className="mx-auto w-full max-w-md">
      <Carousel>
        <CarouselContent>
          <CarouselItem className="pl-1 md:basis-1/2 lg:basis-1/3">
            <div className="bg-muted flex aspect-square items-center justify-center rounded-lg p-6">
              <span className="text-4xl font-semibold">1</span>
            </div>
          </CarouselItem>
          <CarouselItem className="pl-1 md:basis-1/2 lg:basis-1/3">
            <div className="bg-muted flex aspect-square items-center justify-center rounded-lg p-6">
              <span className="text-4xl font-semibold">2</span>
            </div>
          </CarouselItem>
          <CarouselItem className="pl-1 md:basis-1/2 lg:basis-1/3">
            <div className="bg-muted flex aspect-square items-center justify-center rounded-lg p-6">
              <span className="text-4xl font-semibold">3</span>
            </div>
          </CarouselItem>
          <CarouselItem className="pl-1 md:basis-1/2 lg:basis-1/3">
            <div className="bg-muted flex aspect-square items-center justify-center rounded-lg p-6">
              <span className="text-4xl font-semibold">4</span>
            </div>
          </CarouselItem>
          <CarouselItem className="pl-1 md:basis-1/2 lg:basis-1/3">
            <div className="bg-muted flex aspect-square items-center justify-center rounded-lg p-6">
              <span className="text-4xl font-semibold">5</span>
            </div>
          </CarouselItem>
        </CarouselContent>
        <CarouselPrevious />
        <CarouselNext />
      </Carousel>
    </div>
  )
}

Styling

Components can be styled using the className prop. The design system uses Tailwind CSS for styling.

Classes

CSS classes used by this component:

carousel
carousel-content
carousel-item
carousel-next
carousel-previous

Accessibility

Ensure proper accessibility attributes are added when implementing this component.

Card Chart

On This Page

Example Installation Components Props <Carousel><CarouselNext><CarouselPrevious>Examples Double Styling Classes Accessibility

Contribute