Carousel
A slideshow you move through with arrows, dots or the keyboard. Used for announcements and image galleries; it can advance on its own if you want.
Basic usage
Each direct child is a full-width slide. You move between slides with the arrows on the sides, the dots at the bottom, or the left and right arrow keys while focus is inside the carousel; after the last slide it wraps back to the first. label is the carousel's name for screen readers.
<acun:carousel label="Announcements">
<div class="flex h-56 flex-col justify-end bg-gradient-to-br from-brand-600 to-brand-800 p-8 text-white">
<p class="text-xs font-semibold tracking-wider uppercase opacity-80">October sale</p>
<p class="mt-1 text-xl font-semibold">Starts October 7</p>
</div>
<div class="flex h-56 flex-col justify-end bg-gradient-to-br from-emerald-600 to-emerald-800 p-8 text-white">
<p class="text-xs font-semibold tracking-wider uppercase opacity-80">Mobile app</p>
<p class="mt-1 text-xl font-semibold">Version 2.4 is out</p>
</div>
<div class="flex h-56 flex-col justify-end bg-gradient-to-br from-amber-500 to-amber-700 p-8 text-white">
<p class="text-xs font-semibold tracking-wider uppercase opacity-80">Reminder</p>
<p class="mt-1 text-xl font-semibold">September reports due by October 3</p>
</div>
</acun:carousel>| Prop | Values |
|---|---|
label | Screen reader name; default "Images" |
Autoplay
interval is the time between slides in milliseconds; without it, the carousel does not advance on its own. It pauses while the mouse is over it and resumes when the mouse leaves. If reduced motion is turned on in the operating system, autoplay does not run at all; the arrows and dots can still be used.
<acun:carousel :interval="4000" label="Store news">
<div class="flex h-48 flex-col justify-end bg-gradient-to-br from-sky-600 to-sky-800 p-8 text-white">
<p class="text-xs font-semibold tracking-wider uppercase opacity-80">Customer satisfaction</p>
<p class="mt-1 text-xl font-semibold">Reached 96% in September</p>
</div>
<div class="flex h-48 flex-col justify-end bg-gradient-to-br from-brand-600 to-brand-800 p-8 text-white">
<p class="text-xs font-semibold tracking-wider uppercase opacity-80">Logistics</p>
<p class="mt-1 text-xl font-semibold">New warehouse opened in Ankara</p>
</div>
</acun:carousel>| Prop | Values |
|---|---|
interval | Milliseconds, e.g. 4000; off when not given |
With images
For image slides, fix the height and use object-cover; photos with different aspect ratios are cropped to the same size. Give every image a meaningful alt text.
<acun:carousel :interval="5000" label="Product photos">
@foreach ($photos as $photo)
<img src="{{ $photo->url }}" alt="{{ $photo->description }}" class="h-72 w-full object-cover">
@endforeach
</acun:carousel>Labeled slides
If you write each slide with acun:carousel.item, the slide gets role="group" and screen readers read its label (or, without one, its position, such as "2 / 3"); slides that are not visible cannot be interacted with.
<acun:carousel label="Product images">
<acun:carousel.item label="Front view">
<div class="flex h-48 items-end bg-gradient-to-br from-brand-600 to-brand-800 p-6 text-white">
<p class="text-lg font-semibold">Wireless headphones · Front view</p>
</div>
</acun:carousel.item>
<acun:carousel.item label="In the box">
<div class="flex h-48 items-end bg-gradient-to-br from-emerald-500 to-emerald-700 p-6 text-white">
<p class="text-lg font-semibold">Wireless headphones · In the box</p>
</div>
</acun:carousel.item>
</acun:carousel>Props and slots
The values the component accepts.
| Prop | Default | Description |
|---|---|---|
interval | null | Autoplay interval (ms); null = off |
label | Images | Screen reader label |
carousel.item: label | null | The slide's screen reader name; without it, its position is read |