M.AIM.AISoloLabsUI Sözlüğü · İçerik ve yerleşim

← UI Sözlüğü

Kaydırmalı galeri carousel

bilinen diğer adları carousel · slider (karışır) · slayt gösterisi · kaydırmalı şerit

Böyle diyorsan: "kayan resimler" · "oklarla dönen görsel alanı" → bunun adı kaydırmalı galeri.

Ok ya da kaydırmayla dönen görsel/içerik şeridi.

Kaydırmalı galeri, sınırlı bir alanda birden çok içeriği sırayla gösterir. Arayüz dünyasının en çok eleştirilen parçalarından biridir ve eleştirinin sebebi basittir: ilk slayttan sonrakiler neredeyse hiç görülmez. Yani 'hepsini koyalım' diye kurulan galeri, pratikte 'ilkinden başkası görülmesin' sonucunu üretir. Buna rağmen doğru kullanıldığı yerler vardır — ürün fotoğrafları, benzer öğelerin gezilmesi, yatay bir koleksiyon. Ayrımı yapan şey ŞU: kullanıcı gezmeyi kendisi mi istiyor, yoksa sen mi ona sırayla gösteriyorsun? Birincisi galeridir ve iyidir; ikincisi otomatik dönen bir slayt gösterisidir ve neredeyse her zaman kötüdür. Otomatik dönme kullanılacaksa duraklatma zorunludur; kullanıcı okurken altından kayan içerik erişilebilirlik ihlalidir.

Kapsam: Bu madde yatay gezilen içerik şeridini kapsar. Sayfanın sabit üst tanıtımı Vitrin, sayfalar arası gezinme Sayfalama maddesindedir.

CANLI ÖRNEK — kullan, numaralara tıkla, parçayı tanı
‹
görsel 1/3
görsel 2/3
görsel 3/3
›
● ○ ○
Aşama aşama gezmek için okları ya da numaraları kullan.
YAPIM PROMPTU — AJANINA YAPIŞTIR
Müşteri yorumları carousel'i kur: yatay şerit + ‹ › oklar + tıklanabilir nokta göstergesi; 5 sn'de otomatik dönsün ama hover'da, odakta ve prefers-reduced-motion'da dursun; dokunmatikte parmakla kaydırılsın (scroll-snap); ilk slayttaki görsel lazy-load OLMASIN (LCP); ekran okuyucu için aria-roledescription=carousel + duraklat düğmesi.
DEBUG PROMPTU — HUYSUZLANIRSA

Yapıştır, sonuna belirtiyi ekle — ajana klasik hata kalıplarını önden verir.

Carousel'im huysuz; klasikleri sırayla ele: (1) otomatik dönüş hover'da durmuyor — kullanıcı yorumu okurken slayt kaçıyor; (2) dokunmatikte kaydırma yok, minik oklara mahkûm; (3) sonsuz döngüde son→ilk geçişi ters yönde ışınlanıyor; (4) ana görsel lazy yüklendiği için LCP çöküyor; (5) tek slayt varken bile oklar/noktalar duruyor; (6) duraklat düğmesi yok (erişilebilirlik). Belirti şu:
ANATOMİ — HER PARÇANIN ADI VAR (tıkla ya da üzerine gel → örnekte yansın)
  • 1Şerit (track)yatay kayar düzlem

    Slaytların dizildiği tek satır; transform ile kayar, scroll-snap ile de kurulabilir.

  • 2Ok kontrolleri‹ ›

    Adım adım gezme; İLK/SON slaytta durum belli olmalı (pasif ya da başa dönme bilinçli).

  • 3Nokta göstergesi● ○ ○

    Kaçıncı slayttayım + tıklayınca atlama; 10+ slaytta sayaca (3/12) dönüşür.

  • 4Otomatik oynatmapause on hover/focus

    Kendiliğinden dönme; üzerine gelince, odaklanınca ve reduce-motion'da DURMALIDIR + görünür duraklat düğmesi.

DURUMLAR — HANGİ HÂLDE NE OLUR
  • ADuruyormanuel gezinme

    Kullanıcı kendi geziyor. Tercih edilen hâl budur; oklar ve noktalar nerede olunduğunu ve kaç öğe kaldığını söyler.

  • BOtomatik dönüyorduraklatma ZORUNLU

    Kendiliğinden ilerliyor. Duraklat düğmesi olmadan bu hâl WCAG ihlalidir (2.2.2); hover ve odakta da durmalıdır.

  • CDuraklatıldıhover / focus / buton

    Kullanıcı okumaya başladı. Fare üstüne gelince, klavye odağı girince ve düğmeye basınca durmalı — üçü de beklenir.

  • Dİlk / sondöngü mü sınır mı

    Uçlarda ne olacağı bir karardır: döngü sonsuz gezinme verir ama nerede olduğunu belirsizleştirir; sınır ise bittiğini söyler.

  • EHareket kapalıprefers-reduced-motion

    Kullanıcı hareketi azalt dedi. Otomatik dönme tamamen kapanmalı; galeri elle gezilebilir bir şeride dönüşmeli.

KODDAKİ ADLARI
CSSscroll-snap-type + behavior:smoothdokunmatik dostu kaydırma
ARIAaria-roledescription=carouselokuyucu bağlamı
UXhover/focus/reduce-motion'da durdursaygılı otomasyon
ERİŞİLEBİLİRLİK & SIK HATA
  • Otomatik dönüyorsa duraklat düğmesi ZORUNLUDUR (WCAG 2.2.2). Bu bir tercih değil şarttır: okurken altından kayan içerik, disleksi ve dikkat güçlüğü olan kullanıcılar için okumayı imkânsız kılar.
  • Oklar ve noktalar gerçek düğme olsun ve erişilebilir ad taşısın ('Sonraki ürün'); süs noktalar klavyeyle gezilemiyorsa galeri yalnız fareyle kullanılabilir demektir.
  • Görünmeyen slaytlar klavye sırasından çıkarılmalı (inert ya da tabindex yönetimi); aksi hâlde Tab tuşu ekranda olmayan bağlantılara gider.
  • Slayt değişimini ölçülü duyur: her geçişte konuşan canlı bölge kullanıcıyı boğar; 'aria-roledescription' ile bağlam vermek ve geçişi kibar duyurmak yeterlidir.
  • Kaydırmalı yapıda scroll-snap kullanıyorsan klavyeyle de gezilebildiğinden emin ol; dokunmatik için kurulan çözüm klavyeyi dışarıda bırakmasın.
SIK KARIŞTIRILANLAR

Vitrinden farkı. Vitrin SABİTTİR ve tek mesajı garanti eder; galeri döner ve mesajı kullanıcının o an gördüğü slayta bırakır. Dönen bir vitrin, ilk ekranın kime ait olduğunu rastlantıya çevirir. Karar kuralı: bir mesajın mutlaka görülmesi gerekiyorsa o mesaj galeride değil vitrinde durmalıdır.

Vitrin sayfasına git →

Sekmelerden farkı. Galeride öğeler AYNI TÜRDENDİR ve sırayla gezilir (ürün fotoğrafları); sekmelerde içerikler FARKLI konulardır ve kullanıcı hangisini istediğini seçer. Galeri 'devam et' der, sekme 'seç' der. Farklı konuları galeriye koymak, kullanıcının aradığını bulmasını şansa bırakır.

Sekmeler sayfasına git →

KAYNAKLAR
İLGİLİ PARÇALAR

Vitrin heroSekmeler tabsKart cardSayfalama pagination

AYNI AİLEDE · İÇERIK VE YERLEŞIM