Carousel

Przewijany poziomo lub pionowo zestaw slajdów z nawigacją gestem przesunięcia, klawiaturą i przyciskami, zbudowany na Embla.

Kod źródłowy Embla Rejestr

TokenyJedno źródło prawdy

KomponentyDomyślnie dostępne

WzorceSprawdzone kompozycje

MotywyDopasowane do twojej marki

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

const slides = [
  {
    title: "Tokeny",
    body: "Jedno źródło prawdy",
  },
  {
    title: "Komponenty",
    body: "Domyślnie dostępne",
  },
  {
    title: "Wzorce",
    body: "Sprawdzone kompozycje",
  },
  {
    title: "Motywy",
    body: "Dopasowane do twojej marki",
  },
]

export default function CarouselDemo() {
  return (
    <Carousel className="w-full max-w-44" aria-label="Najważniejsze cechy prfct">
      <CarouselContent>
        {slides.map((slide, index) => (
          <CarouselItem
            key={slide.title}
            aria-label={`${index + 1} z ${slides.length}`}
          >
            <div className="flex aspect-square flex-col justify-between rounded-xl bg-muted p-4">
              <span className="font-mono text-xs text-muted-foreground numeric">
                {String(index + 1).padStart(2, "0")}
              </span>
              <div className="flex flex-col">
                <span className="text-heading-md text-foreground">
                  {slide.title}
                </span>
                <span className="text-sm text-muted-foreground">
                  {slide.body}
                </span>
              </div>
            </div>
          </CarouselItem>
        ))}
      </CarouselContent>
      <CarouselPrevious />
      <CarouselNext />
    </Carousel>
  )
}

Anatomia

1WidokObszar widoczny. Przycina slajdy poza ekranem i podąża za przeciągnięciem lub przesunięciem palcem.
2PoprzedniCofa o jeden slajd. Na pierwszym slajdzie jest wyłączony, chyba że karuzela jest zapętlona.
3SlajdJeden slajd: grupa odczytywana jako slajd. Nadaj mu etykietę z jego pozycją.
4NastępnyPrzechodzi o jeden slajd dalej. Na ostatnim slajdzie jest wyłączony, chyba że karuzela jest zapętlona.

Instalacja

$ pnpm dlx shadcn@latest add https://www.prfct.dev/r/carousel.json

Użycie

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

<Carousel aria-label="Product screenshots">
  <CarouselContent>
    <CarouselItem>…</CarouselItem>
    <CarouselItem>…</CarouselItem>
    <CarouselItem>…</CarouselItem>
  </CarouselContent>
  <CarouselPrevious />
  <CarouselNext />
</Carousel>

Przyciski „poprzedni” i „następny” znajdują się poza slajdami, 48 px na lewo i na prawo od nich. Zostaw na nie miejsce — albo ustaw je samodzielnie przez className.

Szerokość slajdu ustawisz klasą basis-* na CarouselItem. Połącz ją z responsywnymi prefiksami, żeby na szerszych ekranach pokazać więcej slajdów, oraz z opts={{ align: "start" }}, żeby slajdy przyciągały się do krawędzi początkowej.

FakturaPozycje, podatek i sumy

Dziennik zmianDatowane wpisy z tagami

CennikTrzy plany i FAQ

E-mail powitalnyPięcioetapowa seria powitalna

Strona statusuDostępność i historia incydentów

Informacje o wydaniuNowości, poprawki, aktualizacje

Wiki zespołuZagnieżdżone strony z wyszukiwarką

import {
  ActivityIcon,
  BookOpenIcon,
  MailIcon,
  ReceiptIcon,
  RocketIcon,
  ScrollTextIcon,
  TagIcon,
  type LucideIcon,
} from "lucide-react"

import { Card, CardContent } from "@/components/ui/card"
import {
  Carousel,
  CarouselContent,
  CarouselItem,
  CarouselNext,
  CarouselPrevious,
} from "@/components/ui/carousel"

const templates: { name: string; description: string; icon: LucideIcon }[] = [
  {
    name: "Faktura",
    description: "Pozycje, podatek i sumy",
    icon: ReceiptIcon,
  },
  {
    name: "Dziennik zmian",
    description: "Datowane wpisy z tagami",
    icon: ScrollTextIcon,
  },
  {
    name: "Cennik",
    description: "Trzy plany i FAQ",
    icon: TagIcon,
  },
  {
    name: "E-mail powitalny",
    description: "Pięcioetapowa seria powitalna",
    icon: MailIcon,
  },
  {
    name: "Strona statusu",
    description: "Dostępność i historia incydentów",
    icon: ActivityIcon,
  },
  {
    name: "Informacje o wydaniu",
    description: "Nowości, poprawki, aktualizacje",
    icon: RocketIcon,
  },
  {
    name: "Wiki zespołu",
    description: "Zagnieżdżone strony z wyszukiwarką",
    icon: BookOpenIcon,
  },
]

export default function CarouselSizes() {
  return (
    // px-12 leaves room for the previous and next buttons, which sit outside the slides.
    <div className="w-full max-w-lg px-12">
      <Carousel opts={{ align: "start" }} aria-label="Szablony">
        <CarouselContent>
          {templates.map((template, index) => (
            <CarouselItem
              key={template.name}
              className="basis-1/2 sm:basis-1/3"
              aria-label={`${index + 1} z ${templates.length}`}
            >
              <Card size="sm" className="h-full">
                <CardContent className="flex h-full flex-col gap-6">
                  <div
                    className="flex size-9 items-center justify-center rounded-lg border bg-surface text-muted-foreground"
                    aria-hidden="true"
                  >
                    <template.icon className="size-4" />
                  </div>
                  <div className="mt-auto flex flex-col gap-0.5">
                    <span className="text-sm font-medium">{template.name}</span>
                    <span className="text-xs text-muted-foreground">
                      {template.description}
                    </span>
                  </div>
                </CardContent>
              </Card>
            </CarouselItem>
          ))}
        </CarouselContent>
        <CarouselPrevious />
        <CarouselNext />
      </Carousel>
    </div>
  )
}

<Carousel opts={{ align: "start" }}>
  <CarouselContent>
    <CarouselItem className="basis-1/2 sm:basis-1/3">…</CarouselItem>
  </CarouselContent>
</Carousel>

Odstępy

Slajdy rozdziela padding na CarouselItem i dopasowany do niego ujemny margines na CarouselContent (domyślnie 16 px). Żeby zmienić odstęp, zmień oba: -ml-2 na treści i pl-2 na każdym elemencie.

Pionowa

orientation="vertical" przewija w osi Y. Nadaj CarouselContent stałą wysokość; przyciski przeniosą się nad i pod slajdy.