Phara UI v2.x
Login

Carousel

A sliding carousel with prev/next arrows, pagination dots, autoplay, touch swipe, and keyboard navigation. Works with any content — images, cards, testimonials.

Images

Wrap each slide in x-ui::carousel-item and set an aspect-ratio or height so the carousel has a defined size. Use ← / → to navigate with the keyboard.

Slide 1

Design systems that scale

Build consistent interfaces faster with a shared component library.

Slide 2

Dark mode out of the box

Every component ships with full dark mode support via Tailwind.

Slide 3

Livewire ready

Bind any component to your Livewire properties with wire:model.

Slide 4

Accessible by default

ARIA roles, keyboard navigation and focus management built in.

Slide of
Blade 
<x-ui::carousel aspect-ratio="16/9">
    <x-ui::carousel-item>
        <img src="/images/slide-1.jpg" class="w-full h-full object-cover" alt="Slide 1" />
    </x-ui::carousel-item>
    <x-ui::carousel-item>
        <img src="/images/slide-2.jpg" class="w-full h-full object-cover" alt="Slide 2" />
    </x-ui::carousel-item>
    <x-ui::carousel-item>
        <img src="/images/slide-3.jpg" class="w-full h-full object-cover" alt="Slide 3" />
    </x-ui::carousel-item>
</x-ui::carousel>
Content Cards

Any content works inside a slide — testimonials, feature highlights, pricing tiers. The carousel height adapts to the tallest slide.

"The component library saved us weeks of work. Every piece is polished and adapts perfectly to our brand."

AJ

Alice Johnson

Product Designer at Acme

"Wire:model support means we never fight the framework. Building complex UIs now feels effortless."

BM

Bob Martinez

Lead Engineer at Nova

"Dark mode, accessibility, responsive — it just works. We shipped our dashboard in record time."

CW

Carol White

CTO at Pinnacle

Slide of
Blade 
<x-ui::carousel :show-arrows="false">
    <x-ui::carousel-item class="px-2">
        <div class="rounded-xl border border-zinc-200 dark:border-zinc-700 p-6">
            <p class="text-zinc-700 dark:text-zinc-200">"Your quote here…"</p>
            <div class="mt-4 font-semibold text-sm">Name — Role</div>
        </div>
    </x-ui::carousel-item>
    ...
</x-ui::carousel>
Autoplay

Add autoplay to advance slides automatically. The timer pauses while the mouse is over the carousel and resets after manual navigation.

Design systems that scale

Dark mode out of the box

Livewire ready

Accessible by default

Slide of
Blade 
{{-- Autoplay with 4s interval, pauses on hover --}}
<x-ui::carousel autoplay :interval="4000" aspect-ratio="16/9">
    <x-ui::carousel-item>...</x-ui::carousel-item>
    <x-ui::carousel-item>...</x-ui::carousel-item>
</x-ui::carousel>
No Loop

Set :loop="false" to stop at the first and last slide. The arrows become disabled (not hidden) when navigation is unavailable.

Design systems that scale

Dark mode out of the box

Livewire ready

Slide of
Blade 
{{-- Arrows disable (not hide) at the start and end --}}
<x-ui::carousel :loop="false" aspect-ratio="16/9">
    <x-ui::carousel-item>...</x-ui::carousel-item>
    <x-ui::carousel-item>...</x-ui::carousel-item>
    <x-ui::carousel-item>...</x-ui::carousel-item>
</x-ui::carousel>
Minimal

Toggle arrows and dots independently with :show-arrows and :show-dots.

Dots only

Slide of

Arrows only

Slide of

No controls

Slide of
Blade 
{{-- Dots only — no arrows --}}
<x-ui::carousel :show-arrows="false" aspect-ratio="16/9">
    ...
</x-ui::carousel>

{{-- Arrows only — no dots --}}
<x-ui::carousel :show-dots="false" aspect-ratio="16/9">
    ...
</x-ui::carousel>

{{-- No controls at all --}}
<x-ui::carousel :show-arrows="false" :show-dots="false" aspect-ratio="16/9">
    ...
</x-ui::carousel>
Aspect Ratio & Height

Use aspect-ratio for responsive proportional sizing, or height for a fixed pixel height. Omitting both lets the slide content define the carousel height.

aspect-ratio="21/9" — Cinematic

Slide of

height="180px" — Fixed

Slide of
Blade 
{{-- Fixed aspect ratio --}}
<x-ui::carousel aspect-ratio="21/9">...</x-ui::carousel>
<x-ui::carousel aspect-ratio="4/3">...</x-ui::carousel>

{{-- Fixed pixel height --}}
<x-ui::carousel height="320px">...</x-ui::carousel>