Skip to content

No results for

↑ ↓ navigate ↵ open Esc close 
php artisan aura:add carousel

Copies the component source into resources/views/components/aura/. Run php artisan aura:init first if you haven't already. See the CLI guide for all options.

composer require bluestarsystem/aura-ui
php artisan aura:install

Full installation instructions in the Installation guide.

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>
        <div class="flex items-center justify-center h-48 bg-gradient-to-r from-violet-500 to-indigo-500 rounded-lg">
            <p class="text-white text-xl font-bold">Slide 1</p>
        </div>
    </x-aura::carousel.slide>
    <x-aura::carousel.slide>
        <div class="flex items-center justify-center h-48 bg-gradient-to-r from-cyan-500 to-blue-500 rounded-lg">
            <p class="text-white text-xl font-bold">Slide 2</p>
        </div>
    </x-aura::carousel.slide>
    <x-aura::carousel.slide>
        <div class="flex items-center justify-center h-48 bg-gradient-to-r from-emerald-500 to-teal-500 rounded-lg">
            <p class="text-white text-xl font-bold">Slide 3</p>
        </div>
    </x-aura::carousel.slide>
</x-aura::carousel>
<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>
        <div class="flex items-center justify-center h-48 bg-gradient-to-r from-amber-500 to-orange-500 rounded-lg">
            <p class="text-white text-xl font-bold">Promo 1</p>
        </div>
    </x-aura::carousel.slide>
    <x-aura::carousel.slide>
        <div class="flex items-center justify-center h-48 bg-gradient-to-r from-rose-500 to-pink-500 rounded-lg">
            <p class="text-white text-xl font-bold">Promo 2</p>
        </div>
    </x-aura::carousel.slide>
    <x-aura::carousel.slide>
        <div class="flex items-center justify-center h-48 bg-gradient-to-r from-fuchsia-500 to-purple-500 rounded-lg">
            <p class="text-white text-xl font-bold">Promo 3</p>
        </div>
    </x-aura::carousel.slide>
</x-aura::carousel>
<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>
<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.