JavaScript Kullanmadan CSS Carousel'ler: Eksiksiz Kılavuz

Ana Sayfa » Python » JavaScript Kullanmadan CSS Carousel'ler: Eksiksiz Kılavuz

Tek bir satır JavaScript kullanmadan slayt gösterisi oluşturmak artık bilim kurgu değil.Modern CSS, dokunmatik ekranlara uyumlu, akıcı slayt gösterileri oluşturmak için ihtiyacınız olan her şeyi sunar. CSS touch-action özelliği Tarayıcıda yerelmiş gibi hissettiren bileşenler. Kaydırma yakalama özelliğinden, otomatik olarak gezinme kontrolleri oluşturan deneysel sözde öğelere kadar, paket boyutunuzu hafif tutarken ve hayatınızı kolaylaştırırken tam özellikli bileşenler sunabilirsiniz.

Eğer daha önce ağır JavaScript carousel kütüphaneleriyle, içerik yükleme sorunlarıyla veya erişilebilirlik tuhaflıklarıyla boğuştuysanız, yalnızca CSS ile çalışan carousel'ler ferahlatıcı bir nefes olacaktır.En yeni özelliklerle (CSS Overflow Level 5 gibi) ve iyi bilinen özelliklerle, scroll-snap-typeArtık, hızlı, klavyeyle erişilebilir ve JavaScript devre dışı bırakıldığında bile çalışmaya devam eden, üretime hazır slayt gösterileri sunmak gerçekçi hale geldi.

Modern CSS'in JavaScript slayt gösterilerini neden isteğe bağlı hale getirdiği

Yıllarca, "nasıl bir slayt gösterisi (carousel) oluştururum?" sorusuna verilen varsayılan cevap "bir JavaScript kütüphanesi edinin" idi.Swiper, Slick, Glide, Bootstrap'in carousel'i ve diğer birçok araç, olay dinleyicilerini, zamanlayıcıları, yeniden boyutlandırma gözlemcilerini ve ARIA rollerini sizin için bir araya getirerek sorunu çözdü; ancak aynı zamanda paketinizin boyutuna fazladan kilobayt eklediler ve bakımını yapmanız gereken başka bir bağımlılık daha getirdiler.

Günümüzde CSS, en yaygın slayt gösterisi kullanım durumlarına sessizce ayak uydurdu.Birkaç özellik kullanarak, normal bir yatay kaydırma çubuğunu, fare tekerleği, dokunmatik yüzey, klavye ok tuşları ve dokunmatik kaydırmalarla çalışan, sayfalandırılmış ve kaydırmaya kilitlenen bir deneyime dönüştürebilirsiniz. Hiçbir dinleyiciye, JS mantığından kaynaklanan yeniden akışlara ve çerçevelerdeki hidrasyonla ilgili yarış koşullarına gerek yok.

Temel fikir basit: slayt gösterinizi kaydırılabilir bir bölge olarak ele alıyorsunuz.CSS, slaytlar arasında ışınlanan sihirli bir bileşen gibi değil. Bunun yerine, kaydırma işlemine yakalama noktaları, yumuşak geçişler ve en yeni özelliklerde, tarayıcının DOM'a gerçek etkileşimli öğeler olarak eklediği yerleşik düğmeler ve işaretleyicilerle "yardımcı olur".

Bu değişim, performans ve dayanıklılık açısından büyük sonuçlar doğuracaktır.CSS ile oluşturulmuş bir slayt gösterisi, JavaScript engellendiğinde, yüklenmediğinde veya kullanıcı tarafından devre dışı bırakıldığında bile mükemmel şekilde çalışmaya devam eder. Tarayıcının kendi kaydırma motoru, işin büyük kısmını üstlenir; bu motor, her büyük tarayıcıda son derece optimize edilmiş ve düşük güç tüketimli cihazlar ve erişilebilirlik araçları için ayarlanmıştır.

