Bir image carousel (slider) bileşenini nasıl tasarlarsınız?

İyi bir carousel; esnek bir bileşen API'si, akıcı geçişler, lazy loading ve tam klavye/ekran okuyucu desteği ister.

Bileşen API'si

<Carousel
  images={[{ src, alt, width, height }]}
  initialIndex={0}
  loop
  autoPlayMs={5000}
  onChange={(index) => {}}
/>

Uygulama seçenekleri

• CSS scroll-snap: overflow-x: auto; scroll-snap-type: x mandatory; ile dokunmatik kaydırma tarayıcıdan bedava gelir; JavaScript sadece butonlar ve indeks takibi için kullanılır (IntersectionObserver ile aktif slayt bulunur).
• transform: translateX: Tam kontrol ve sonsuz döngü (ilk/son slaytın klonlanması) için. transform animasyonu GPU'da çalışır, layout tetiklemez.

Performans

• Sadece aktif ve komşu görseller yüklenir (loading="lazy", sonraki görseli önceden yükleme).
• srcset/sizes ile ekrana uygun boyut, aspect-ratio ile CLS önleme.

Erişilebilirlik

• Kapsayıcıda aria-roledescription="carousel", her slaytta role="group" ve aria-label="3 / 8".
• Önceki/sonraki butonları gerçek <button> olmalı, ok tuşlarıyla gezinme.
• Otomatik oynatma: hover/focus'ta durmalı, durdurma butonu olmalı ve prefers-reduced-motion açıksa kapatılmalı.

Kenar durumları

Tek görsel, görsel yüklenemezse fallback, RTL dillerde yönün tersine dönmesi, pencere boyutu değişince yeniden hesaplama.