Carousel

Centered dots (pagination)

Below the carousel are centered dots: the active slide is filled, the others are just outlined. Click a dot to go to that slide. The arrows are textual (‹ ›), without icons. Inside each slide is a complete Card with a title, description and content; Carousel.Slide has border-0 bg-transparent p-0 so the two frames don't clash.

First card

Brief subtitle

Slide content.

Second card

Another slide

Same layout as the first slide.

tsx

import { Card } from "~/components/ui/base/card";
import { Carousel } from "~/components/ui/base/carousel";

<Carousel.Root class="max-w-xl" rewind>
  <Carousel.Title>Carousel</Carousel.Title>
  <div class="relative px-11">
    <Carousel.Scroller>
      <Carousel.Slide class="border-0 bg-transparent p-0 shadow-none">
        <Card.Root class="w-full">
          <Card.Header>
            <Card.Title>First card</Card.Title>
            <Card.Description>Brief subtitle</Card.Description>
          </Card.Header>
          <Card.Content>
            <p class="text-callout text-secondary-label">Slide content.</p>
          </Card.Content>
        </Card.Root>
      </Carousel.Slide>
      <Carousel.Slide class="border-0 bg-transparent p-0 shadow-none">
        <Card.Root class="w-full">
          <Card.Header>
            <Card.Title>Second card</Card.Title>
            <Card.Description>Another slide</Card.Description>
          </Card.Header>
          <Card.Content>
            <p class="text-callout text-secondary-label">Same layout as the first slide.</p>
          </Card.Content>
        </Card.Root>
      </Carousel.Slide>
    </Carousel.Scroller>
    <Carousel.Previous class="absolute left-0 top-1/2 -translate-y-1/2">‹</Carousel.Previous>
    <Carousel.Next class="absolute right-0 top-1/2 -translate-y-1/2">›</Carousel.Next>
  </div>
  <Carousel.Pagination>
    <Carousel.Bullet />
    <Carousel.Bullet />
    <Carousel.Bullet />
  </Carousel.Pagination>
</Carousel.Root>

Autoplay and player

bind:autoplay and Carousel.Player — for users with prefers-reduced-motion the player button is hidden (headless CSS). The slides are again cards with content.

Slideshow

Autoplay

First card content.

Second card

Another slide in the loop

Same layout as the first slide; autoplay continues at the interval.

tsx

import { component$, useSignal } from "@builder.io/qwik";
import { Card } from "~/components/ui/base/card";
import { Carousel } from "~/components/ui/base/carousel";

export default component$(() => {
  const autoplay = useSignal(false);
  return (
    <Carousel.Root
      class="max-w-xl"
      rewind
      bind:autoplay={autoplay}
      autoPlayIntervalMs={3500}
    >
      <Carousel.Title>Autoplay</Carousel.Title>
      <Carousel.Scroller>
        <Carousel.Slide class="border-0 bg-transparent p-0 shadow-none">
          <Card.Root class="w-full">
            <Card.Header>
              <Card.Title>Slideshow</Card.Title>
              <Card.Description>Autoplay</Card.Description>
            </Card.Header>
            <Card.Content>
              <p class="text-callout text-secondary-label">First card content.</p>
            </Card.Content>
          </Card.Root>
        </Carousel.Slide>
        <Carousel.Slide class="border-0 bg-transparent p-0 shadow-none">
          <Card.Root class="w-full">
            <Card.Header>
              <Card.Title>Second card</Card.Title>
              <Card.Description>Another slide in the loop</Card.Description>
            </Card.Header>
            <Card.Content>
              <p class="text-callout text-secondary-label">Same layout as the first slide; autoplay continues at the interval.</p>
            </Card.Content>
          </Card.Root>
        </Carousel.Slide>
      </Carousel.Scroller>
      <div class="mt-3 flex flex-wrap items-center justify-center gap-3">
        <Carousel.Player />
      </div>
    </Carousel.Root>
  );
});

Stepper (numbered steps)

Carousel.Stepper and Carousel.Step — cards in slides, jump directly by number.

Step 1

Template selection

Choose the base layout; the next steps will complete it.

Step 2

Content setup

Edit the texts and images; the preview updates instantly.

Step 3

Publishing

Review the preview and confirm publishing.

tsx

import { Card } from "~/components/ui/base/card";
import { Carousel } from "~/components/ui/base/carousel";

<Carousel.Root class="max-w-md" rewind>
  <Carousel.Title>Steps</Carousel.Title>
  <Carousel.Scroller>
    <Carousel.Slide class="border-0 bg-transparent p-0 shadow-none">
      <Card.Root class="w-full">
        <Card.Header>
          <Card.Title>Step 1</Card.Title>
          <Card.Description>Template selection</Card.Description>
        </Card.Header>
        <Card.Content>
          <p class="text-callout text-secondary-label">Choose the base layout; the next steps will complete it.</p>
        </Card.Content>
      </Card.Root>
    </Carousel.Slide>
    <Carousel.Slide class="border-0 bg-transparent p-0 shadow-none">
      <Card.Root class="w-full">
        <Card.Header>
          <Card.Title>Step 2</Card.Title>
          <Card.Description>Content setup</Card.Description>
        </Card.Header>
        <Card.Content>
          <p class="text-callout text-secondary-label">Edit the texts and images; the preview updates instantly.</p>
        </Card.Content>
      </Card.Root>
    </Carousel.Slide>
    <Carousel.Slide class="border-0 bg-transparent p-0 shadow-none">
      <Card.Root class="w-full">
        <Card.Header>
          <Card.Title>Step 3</Card.Title>
          <Card.Description>Publishing</Card.Description>
        </Card.Header>
        <Card.Content>
          <p class="text-callout text-secondary-label">Review the preview and confirm publishing.</p>
        </Card.Content>
      </Card.Root>
    </Carousel.Slide>
  </Carousel.Scroller>
  <Carousel.Stepper>
    <Carousel.Step>1</Carousel.Step>
    <Carousel.Step>2</Carousel.Step>
    <Carousel.Step>3</Carousel.Step>
  </Carousel.Stepper>
</Carousel.Root>

Metadata

Source: meta.generated.json (see npm run generate)

File base/carousel/meta.generated.json not found or path not allowed.