Bunun da ötesinde, CSS'nin şu özellikleri de var: :has()Izgara düzeni ve kaydırma tabanlı animasyonlar aynı kaydırma alanına bağlanır.Bu sayede, üç farklı sistemi (kodunuz, kütüphanenin mantığı ve tarayıcı kaydırma çubuğu) kırılgan şekillerde birleştirmeden, gelişmiş slayt göstergeleri, içerik açığa çıkarma veya paralaks efektleri oluşturabilirsiniz.

Temel yapı taşı: Yalnızca CSS ile oluşturulan slayt gösterileri için Kaydırma Yakalama özelliği.

CSS ile oluşturulmuş bir slayt gösterisinin kalbinde Scroll Snap modülü yer alır.Bu özellik, kullanıcının kaydırmayı durdurmasının ardından kaydırma konumunun kilitleneceği "manyetik" noktaları tanımlamanıza olanak tanır. Görünüm, iki slayt arasında yarı yolda kalmak yerine en yakın slayta kilitlenir ve klasik kaydırıcı hissini verir.

HTML yapısı minimum düzeyde olabilir.Yatay olarak kaydırılabilen bir kapsayıcı ve bunun içinde bir dizi kaydırma öğesi. İşaretlemeniz tutarlıysa her resme veya karta kendi sınıfını vermenize bile gerek yok; ancak öğelerinizi adlandırmak genellikle stil ve erişilebilirlik açısından yardımcı olur:

Temel bir resim slayt gösterisi için örnek yapı bir tür ambalaj olarak düşünülebilir. <ul class="carousel"> çoklu ile <li> Her biri bir resim veya kart içeren öğeler. Sihir CSS'de saklı:

Konteyneri, kaydırma özelliği etkinleştirilmiş yatay bir esnek düzen olarak tanımlarsınız. ve x ekseni boyunca hizalanması gerektiğini belirtin:

.carousel { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; }

Her bir sürgü daha sonra bir yakalama pozisyonunu ortaya çıkarır.Genellikle görüntüleme alanının merkezinde veya başlangıcında yer alır ve sabit bir temel oluşturarak her görünümde bir veya birkaçının görünmesini sağlar:

.carousel-item { flex: 0 0 100%; scroll-snap-align: center; }

Bu model size zaten şaşırtıcı derecede eksiksiz bir atlıkarınca sunuyor.Kullanıcılar mobil cihazlarda kaydırma hareketi yapabilir, fare veya dokunmatik yüzey ile kaydırma yapabilir ve görüntü alanı her zaman en yakın slaytta sabitlenir. Kaydırma olaylarını izleyen veya konumları manuel olarak ayarlayan herhangi bir JavaScript kodu yoktur.

Çoklu ürün içeren karuseller (ürün şeritleri gibi) oluşturmak için yalnızca flex basis'i değiştirmeniz yeterlidir.Örneğin, aşağıdaki gibi bir şey kullanarak görünüm başına üç öğeyi biraz aralıklı olarak gösterebilirsiniz. flex: 0 0 calc(33.333% - 1rem) Artı yan kenar boşlukları. Scroll Snap, her "sayfanın" tek bir tam genişlikte slayt mı yoksa daha küçük kartlardan oluşan bir grup mu olduğuyla ilgilenmez.

Gibi özellikler object-fit: cover RAW görüntülerle çalışırken faydalıdırlar.Bu sayede, slayt alanının tamamını uzatmadan doldurmaları sağlanır. Sabit en boy oranıyla birleştiğinde, herhangi bir ekran boyutunda görsel olarak tutarlı kalan resim karuselleri elde edebilirsiniz.

Sade kaydırma çubuklarından, yerel hissi veren döner bantlara kadar

Basit bir kaydırma ve tıklama mekanizmasına sahip döner menü bile zaten hoş bir his veriyor, ancak modern özellikler bunu daha da ileriye taşıyor.Özellikle CSS Overflow Level 5 taslağının gerçek özellikler olarak ortaya çıkmaya başladığı Chrome 135+ sürümlerinde bu durum geçerlidir. Spesifikasyon, bir karuseli, etrafında isteğe bağlı, tarayıcı tarafından oluşturulan kullanıcı arayüzü bulunan bir kaydırma alanı olarak ele alır.

