Carousel
Slaytlar arasında oklarla, noktalarla ya da klavyeyle geçiş yapılan gösterim. Duyurular ve görsel galerileri için kullanılır; istenirse kendiliğinden ilerler.
Temel kullanım
Her doğrudan alt öğe tam genişlikte bir slayttır. Kenardaki oklar, alttaki noktalar ya da odak gösterimin içindeyken sol ve sağ ok tuşlarıyla geçilir; son slayttan sonra başa dönülür. label gösterimin ekran okuyucudaki adıdır.
<acun:carousel label="Duyurular">
<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">Ekim kampanyası</p>
<p class="mt-1 text-xl font-semibold">7 Ekim'de başlıyor</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">Mobil uygulama</p>
<p class="mt-1 text-xl font-semibold">Sürüm 2.4 yayında</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">Hatırlatma</p>
<p class="mt-1 text-xl font-semibold">Eylül raporları 3 Ekim'e kadar</p>
</div>
</acun:carousel>| Prop | Değerler |
|---|---|
label | Ekran okuyucu adı; varsayılan "Görseller" |
Otomatik geçiş
interval milisaniye cinsinden geçiş süresidir; verilmezse gösterim kendiliğinden ilerlemez. Fare üzerindeyken durur, fare ayrılınca devam eder. İşletim sisteminde hareket azaltma açıksa otomatik geçiş hiç çalışmaz; oklar ve noktalar yine kullanılabilir.
<acun:carousel :interval="4000" label="Mağaza haberleri">
<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">Müşteri memnuniyeti</p>
<p class="mt-1 text-xl font-semibold">Eylül'de %96'ya ulaştı</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">Lojistik</p>
<p class="mt-1 text-xl font-semibold">Ankara'da yeni depo açıldı</p>
</div>
</acun:carousel>| Prop | Değerler |
|---|---|
interval | Milisaniye, ör. 4000; verilmezse kapalı |
Görsellerle
Görsel slaytlarda yüksekliği sabitleyip object-cover kullanın; farklı oranlardaki fotoğraflar kırpılarak aynı boyda görünür. Her görsele anlamlı bir alt metni verin.
<acun:carousel :interval="5000" label="Ürün fotoğrafları">
@foreach ($fotograflar as $foto)
<img src="{{ $foto->url }}" alt="{{ $foto->aciklama }}" class="h-72 w-full object-cover">
@endforeach
</acun:carousel>Etiketli slaytlar
Her slaytı acun:carousel.item ile yazarsanız slayt role="group" alır ve ekran okuyucu label değerini (verilmezse "2 / 3" gibi sırasını) okur; görünmeyen slaytlar etkileşime kapanır.
<acun:carousel label="Ürün görselleri">
<acun:carousel.item label="Ön görünüm">
<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">Kablosuz kulaklık · Ön görünüm</p>
</div>
</acun:carousel.item>
<acun:carousel.item label="Kutu içeriği">
<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">Kablosuz kulaklık · Kutu içeriği</p>
</div>
</acun:carousel.item>
</acun:carousel>Prop'lar ve slot'lar
Bileşenin kabul ettiği değerler.
| Prop | Varsayılan | Açıklama |
|---|---|---|
interval | null | Otomatik geçiş süresi (ms); null = kapalı |
label | Görseller | Ekran okuyucu etiketi |
carousel.item: label | null | Slaytın ekran okuyucu adı; verilmezse sırası okunur |