Carousel

Stable

Responsive carousel component for displaying images and content in a scrollable container following DaisyUI design system.

API Reference

c-carousel

Attribute	Description	Type	Default
`snap`	Controls snap alignment of carousel items	string	`"start"`
`direction`	Scroll direction of the carousel	string	`"horizontal"`
`with_nav`	Enables Alpine.js-powered previous/next navigation controls	boolean	`False`

c-carousel.item

Attribute	Description	Type	Default
`id`	Unique identifier used for anchor-based navigation	string	`""`

c-carousel.indicator

Attribute	Description	Type	Default
`id`	ID of the carousel item this indicator links to via anchor (`href="#id"`)	string	`""`

Navigation Note: when :with_nav=True is set, Alpine.js-powered previous/next buttons are embedded and positioned absolutely over the carousel. Buttons are automatically disabled at the scroll boundaries.

snap

start center end

direction

horizontal vertical

Images: always provide descriptive alt text for images inside carousel items. Use alt="" only for purely decorative images.

Indicators: indicator buttons should have visible labels or aria-label attributes (e.g. "Go to slide 2") so screen reader users can understand their purpose.

Motion: auto-playing carousels should respect prefers-reduced-motion. Pause or disable animation when the user prefers reduced motion.

Examples

Usage


<c-carousel class="w-full">
  <c-carousel.item id="item1" class="w-full">
    <img src="image.jpg" class="w-full" alt="Slide 1" />
  </c-carousel.item>
</c-carousel>

Basic Carousel with Indicator

1 2 3

<c-carousel class="w-full">
  <c-carousel.item id="item1" class="w-full">
    <img src="image1.jpg" class="w-full" alt="Slide 1" />
  </c-carousel.item>
  <c-carousel.item id="item2" class="w-full">
    <img src="image2.jpg" class="w-full" alt="Slide 2" />
  </c-carousel.item>
  <c-carousel.item id="item3" class="w-full">
    <img src="image3.jpg" class="w-full" alt="Slide 3" />
  </c-carousel.item>
</c-carousel>
<div class="flex items-center justify-center gap-2">
  <c-carousel.indicator id="item1">1</c-carousel.indicator>
  <c-carousel.indicator id="item2">2</c-carousel.indicator>
  <c-carousel.indicator id="item3">3</c-carousel.indicator>
</div>

Multiple Cards with Navigation

Card 1

Card 2

Card 3

Card 4

Card 5

<c-carousel :with_nav=True class="w-full h-64">
  <c-carousel.item id="card1" class="w-full md:w-1/2 lg:w-1/3 h-full pl-4">
    <c-card bordered shadow="md" class="w-full h-full">
      <c-card.body>
        <c-card.title>Card 1</c-card.title>
        <c-card.content>
          <div class="flex flex-1 items-center justify-center">
            <span class="text-6xl font-semibold text-primary">1</span>
          </div>
        </c-card.content>
      </c-card.body>
    </c-card>
  </c-carousel.item>
  <!-- More items... -->
</c-carousel>