Bu modelde, bir "dönme dolap" şunlara eşittir: bir kaydırma çubuğu artı en fazla iki farklı erişim olanağı seti.—kaydırma düğmeleri ve kaydırma işaretçileri. Her ikisi de CSS sözde öğeleriyle oluşturulur, ancak tarayıcı, kaydırıcınızın yanına gerçek DOM kardeş öğeleri yerleştirir, böylece bunlar yerel kontroller gibi davranır.

En önemlisi, tarayıcı sizin için anlambilimi, odaklanma sırasını ve durum yönetimini otomatik olarak düzenler.Enjekte edilen öğelerin uygun rolleri vardır, mantıklı bir sırayla sekme tuşuyla erişilebilirler ve mevcut kaydırma konumunu yansıtırlar. Bu, elle yazılmış bir JS kütüphanesiyle aynı erişilebilirlik seviyesini tekrarlamanın kolay olmadığı anlamına gelir; ARIA özniteliklerine, odak grubu davranışına, klavye navigasyonuna ve canlı bölge duyurularına ihtiyaç duyarsınız.

Deneysel parçalara henüz güvenmeye hazır olmasanız bile, bu yönelim önemlidir.Bu, CSS'de slayt gösterileri, sekmeler, scrollspy bileşenleri ve benzeri kullanıcı arayüzü kalıplarının "birinci sınıf vatandaş" statüsüne yükseltildiğini ve özel JavaScript bağlantı koduna olan ihtiyacın giderek azalacağını gösteriyor.

Sonuç olarak, tüm kullanıcılar için daha sağlam bir temel elde edilmiş oluyor.—JavaScript'i devre dışı bırakanlar, yardımcı teknolojiye güvenenler, düşük güçlü cihazlara sahip olanlar veya istikrarsız ağ koşullarında internette gezinen kişiler de dahil olmak üzere. Yerel kaydırma ve CSS stillendirmesi, tüm bu senaryolarda komut dosyası ağırlıklı widget'lardan daha üstündür.

::scroll-button() kullanarak kaydırma düğmeleri ekleme

Bazı platformlarda kaydırma çubuklarının yanında küçük oklar zaten görüyorsunuz.ama yeni ::scroll-button() Pseudo-element bir adım daha ileri giderek CSS'nin, kaydırılabilir herhangi bir alan (karuseller dahil) için özel "önceki/sonraki" düğmeleri tanımlamasına olanak tanır.

Bu CSS tanımlı kaydırma düğmeleri, eski tip kaydırma çubuğu oklarından farklı davranır.İçeriği küçük adımlarla kaydırmak yerine, her tıklamada görünür alanın yaklaşık %85'ini atlıyorlar. Tam genişlikte, hizalanmış bir slayt gösterisinde bu, neredeyse slayt başına bir gezinme düğmesi gibi hissettiriyor.

Gerçekten tek bir öğenin tam olarak hareket etmesini istiyorsanız, kaydırma yakalama seçeneklerini birleştirebilirsiniz.Tipik bir tarif şöyledir: scroll-snap-type: x mandatory konteyner üzerinde ve scroll-snap-stop: always Her bir çocuk kartı için ayrı ayrı ayarlama yapabilirsiniz. Bu sayede, kaydırma düğmesine tek bir basışla bir karttan diğerine geçebilirsiniz.

Sözdizimi açısından bakıldığında, kaydırma düğmeleri eklemek, diğer sözde öğeleri biçimlendirmeye oldukça benziyor.Kaydırılabilir öğeyi seçersiniz (örneğin, .carousel) ve hedef ::scroll-button(left) or ::scroll-button(right) Geri ve ileri kontrollerini temsil etmek için. Basit bir örnek:

.carousel::scroll-button(left) { content: "⬅" / "Scroll left"; }

.carousel::scroll-button(right) { content: "⮕" / "Scroll right"; }

