Skip to content

Pro Component — This component requires an Aura UI Pro license.

Basic Usage

Slide 1

Slide 2

Slide 3

<x-aura::carousel>
    <x-aura::carousel.slide>
        <img src="/images/slide-1.jpg" alt="Slide 1" class="w-full rounded-lg" />
    </x-aura::carousel.slide>
    <x-aura::carousel.slide>
        <img src="/images/slide-2.jpg" alt="Slide 2" class="w-full rounded-lg" />
    </x-aura::carousel.slide>
    <x-aura::carousel.slide>
        <img src="/images/slide-3.jpg" alt="Slide 3" class="w-full rounded-lg" />
    </x-aura::carousel.slide>
</x-aura::carousel>

Props

Prop Type Default Description
autoplay bool false Automatically advance slides at the given interval.
interval int 5000 Time in milliseconds between automatic slide transitions.
loop bool true Whether the carousel wraps around from the last slide back to the first.
indicators bool true Show dot indicators below the slides.
arrows bool true Show previous/next navigation arrows.
slidesPerView int 1 Number of slides visible at the same time.

Examples

Promo 1

Promo 2

Promo 3

<x-aura::carousel :autoplay="true" :interval="3000" :loop="true">
    <x-aura::carousel.slide>
        <img src="/images/promo-1.jpg" alt="Promo 1" class="w-full rounded-lg" />
    </x-aura::carousel.slide>
    <x-aura::carousel.slide>
        <img src="/images/promo-2.jpg" alt="Promo 2" class="w-full rounded-lg" />
    </x-aura::carousel.slide>
    <x-aura::carousel.slide>
        <img src="/images/promo-3.jpg" alt="Promo 3" class="w-full rounded-lg" />
    </x-aura::carousel.slide>
</x-aura::carousel>

No Arrows (Indicators Only)

Slide One

Slide Two

Slide Three

<x-aura::carousel :arrows="false">
    <x-aura::carousel.slide>
        <div class="flex items-center justify-center h-48 bg-violet-100 rounded-lg">
            <p class="text-violet-700 text-lg font-semibold">Slide One</p>
        </div>
    </x-aura::carousel.slide>
    <x-aura::carousel.slide>
        <div class="flex items-center justify-center h-48 bg-indigo-100 rounded-lg">
            <p class="text-indigo-700 text-lg font-semibold">Slide Two</p>
        </div>
    </x-aura::carousel.slide>
    <x-aura::carousel.slide>
        <div class="flex items-center justify-center h-48 bg-sky-100 rounded-lg">
            <p class="text-sky-700 text-lg font-semibold">Slide Three</p>
        </div>
    </x-aura::carousel.slide>
</x-aura::carousel>

Accessibility

  • The carousel uses role="region" with aria-roledescription="carousel" for proper semantics.
  • Each slide has role="tabpanel" and is labeled with aria-label="Slide N of M".
  • Navigation arrows include aria-label="Previous slide" and aria-label="Next slide".
  • Indicators use role="tablist" with individual role="tab" buttons.
  • Autoplay pauses automatically when the carousel receives focus or hover.
  • Keyboard navigation: Arrow Left/Right to change slides, Space/Enter to activate indicators.