Eğik çizgiyle ayrılmış içerik değeri, hem görsel hem de erişilebilir bir etiket sağlamanıza olanak tanır.Ardından tarayıcı gerçek bir içerik oluşturur. <button> Düğümleri kaydırma alanınızın kardeş öğeleri olarak tanımlar ve içeriğinizi bunların içine yerleştirir. Mutlak konumlandırma, CSS grid veya hatta bağlantı konumlandırması kullanarak, diğer herhangi bir öğe gibi istediğiniz gibi konumlandırabilir ve biçimlendirebilirsiniz.

Burada da stil odaklı yaklaşım hala önem taşıyor.Örneğin, şöyle bir kuralı uygulamak: .carousel::scroll-button(*):focus-visible { outline-offset: 5px; } Bu özellik, kullanıcıların bu düğmelere sekme tuşuyla geçtiklerinde, öğenin kenarından uzakta net bir odak halkası görmelerini sağlayarak klavye kullanımını ve WCAG uyumluluğunu korur.

Arka planda, tarayıcı düğme durumunu ve kullanılabilir kaydırma aralığını takip eder.Bu, ilk slaytta olduğunuzda "önceki" düğmesini veya sondaki "sonraki" düğmesini devre dışı bırakma konusunda endişelenmenize gerek olmadığı anlamına gelir; platform bu durumları standart bir şekilde ele alabilir.

Madde işaretli veya etiketli gezinme için ::scroll-marker() ile kaydırma işaretleri.

Günümüzde kullanıcılar, görsel işaretleyicileri (döngü altındaki noktalar veya küçük resimler) neredeyse bekler hale geldi.. Yeni ::scroll-marker() Sözde öğe, bu göstergeleri tamamen CSS kullanarak oluşturmanıza olanak tanır ve her biri kaydırılabilir listedeki belirli bir öğeye bağlanır.

Kaydırma çubuğu başparmağının aksine, kaydırma işaretçileri anlamsal ilgi noktalarını temsil eder.Her bir işaretleyici yalnızca piksel cinsinden bir konuma değil, aynı zamanda gerçek bir alt öğeye karşılık gelir; bu da onu TV dizilerindeki sezonlar, ürün kategorileri veya bir hikayedeki mantıksal bölümler gibi senaryolar için ideal hale getirir, her bir kare için değil.

İşaretleyiciler geçerli olarak görünüyor. <a> elemanlarıBu sayede size iki önemli özelliği ücretsiz olarak sunuyoruz: sayfa içi gezinme ve ekran okuyucular için doğru anlambilim. Bunlar, bağlantı linklerine çok benzer şekilde çalışır, ancak slayt gösterisi kullanımına özel bazı geliştirmeler içerir.

Bu iyileştirmeler arasında şunlar yer almaktadır: :target-current sözde sınıfBu özellik, ilgili öğe şu anda görünür alana yerleştirildiğinde veya "aktif slayt" olarak kabul edildiğinde eşleşir. Aktif işaretçiyi farklı bir arka plan veya kenarlıkla vurgulamak için kullanabilirsiniz.

Bunu bağlamak için öncelikle işaretçi grubunun nerede bulunması gerektiğini tanımlamanız gerekir. ile scroll-marker-group Konteyner üzerindeki bir özellik, genellikle kaydırma çubuğundan önce veya sonra bulunur. Örneğin, scroll-marker-group: after; İşaretleyicileri DOM'daki döner bant bölgesinden sonra yerleştirecektir.

Ardından, işaretleyici oluşturması gereken bireysel çocukları hedef alırsınız.Slaytlarınız <li> unsurlar, bir şey gibi .carousel > li::scroll-marker Tamamdır. Yaygın bir yöntem, boş noktalar oluşturmaktır:

.carousel { scroll-marker-group: after; }

.carousel > li::scroll-marker { content: " "; }

.carousel > li::scroll-marker:target-current { background: var(--accent); }

Tarayıcı, oluşturma işlemini üstlenir. <a> İşaretleyicileri, özel bir ::scroll-marker-group konteynerinde gruplandırarakve bunları odak grubu gibi davranan, klavyeyle gezilebilir öğeler olarak sunar. Ekran okuyucular bunları sekme listesine benzer şekilde sunabilir: işaretçiler arasında odak noktasını hareket ettirir ve belirli bir slayta atlamak için bunları etkinleştirirsiniz.

İşaretleyiciler sadece noktalarla sınırlı değildir.. Ayarlayabilirsiniz content sayılara ("1", "2"(vb.), "1. Sezon" veya "3. Bölüm" gibi insan tarafından okunabilir etiketler veya e-ticaret ürün galerileri gibi fotoğraf ağırlıklı düzenler için küçük resim galerileri oluşturmak üzere satır içi resimler bile kullanılabilir.

Düğmeleri, işaretleyicileri ve yedek stratejileri birleştirme

Kaydırma düğmelerini ve işaretleyicileri kaydırma yakalama özelliğine sahip bir karuselin üzerine yerleştirdiğinizde, JavaScript çözümünden ayırt edilemeyen bir bileşen elde edersiniz.Ancak bakımı daha kolaydır ve daha az hareketli parçaya sahiptir. Kullanıcılar okları tıklayabilir, noktaları işaretleyebilir, dokunmatik ekranlarda kaydırma yapabilir veya klavye navigasyonunu kullanabilir; tüm bunlar tutarlı bir davranışla gerçekleşir.

Bu kombinasyon aynı zamanda yaygın performans ve kullanıcı deneyimi sorunlarına da çözüm getiriyor.Çünkü hiçbir komut dosyası slayt değişikliklerini koordine etmez, bu nedenle manuel ayarlamalardan kaynaklanan sayfa düzeni karmaşası yaşamazsınız. scrollLeft Uygunsuz zamanlarda ayarlamalar veya zamanlayıcıların devreye girmesi söz konusu olmaz. DOM ağacı baştan hazır olduğu ve yaşam döngüsünün sonlarında öğeleri enjekte etmediğiniz veya ölçmediğiniz için CLS (Kümülatif Yerleşim Kayması) azalır.

Ancak bir sorun var: ::scroll-button ve ::scroll-marker hâlâ deneysel aşamada. ve şu anda yalnızca Chrome 135+ sürümlerinde deneysel bayrakların arkasında yer alıyor. Bu, üretim sitelerinde kullanmayı planlıyorsanız mutlaka sorunsuz geri dönüş mekanizmaları tasarlamanız gerektiği anlamına geliyor.

Özellik tespiti yoluyla @supports Burada en iyi müttefikiniz o.Geleneksel bir gezinme çubuğu oluşturabilirsiniz; bu çubuk, aşağıdakilere bağlantılar içerir: #slide1, #slide2 ve benzeri şekilde, varsayılan olarak gizlenir, ardından yerel kontroller kullanılabilir olduğunda gizlenir. Kabaca kavramsal bir model şöyle görünür:

.carousel-nav { display: flex; gap: 0.5rem; }

@supports (scroll-button-inline: both) { .carousel-nav { display: none; } }

HTML'de, bağlantı içeren basit bir gezinme menüsü yeterlidir.: her slayt bir tane alır idVe gezinme menüsü bu kimliklere işaret ediyor. Kaydırma yakalama özelliğine sahip bir kapsayıcı içindeki bir bağlantı noktasına atlamak, yakalama davranışı ile güzel bir şekilde entegre oluyor, böylece atlamadan sonra slayt düzgün bir şekilde yakalanıyor.

Bu, deneysel sözde öğelerin avantajlarından destekleyici tarayıcılarda yararlanabileceğiniz anlamına gelir.—tamamen yerel düğmeler, işaretleyiciler ve kaydırma durumu kancaları— sunarken, aynı zamanda başka yerlerde de tamamen işlevsel bir deneyim sunar. Hiçbir kullanıcı kullanılamaz bir kaydırıcıyla karşı karşıya kalmaz.

Üstelik, JavaScript devre dışı bırakıldığında bile tüm bunlar çalışmaya devam ediyor.Çünkü tamamen HTML bağlantılarına, CSS kaydırma davranışına ve tarayıcının kaydırma motoruna güveniyorsunuz. Birçok kullanıcı deneyimi modeli için (galeriler, zaman çizelgeleri, adım adım gösterimler) bu fazlasıyla yeterli.

CSS ile oluşturulmuş, keyframe animasyonlu otomatik oynatılan slayt gösterileri.

İnsanların slayt gösterilerinden beklediği ortak özelliklerden biri de otomatik oynatma özelliğidir.—Slaytlar birkaç saniye sonra otomatik olarak ilerler. Bu genellikle JavaScript zamanlayıcıları ile uygulanırken, bu davranışı saf CSS animasyonları kullanarak da yaklaşık olarak elde edebilirsiniz.

Buradaki püf nokta, tüm slaytları içeren esnek bir satırın dönüşümünü canlandırmaktır.Belirli sayıda slayt için, izlemenin her slayt konumunda bir süre kaldığı, ardından bir sonrakine atladığı bir anahtar kare zaman çizelgesi tanımlarsınız. Örneğin:

@keyframes slide { 0%, 20% { transform: translateX(0); } 25%, 45% { transform: translateX(-100%); } 50%, 70% { transform: translateX(-200%); } 75%, 95% { transform: translateX(-300%); } 100% { transform: translateX(0); } }

Ardından bu animasyonu sarmalayıcıya uygulayın. slayt öğelerinizi tutan, örneğin .autoplay-carousel { display: flex; animation: slide 12s infinite; }Yüzde aralıkları, her slaytta kalma sürelerini tanımlayarak, bir sonraki slayta geçmeden önce içeriğin okunabilir olmasını sağlar.

Kullanıcıların otomatik oynatmayı duraklatabilmeleri için bir yöntem eklemek çok önemlidir.Basit ama etkili bir yöntem, fareyle üzerine gelindiğinde duraklatmaktır. .autoplay-carousel:hover { animation-play-state: paused; }Böylece masaüstü kullanıcıları içerikle etkileşime girdiklerinde hareketi durdurabilirler.

Erişilebilirlik hususları, hareket tercihleriyle daha da ileri gidiyor.Saygı duymak prefers-reduced-motion Bu, en iyi uygulama olarak kabul edilir, bu nedenle daha az hareket tercih eden kullanıcılar için animasyonu tamamen devre dışı bırakabilirsiniz:

@media (prefers-reduced-motion: reduce) { .autoplay-carousel { animation: none; } }

CSS otomatik oynatma çözümleri, JavaScript'in kolayca ele alabileceği tüm uç durumları aynı kolaylıkla ele alamasa da—gerçekten dinamik slayt sayımları veya karmaşık kullanıcı odaklı duraklatma/devam ettirme mantığı gibi— kod yazmaktan tamamen kaçınmak istediğinizde, basit, statik slayt gösterileri için şaşırtıcı derecede sağlamdırlar.

Sadece CSS ile ve JavaScript ile oluşturulmuş slayt gösterilerini karşılaştırma

Bir slayt gösterisi için CSS ve JavaScript arasında karar vermek, her şey dahil bir seçim meselesi değildir.Bu, gereksinimlerinize, hedef kitlenize ve bakım bütçenize bağlıdır. Ancak gerçek dünyadaki birçok senaryoda denge büyük ölçüde CSS lehine kaymıştır.

Performans açısından bakıldığında, CSS karuselleri açık ara önde.Kütüphane kodunun ayrıştırılması veya yürütülmesi yok, her kaydırma etkileşiminde olay dinleyicileri yok ve komut dosyasıyla yapılan ayarlamalarla tetiklenen çalışma zamanı düzen yeniden hesaplamaları yok. Tarayıcının kaydırma motoru, yüksek performanslı masaüstü bilgisayarlardan düşük güç tüketimli telefonlara kadar her şey için optimize edilmiş yerel kodla yazılmıştır.

Erişilebilirlik açısından, yeni CSS carousel özellikleri çıtayı önemli ölçüde yükseltiyor.Tarayıcı tarafından sağlanan kaydırma düğmeleri ve işaretleyiciler, aksi takdirde JavaScript'te titizlikle yeniden oluşturulması gereken ARIA rolleri, klavye davranışı ve duyurularla önceden yapılandırılmış olarak gelir. Bunlar olmadan bile, roller ve etiketler kullanılarak kaydırma yakalama özelliğine sahip bir karusel yine de erişilebilir hale getirilebilir.

Öte yandan, JavaScript çok gelişmiş kalıplar için hala kullanışlıdır.Ayrıntılı otomatik oynatma mantığına, analiz kancalarına, özel fiziğe veya paylaşılan duruma sahip birden fazla slayt gösterisini (örneğin, ana resim artı küçük resim satırı artı harici sayfalama) senkronize etmeye ihtiyacınız varsa, komut dosyası tabanlı yaklaşımlar yine de daha esnek olabilir.

Ancak asıl önemli nokta şu ki, birçok "günlük" döner platform aslında bu düzeyde bir karmaşıklığa ihtiyaç duymuyor.Basit bir ürün galerisi, referans slayt gösterisi veya "öne çıkan gönderiler" şeridi genellikle kaydırma yakalama, birkaç CSS kuralı ve isteğe bağlı yerel kontrollerle uygulanabilir; bu da üç slayt arasında geçiş yapmak için 50 KB'lık bir bağımlılığı dahil etmekten sizi kurtarır.

Bir diğer husus da JavaScript'in başarısız olması durumunda dayanıklılıktır.CSS tabanlı slayt gösterileri, JavaScript kurumsal bir proxy tarafından engellendiğinde, reklam engelleyici tarafından bozulduğunda veya kullanıcı sayfaya geldiğinde henüz yüklenmemiş olduğunda bile mükemmel şekilde çalışmaya devam eder. Bu tür bir sorunsuz çalışma, sayfa yüklendikten sonra bir başlatma aşamasına bağlı olan kütüphanelerle elde edilmesi zordur.

CSS slayt gösterileri için erişilebilirlik en iyi uygulamaları

Tarayıcı bazı erişilebilirlik konularında yardımcı olsa bile, yine de çok önemli bir rol oynuyorsunuz. CSS carousel'inizi herkes için kullanılabilir hale getirirken, anlambilim, odak yönetimi ve hareket hassasiyeti aklınızın ön planda olması gereken unsurlardır.

Öncelikle, atlıkarıncaya uygun bir yer işareti verin.Bunu bir öğenin içine sarmak role="region" ve açıklayıcı bir aria-label “Ürün galerisi” veya “Öne çıkan makaleler” gibi başlıklar, ekran okuyucu kullananların bulmasını ve anlamasını kolaylaştırır.

Her slayt ayrıca erişilebilirlik etiketi de taşıyabilir.örneğin aracılığıyla aria-label "3 slayttan 1. slayt", "3 slayttan 2. slayt" vb. şeklinde ifadeler kullanılabilir. Bu sayede, kullanıcı bir slayta geldiğinde, sıradaki konumuna ilişkin anında bilgi edinir.

Görünür odak göstergelerini unutmayın.Herhangi bir etkileşimli öğe—ister bir ::scroll-button, ::scroll-marker-Oluşturulan bağlantı veya yedek gezinme menünüzdeki manuel bağlantı noktası, kontrast yönergelerini karşılayan ve genel sıfırlamalarla kaldırılmayan net bir odak stiline ihtiyaç duyar.

Otomatik oynatma veya kaydırma tabanlı animasyonlar kullanıyorsanız, hareket tercihlerine saygı gösterin.. kullanma prefers-reduced-motion Hareket hastalığına yatkın kullanıcıları önemsiyorsanız, animasyonları devre dışı bırakmak veya basitleştirmek isteğe bağlı değildir ve daha yoğun efektleri bir medya sorgusuna sarmak oldukça kolaydır.

Son olarak, temas hedefi boyutlarını göz önünde bulundurun.İster yerleşik kaydırma işaretleyicilerini ister kendi gezinme bağlantılarınızı biçimlendirin, etkileşimli alanları en az 44x44 CSS pikseli civarında tutun. Bu genellikle, birbirine sıkıca paketlenmiş küçük daireler yerine bol miktarda dolgu ve boşluk anlamına gelir.

Gerçek dünya iş akışları, araçlar ve geleceğe yönelik yönelimler

CSS carousel'leriyle deneme yapmayı kolaylaştırmak için bazı ekipler canlı yapılandırma araçları oluşturdu. Burada ayarları değiştirebilir, kaydırma düğmelerini etkinleştirebilir, işaretleyicileri açıp kapatabilir, hizalama modlarını ayarlayabilir ve bu yapılandırma için gereken güncellenmiş CSS'yi anında görebilirsiniz. Bu deneme alanları, kurcalayarak öğrenmek için harika.

Konfigüratörlerin yanı sıra, yalnızca CSS ile oluşturulmuş, özenle seçilmiş slayt gösterisi örneklerinden oluşan galeriler, nelerin mümkün olduğunu sergiliyor.Sekmeli arayüzler, kaydırmalı gezinme, adım adım slaytlar, küçük resim galerileri ve daha fazlası gibi desenler bulacaksınız; bunların tümü kaydırma alanları, hizalama ve isteğe bağlı kontroller gibi aynı temel üzerine kuruludur.

Bu demo sitelerinin çoğu, kasıtlı olarak hiç JavaScript içermiyor. Bunu kanıtlamak için: zengin, etkileşimli bir kullanıcı arayüzü tamamen HTML ve CSS ile elde edilebilir. Genellikle işlevlerini şu yollarla ortaya koyarlar: @layer Bildirimler sayesinde, kendi tasarım sisteminize uyan stilleri inceleyebilir ve seçebilirsiniz.

İleriye dönük olarak, CSS platformu halihazırda iki önemli evrim yolunda çalışıyor.İlk özellik "kendi öğelerinizi getirin" özelliğidir; bu sayede tarayıcı tarafından oluşturulan düğmelere ve işaretleyicilere güvenmek yerine, kendi öğelerinizi ekleyebileceksiniz. <a> hem de <button> Altta yatan kaydırma mantığından faydalanırken aynı zamanda işaretlemeyi de korur.

Bu, marka kimliğine sahip, zengin tasarımlı ve yardımcı çerçevelerle oluşturulmuş kontrol sistemlerinin önünü açacaktır. Tailwind'e benzer şekilde, anlambilim ve davranış platform tarafından yönetilmeye devam eder. Temelde kullanıcı arayüzünü süslersiniz ancak tarayıcı işlemin beyni olarak kalır.

İkinci büyük alan ise döngüsel veya sonsuz kaydırma özelliğidir.Günümüzde birçok slayt gösterisi, sona ulaşıldığında "döngüsel olarak" ilk slayta geri döner. Bunu temiz bir şekilde uygulamak zordur ve genellikle yinelenen içerik veya karmaşık mantık gerektirir. Platform düzeyinde döngüsel kaydırma desteği, tarayıcıların döngüsel kaydırma davranışını daha zarif ve verimli bir şekilde ele almasını sağlayacaktır.

Bu özellikler olgunlaştıkça ve Chrome'un ötesine, diğer motorlara yayıldıkça...Bu durum, "yerel CSS carousel"in yapabildikleri ile ağır JavaScript kütüphanelerinin sundukları arasındaki farkın giderek daralmasına ve betik gerektirmeyen yaklaşımların, uç bir durum deneyi olmaktan ziyade varsayılan başlangıç ​​noktası haline gelmesine yol açacaktır.

Özetle, modern CSS, slayt gösterilerini nasıl oluşturduğunuzu yeniden düşünmeniz için size her türlü nedeni sunuyor.Basit bir kaydırma-yakalama düzeniyle başlayıp, desteklenen yerlerde deneysel düğmeler ve işaretleyiciler ekleyerek ve erişilebilirlik en iyi uygulamalarını her yere serpiştirerek, JavaScript bağımlılığına ihtiyaç duymadan duyarlı, akıcı ve sağlam kaydırıcılar sunabilirsiniz. Birçok proje için bu, daha hızlı sayfalar, daha az bakım gerektiren kod ve her kullanıcı için daha dayanıklı bir deneyim anlamına gelir.