Sıfır JavaScript ile gelişmiş CSS slayt gösterileri oluşturun

Ana Sayfa » Python » Sıfır JavaScript ile gelişmiş CSS slayt gösterileri oluşturun

Sadece modern CSS kullanarak slayt gösterileri oluşturmak artık bir hayal değil.—Bu, klasik JavaScript kaydırma çubuğu kütüphanelerinden genellikle daha iyi performans gösterebilen, son derece gerçekçi ve üretime hazır bir seçenektir. Şu özellikler sayesinde: Kaydırma yakalama, kaydırma odaklı animasyonlar, deneysel döner slayt gösterisi sözde öğeleri ve sağlam erişilebilirlik temel öğeleriHafif, dayanıklı ve aynı zamanda pürüzsüz, etkileşimli ve şık bir his veren döner platformlar gönderebilirsiniz.

Sadece birkaç slayt göstermek için 50 KB'lık JavaScript paketlerini indirmekten bıktıysanız...Bu kılavuz, günümüz CSS'inin sizin için neler yapabileceğini adım adım açıklıyor. Sadece CSS ile oluşturulan slayt gösterilerinin temel kavramlarını, bunları scroll-snap ile nasıl entegre edeceğinizi ve yeni CSS özelliklerine ne zaman başvuracağınızı ele alacağız. ::scroll-button() hem de ::scroll-marker() Sözde öğeler ve erişilebilirliği ve performansı birinci sınıf unsurlar olarak ele alırken otomatik oynatma veya döngüsel davranışları nasıl serpiştirebileceğiniz konuları ele alınmaktadır.

CSS tabanlı slayt gösterilerinin nihayet ciddi bir seçenek haline gelmesinin nedenleri

Yıllarca "carousel" neredeyse "JavaScript eklentisi" ile eş anlamlıydı.Swiper, Glide veya kendi geliştirdikleri kaydırıcılar gibi çözümler, tercih edilen yaklaşımlardı: navigasyonu, durumu, klavye desteğini ve dokunmatik hareketleri yönetiyorlardı, ancak bunun karşılığında ekstra ağırlık, her yerde olay dinleyicileri ve epey bir DOM düzenlemesi gerektiriyorlardı.

Modern CSS, bu açığın büyük bir kısmını sessizce kapattı.. Gibi özelliklerle scroll-snap-type hem de scroll-snap-alignBöylece herhangi bir yatay veya dikey kaydırma çubuğunu sayfalandırılmış bir deneyime dönüştürebilirsiniz. Bunun da ötesinde, CSS Overflow Level 5 spesifikasyonu tarayıcı tarafından oluşturulan özellikleri de beraberinde getiriyor. kaydırma düğmeleri ve işaretleyiciler Bunlar, tam özellikli bir slayt gösterisi arayüzü gibi davranır, ancak tamamen CSS ile tanımlanır.

En büyük kazanım, temel kullanıcı deneyimi (UX) konularından JavaScript kodunuz değil, tarayıcının sorumlu hale gelmesidir.Kaydırma fiziği, klavye navigasyonu, odak sırası ve hatta slayt gösterisinin kontrolleri için ARIA rolleri. Birçok durumda, platformun şu anda sunduğundan daha erişilebilir ve daha iyi performans gösteren bir şey oluşturmak gerçekten zordur.

CSS döner panolarının bir diğer önemli avantajı da dayanıklılıklarıdır.JavaScript yüklenemese bile, komut dosyası engellenmiş veya devre dışı bırakılmış kullanıcılar yine de mükemmel şekilde kullanılabilir, kaydırılabilir bir öğe kümesi elde ederler. Herhangi bir veri yükleme işlemi yoktur, geç yüklenen kodun getirdiği düzen kayması olmaz ve zamanla yanlış gidebilecek çok daha az hareketli parça vardır.

Temel yapı taşı: Kaydırma Yakalama özelliğine sahip kaydırılabilir bir konteyner.

Her CSS tabanlı slayt gösterisi, başlangıçta sıradan bir kaydırılabilir konteyner olarak hayata başlar.Yatay olarak kaydırılabilen basit bir slayt listesi düşünün. Ardından, görünüm alanının her slayta doğal olarak kilitlenmesini sağlayacak kaydırma yakalama özelliğini ekleyin.

Yatay bir slayt gösterisi için minimal bir HTML yapısı kasıtlı olarak basittir.: bir sarmalayıcı öğe ve içinde bir dizi kaydırma öğesi. Örneğin, şunu kullanabilirsiniz: ul 'da li unsurlar veya bir div çocukla divCSS işin büyük kısmını halleder, bu nedenle tasarımınız gerektirmediği sürece her alt öğe için özel sınıflar oluşturmanıza gerek yoktur.

CSS'de basit bir kaydırma yakalama ayarı şu şekilde görünebilir.Tam genişlikte, tek slaytlık bir görünüm varsayılarak:

.carousel { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; }
.carousel-item { flex: 0 0 100%; scroll-snap-align: center; }

Burada konteyner şu şekilde kullanılıyor: display: flex çocuklarını yatay olarak sıralamak, ve overflow-x: auto Kaydırmayı etkinleştirmek için. Sihir burada. scroll-snap-type: x mandatoryBu, tarayıcıya yatay kaydırmanın her zaman geçerli bir yakalama noktasına oturması gerektiğini söyler ve scroll-snap-align: center Her slaytta, bu yakalama noktalarını tanımlayan bir özellik bulunur.

Flexbox ve scroll snap'in bu kombinasyonu anında bir atlıkarınca hissi yaratıyor.Kullanıcılar kaydırır veya sürükler ve en yakın slayt otomatik olarak yerine oturur. Yerel kaydırma özelliğinden yararlandığı için, telefonlarda ve tabletlerde dokunmatik giriş herhangi bir ek işlem gerektirmeden sorunsuz çalışır. hareket işleyicileri veya ek kütüphaneler.

Her görüntülemede yalnızca bir öğeyle sınırlı değilsiniz.Birden fazla kartı aynı anda gösteren çok sütunlu slayt gösterileri için, öğeler için esnek bir genişlik kullanabilirsiniz, örneğin:

.carousel-item { flex: 0 0 calc(33.333% - 1rem); margin: 0 0.5rem; scroll-snap-align: center; }

Bu varyasyon, örneğin, bir görüntüleme alanında biraz boşluk bırakarak üç kart görüntülemenizi sağlar.Kullanıcılar, tek bir ana slayt yerine kart sayfaları arasında kaydırarak geçiş yapabilirler; bu da ürün listeleri veya galeriler için harika bir özelliktir.

::scroll-button() sözde öğesine sahip kaydırma düğmeleri

Kaydırma çubuğunuz hazır olduğunda, çoğu insanın bir sonraki istediği şey belirgin gezinme düğmeleridir.—Döngüsel menüyü sola veya sağa hareket ettiren önceki ve sonraki kontroller. Geleneksel olarak, bunları şu şekilde oluştururdunuz: <button> Öğeleri bağlayın, tıklama olaylarını bağlayın ve ne kadar kaydırılacağını hesaplayın.

CSS Overflow 5 spesifikasyonu şunları getiriyor: ::scroll-button()Tarayıcının tüm bu ağır işleri yapmasına olanak tanıyan bir sözde öğe.Bu özellik şu anda Chrome 135'ten itibaren (ve genellikle başlangıçta deneysel bayrakların arkasında) kullanılabilir olsa da, gelecekte slayt gösterilerinin nasıl oluşturulacağına dair bir fikir veriyor.

Kaydırma düğmelerini, diğer herhangi bir sözde öğeyi tanımladığınız şekilde tanımlarsınız.Örneğin, slayt gösterinize sol ve sağ düğmeler oluşturmak için:

.carousel::scroll-button(left) { content: "⬅" / "Scroll left"; }
.carousel::scroll-button(right) { content: "⮕" / "Scroll right"; }
.carousel::scroll-button(*) :focus-visible { outline-offset: 5px; }

Bu CSS uygulandığında, tarayıcı aslında gerçek bir CSS kodu oluşturur. <button> kaydırma kapsayıcısının kardeş öğeleri olarakBu, öğeleri kaydırma çubuğuna bağlar, uygun rolleri atar ve davranışlarını düzenler. Tek bir tıklama genellikle kaydırma alanının yaklaşık %85'ini kaydırır; bu da çoğu döner menü düzeninde bir "sayfa" gibi hissettirir.

Tasarımınız her tıklamada tam genişlikte bir öğe bekliyorsaBu sözde öğeleri, her bir alt öğeye daha sıkı kenetleme uygulayarak birleştirebilirsiniz. scroll-snap-stop: alwaysBu, görüntüleme alanının yarıda durmak yerine öğe sınırlarına yerleşmesini sağlar.

Buradaki içerik özelliği iki amaca hizmet ediyor.: İlk değer, kullanıcıların görsel olarak gördüğü şeydir (bu durumda ok karakterleri), ikinci dize ise yardımcı teknolojilere gösterilebilen erişilebilir yedek metindir. Bu düğmeleri CSS ile biçimlendirebilir ve konumlandırabilir veya aşağıdaki gibi işlevler kullanabilirsiniz. anchor() Bunları yerleşim planınıza tam olarak uyacak şekilde hizalamak için.

::scroll-marker() ve ::scroll-marker-group ile kaydırma işaretçileri.

Sayfalama çubuğunun altındaki noktalar veya etiketler (genellikle "sayfa numaralandırma noktaları" veya "işaretleyiciler" olarak adlandırılır) bir diğer yaygın gereksinimdir.Bu slaytlar, kaç öğenin mevcut olduğunu ve hangisinin şu anda görünür olduğunu gösterir ve kullanıcıların doğrudan belirli bir slayta geçmesine olanak tanır.

MKS ::scroll-marker() Pseudo-element, bağlantı etiketlerini veya span'leri manuel olarak oluşturmanıza gerek kalmadan bu göstergeleri size sağlar.Her bir işaretleyici esasen bir navigasyon noktasıdır. <a> Tarayıcı tarafından oluşturulan, ilgili kaydırma öğesine işaret eden ve klavye ve ekran okuyucu navigasyonuna katılan öğe.

Bunu ayarlamak için, tarayıcıya işaretleyici grubunu nereye yerleştireceğini söylersiniz. 'da scroll-marker-groupve hangi öğeler üzerinde işaretleyiciler oluşturulacağı. Minimal bir yapılandırma şöyle görünebilir:

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

Tarayıcı bir yapı oluşturur. ::scroll-marker-group Bu, kapsayıcıyı kaydırma çubuğunun kardeş öğesi olarak tanımlar ve seçilen her çocuk için bir işaretleyiciyle doldurur.Bu basit örnekte işaretçiler boş noktalar olarak gösteriliyor, ancak "1. Sezon" gibi metinler, simgeler veya hatta küçük resimler de kullanabilirsiniz. content özelliği.

Bu işaretleyicileri sıradan bir kaydırma çubuğundan özel kılan nedir? Bunların gerçek gezinme bağlantıları olması önemli. Kullanıcıların doğrudan anlamlı konumlara atlamalarını sağlıyorlar ve faydalı anlamsal bilgilerle birlikte geliyorlar: :target-current Hangi işaretçinin şu anda görüntülenen veya yerleştirilmiş slayta karşılık geldiğini gösteren durum. Klavye desteği bir odak grubu gibi davranır ve ekran okuyucular bunları sekme listesi benzeri bir kontrol olarak gösterebilir.

Bu strateji, özellikle kaydırma çubuğunuz tek tek öğeler yerine mantıksal parçaları temsil ettiğinde oldukça etkilidir.Örneğin, on bölüm için on işaretleyici oluşturmak yerine, birinci ve ikinci sezonun başlangıcına atlayan iki işaretleyici oluşturabilirsiniz. Hangi "ilgi noktalarının" ele alınabileceğine karar vermekte özgürsünüz.

Düğmeleri ve işaretleyicileri tam bir döner menü arayüzünde birleştirme

Koyduğun zaman ::scroll-button() hem de ::scroll-marker() aynı kaydırma çubuğunda birlikteSonuç olarak, kullanıcıların anında bir slayt gösterisi olarak tanıdığı bir kullanıcı arayüzü elde edersiniz: önceki/sonraki kontrolleri, ne kadar ilerlediklerini gösteren bir dizi işaretleyici ve slaytlar arasında sorunsuz geçişler.

Klasik JavaScript kaydırıcılarından en önemli fark, bu mantığın büyük kısmının artık tarayıcıda yer almasıdır.Düğmeler ve işaretleyiciler, doğru ARIA rollerine sahip, sekme sırasına düzgün bir şekilde entegre edilmiş ve her site için yeniden icat edilmek yerine, altta yatan tarayıcı ekipleri tarafından tasarlanmış bir erişilebilirlik hikayesine sahip, oluşturulmuş öğelerdir.

Bu yaklaşım birçok pratik fayda sağlıyor.JavaScript devre dışı bırakıldığında da çalışır, içerik titremesini ve zamanlama sorunlarını ortadan kaldırır, kontroller CSS düzenleme zamanında bilindiği için Kümülatif Düzen Kaymasını azaltır ve isterseniz kaydırma odaklı animasyonlarla veya kaydırma durumu sorgularıyla sorunsuz bir şekilde entegre olur.

Dokunmatik cihazlarda, deneyim doğal olarak parmak dostudur. Çünkü kaydırma konteyneri hala sadece yerel bir kaydırma çubuğudur. Masaüstlerinde, fare tekerleği ve klavye girişi beklendiği gibi çalışır ve oluşturulan kontrollerdeki odak göstergeleri, tasarım ve erişilebilirlik yönergelerinize uyacak şekilde biçimlendirilebilir.

Bakım açısından bakıldığında, "daha az iş yap, daha fazla sonuç elde et" oldukça doğru bir tanımlama haline geliyor.Projeler genelinde birden fazla döner slayt gösterisi uygulamasının mantığını sürdürmek yerine, zaman içinde gelişmeye devam edecek ve sizin tarafınızdan ekstra bir çalışma gerektirmeyecek paylaşılan, standartlaştırılmış platform özelliklerine güvenirsiniz.

Scroll Snap özelliğini gerçek projelerde nasıl kullanabilirsiniz?

Yeni sözde öğeleri bir anlığına göz ardı etseniz bile, yalnızca kaydırma yakalama özelliği bile birçok üretim aşamasındaki slayt gösterisi için yeterlidir.Modern tarayıcı motorlarında kaydırma yakalama özelliğinin desteği sağlamdır ve hem fare tekerleği hem de dokunmatik hareketlerle davranış tahmin edilebilir.

En basit senaryoda, HTML slayt gösteriniz şöyle olabilir: div içinde bir dizi görüntüyleBu konteynere şu şekilde bir sınıf verebilirsiniz: .carousel Alt görselleri sınıflandırılmamış bırakın; hizalama ve kaydırmayı CSS halleder.

Açarak scroll-behavior: smooth konteyner üzerindeBu sayede, yakalama noktaları arasında kaydırma işlemi, atlamalı olmak yerine hoş bir şekilde animasyonlu hale gelir. Bu durum, özellikle kullanıcılar işaretleyicilere veya bağlantı noktalarına tıkladığında veya hibrit kurulumlarda kaydırmayı programatik olarak tetiklediğinizde fark edilir.

Her bir temel kaydırma yakalama özelliği çok farklı bir rol oynar.. scroll-snap-type Eksenleri tanımlar ve hizalamanın zorunlu mu yoksa sadece bir ipucu mu olduğunu belirler; scroll-snap-align Çocuklar üzerinde, görünür alana nerede kilitleneceklerini belirtir (başlangıç, merkez, bitiş); ​​ve scroll-snap-stop: always Bu özellik, hızlı kaydırma sırasında tarayıcının hizalama noktalarını atlamasını engeller.

Bu özellikler birlikte kullanıldığında, döner platformun tam olarak nasıl bir his vermesi gerektiğini ayarlamanıza olanak tanır.—Büyük içerik bölümleri için uygun, yumuşak ve affedici kaydırmalardan, öğeler arasında kalmak istemediğiniz ana banner'lar için mükemmel olan, katı ve adım adım kaydırma davranışına kadar.

Bu tamamen CSS olduğu için, düzeni kolayca ve duyarlı bir şekilde uyarlayabilirsiniz.Medya sorguları sayesinde, dar ekranlarda görünüm başına bir slayttan, geniş masaüstü bilgisayarlarda görünüm başına birkaç slayta geçiş yapabilirsiniz; bunun için sadece ayarı değiştirmeniz yeterlidir. flex-basis Öğe sayısı. JavaScript kesme noktalarına, yeniden boyutlandırma dinleyicilerine veya yeniden hesaplanmış genişliklere gerek yok.

Deneysel sözde elemanlar ve özellik tespiti

Yeni atlıkarınca odaklı sözde öğeler—::scroll-button(), ::scroll-marker() hem de ::scroll-marker-group—güçlüler ama hala nispeten tazelerBu yazının yazıldığı sırada, genellikle deneysel bayraklar gerektiren Chrome 135 ve sonraki sürümlerinde mevcutturlar ve zamanla diğer tarayıcı motorlarına da yayılacaklardır.

Destek henüz evrensel olmadığı için, üretim ortamları özellik algılama ve sorunsuz geri dönüş mekanizmalarına güvenmelidir.CSS size şunları sağlar: @supports "at-rule" özelliği, özellik tanımaya bağlı olarak kuralları koşullu olarak uygulamanıza olanak tanır.

Basit bir yedek gezinme şeridi tanımlayabilirsiniz.—döngüsel kaydırma çubuğunun altında yer alan bir dizi bağlantı veya düğme— ve tarayıcı yerleşik kaydırma düğmelerini desteklediğinde bu şeridi gizler. Örneğin:

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

İşte .carousel-nav Kimlik numaraları aracılığıyla slaytlara işaret eden, elle yazılmış bağlantılar içerebilir., sevmek <a href="#slide1">1</a>Yeni kaydırma düğmesi özelliğini anlayan tarayıcılarda, yerel kontrolleriniz görünür ve yedek gezinme menüsü gizlenir; eski tarayıcılarda ise, mükemmel bir kullanılabilirlik deneyimi için kaydırma yakalama özelliğiyle birlikte bağlantı gezinme menüsü kalır.

Bu hibrit strateji, yeni nesil döner raf özellikleriyle bugün güvenli bir şekilde deneme yapmayı mümkün kılıyor.Kendinizi belirli bir motor veya bayrak yapılandırmasına kilitlemeden. Tarayıcı desteği olgunlaştıkça, sözde öğelere daha fazla güvenebilir ve manuel iskelet yapısının bir kısmını azaltabilirsiniz.

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

Sıkça istenen bir diğer özellik ise otomatik oynatma; yani fareyle üzerine gelindiğinde isteğe bağlı olarak duraklayan, kendi kendine ilerleyen bir slayt gösterisi.Otomatik oynatma bazı kullanıcı deneyimi ve erişilebilirlik sorunları içerse de, tamamen CSS animasyonlarıyla da elde edilmesi mümkündür.

Basit bir yöntem, slayt rayınızın yatay hareketini canlandırmaktır..

@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); }
}
.autoplay-carousel { display: flex; animation: slide 12s infinite; }
.autoplay-carousel:hover { animation-play-state: paused; }

Bu örnekte, anahtar kareler bir sonraki slayta geçmeden önce her bir konumda belirli süreler geçiriyor.Parça sonunda tekrar başa dönerek dört slayt boyunca tekrarlanan bir slayt gösterisi görünümü veriyor. Fareyi slayt gösterisinin üzerine getirmek animasyonu duraklatıyor, böylece kullanıcılar sürekli hareketle mücadele etmek zorunda kalmadan içeriği inceleyebiliyor.

Sağlık veya konfor nedenleriyle daha az hareket etmeyi tercih eden kullanıcılara saygı duymak.Animasyonu bir medya sorgusuna sarabilirsiniz:

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

Bu, hareketin azaltılmasının istendiği sistemlerde slaytların sabit kalmasını sağlar.Bu sayede otomatik oynatma devre dışı bırakılırken, manuel kaydırma veya düğme/işaretçi navigasyonuna (varsa) izin verilmeye devam edilir.

Önemli bir dezavantajı ise, anahtar kare tabanlı otomatik oynatmanın kaydırma yakalama özelliğiyle otomatik olarak entegre olmamasıdır.İçeriği manuel olarak çeviriyorsunuz, yerleşik kaydırma özelliğine güvenmiyorsunuz; bu nedenle, yarı görünür slaytlardan kaçınmak ve zamanlamayı düzeninizle senkronize tutmak için animasyonu dikkatlice tasarlamanız gerekiyor.

CSS slayt gösterileri için erişilebilirlik hususları

Erişilebilirlik, CSS tabanlı slayt gösterilerinin gerçekten parlayabileceği bir alandır.Çünkü karmaşık mantığın büyük bir kısmı, özel kodunuzdan özenle tasarlanmış ve test edilmiş platform davranışlarına kayıyor.

Yerel kaydırma özelliğine ve kaydırma yakalama özelliğine güvendiğinizde, klavye, dokunmatik ekran ve fare desteğini otomatik olarak devralırsınız.Kullanıcılar, herhangi bir olay dinleyicisi veya özel işleyiciye gerek kalmadan, sekme tuşuyla kaydırma çubuğunu kullanabilir, ok tuşlarını kullanarak hareket edebilir, dokunmatik ekranlarda kaydırma yapabilir ve tekerleği kullanarak kaydırma işlemini gerçekleştirebilirler.

Deneysel kaydırma düğmeleri ve işaretleyiciler bir adım daha ileri gidiyor.Tarayıcı, bu öğeleri uygun anlamlarla oluşturur, sekme sırasına entegre eder ve durumlarını korur; bu da ARIA özelliklerini yanlışlıkla unutmayı veya yanlış etiketlemeyi çok zorlaştırır. Ortaya çıkan slayt gösterisi kontrolleri, ev yapımı uygulamalara göre daha tutarlı bir şekilde erişilebilir olma eğilimindedir.

Dönen slayt gösterisi bölgelerinize anlamsal ipuçları ekleyebilirsiniz ve eklemelisiniz de.Örneğin, kabı şu şekilde işaretlemek: role="region" ve açıklayıcı bir aria-label Ekran okuyucu kullanıcılarının bileşenin neyi temsil ettiğini anlamalarına yardımcı olur:

<div class="carousel" role="region" aria-label="Product gallery">
<div class="carousel-item" aria-label="Slide 1 of 3">...</div>
</div>

Tüm etkileşimli öğeler için görünür odak göstergelerinin sağlanması hayati önem taşımaktadır.Kontroller ister kendi düğmeleriniz ve bağlantılarınız olsun ister tarayıcı tarafından oluşturulan sözde öğeler olsun, odak ana hatlarının kaldırılmadığından veya görülemeyecek kadar belirsiz hale getirilmediğinden emin olun. outline, outline-offset veya kontrast gereksinimlerini karşılamak için gerektiğinde arka plan değişiklikleri yapılabilir.

Temas hedefi boyutu da dikkate alınması gereken bir diğer pratik husustur.Kullanıcıların daha küçük ekranlarda okları veya noktaları dokunmakta zorlanmamaları için, yaygın erişilebilirlik yönergelerine uymak amacıyla kontrollerin en az 44x44 piksel boyutunda olmasına özen gösterin.

Otomatik oynatma işlevi için kullanıcılara net kontrol imkanı verin ve aşırı agresif hareketlerden kaçının.Fareyle üzerine gelindiğinde duraklatma özelliği veya açık bir duraklatma düğmesi sağlayın ve içerik yoğun veya metin ağırlıklıysa otomatik oynatmayı varsayılan olarak kapalı tutmayı düşünün. prefers-reduced-motionBu da, slayt gösterinizi daha geniş bir kitle için daha kullanışlı hale getirir.

CSS ile dairesel veya "sonsuz" kaydırmayı yönetme

İnsanların sıklıkla talep ettiği davranışlardan biri de dairesel kaydırma özelliğidir.Son slayta ulaştığınızda ve aşağı doğru kaydırmaya devam ettiğinizde, tıpkı sonsuzca dönen fiziksel bir atlıkarınca gibi, sorunsuz bir şekilde ilk slayta geri dönersiniz.

Günümüzde, bir kaydırma çubuğunu doğal olarak dairesel hale getiren doğrudan, tamamen CSS tabanlı bir özellik bulunmamaktadır.İçeriği çoğaltmadan, yerel bir kaydırma çubuğunun bir başlangıcı ve bir sonu olacaktır: son öğeye ulaştığınızda, daha fazla kaydırma sizi ileriye götürmez.

Teknik şartname yazarları, birçok kullanıcı arayüzü karuselinin bu döngüsel davranışı beklediğinin farkındadır.Ayrıca, yeni kaydırma düğmeleri ve işaretleyicilerinin standartlaştırılmasına benzer şekilde, döngüsel kaydırma için platform düzeyinde çözümlerin araştırılmasına yönelik aktif bir ilgi var. Bununla birlikte, şu anda bir tarayıcıdan kaydırma konumlarını tek bir CSS bildirimiyle doğal olarak sarmasını isteyemezsiniz.

Tamamen CSS tabanlı kurulumlarda, döngü simülasyonu genellikle dönüşümlerin canlandırılması (otomatik oynatma anahtar kare örneklerinde olduğu gibi) veya dizinin doğrusal bir şekilde sona ermesinin kabul edilmesi anlamına gelir.Eğer kesintisiz sonsuzluk kesinlikle gerekiyorsa ve içeriği çoğaltmak mümkün değilse, JavaScript şu an için hala daha esnek bir araçtır.

İyi haber şu ki, büyük ölçüde CSS tabanlı bir slayt gösterisini, gerçekten değer kattığı yerlerde az miktarda JavaScript ile birleştirmenizi engelleyen hiçbir şey yok.Günlük gezinme için scroll-snap ve CSS düğmelerini kullanabilir, ardından kaydırma konumunu izlemek ve uygun olduğunda sondan başa atlamak için birkaç satır kod ekleyebilirsiniz.

Zengin, kart tabanlı slayt gösterileri için HTML/CSS mi yoksa JavaScript mi?

Yeni geliştiricilerin sıkça karşılaştığı bir ikilem, daha karmaşık bir kart döngüsünün "mutlaka" JavaScript ile yazılıp yazılmaması gerektiğidir.İnsanlar genellikle basit görsellerin ötesine geçip çeşitli bileşenlere sahip duyarlı kartlar kullanmaya başladığınız anda, yalnızca CSS'nin yeterli olmaktan çıktığını düşünürler.

Pratikte, CSS scroll-snap özelliği, düz resimlerde olduğu gibi zengin kartlarda da aynı şekilde iyi çalışır.Her kart, kaydırma kabı içindeki bir blok olduğu sürece, ona kenetlenebilir, etrafında animasyon oluşturabilir ve üzerine ek stiller katmanlayabilirsiniz. Başlıklar, düğmeler, metin parçaları ve hatta gömülü medya, mekaniği temelde değiştirmez.

JavaScript'in en güçlü olduğu alanlar koşullu davranışlar ve karmaşık durumlardır.Eğer slayt gösterinizin kartları dinamik olarak filtrelemesi, slaytları yeniden sıralaması, diğer bileşenlerle senkronize olması, anında yeni içerik getirmesi veya son derece özelleştirilmiş mantığı desteklemesi gerekiyorsa ("bu noktaya tıklanırsa, tamamen alakasız bir kart göster"), o zaman JavaScript bu iş mantığını tek başına CSS'den daha kolay ifade edebilir.

Ancak, şaşırtıcı sayıda günlük kullanımda karşımıza çıkan kaydırıcılar, temelde doğrusal olarak ilerleyen statik öğe listeleridir.Bu gibi durumlarda, büyük bir JS kütüphanesi içe aktarmak yerine birkaç satır CSS kullanmak hem daha anlaşılır hem de performans açısından daha iyidir. Scroll-snap ve yeni sözde öğeleri anlamak, JavaScript'i gerçekten fayda sağladığı nadir durumlar için saklamanıza olanak tanır.

Ön uç geliştirme öğrenme aşamasındaysanız, CSS carousel'lerini varsayılan temel olarak kabul etmek harika bir alışkanlıktır.Öncelikle HTML ve CSS ile başlayın ve yalnızca belirgin bir sınırlamayla karşılaştığınızda script'e başvurun. Bu, platformun halihazırda neler yapabileceği hakkında daha fazla bilgi edinmenizi sağlar ve genellikle daha yalın, daha temiz kod tabanlarına yol açar.

Daha geniş bir perspektiften bakıldığında, kaydırma, hizalama, düğmeler, işaretleyiciler ve kaydırma durumu sorguları etrafında ortaya çıkan CSS özellikleri kümesi dikkat çekiyor. Bu, kaydırma çubuklarını (carousel) yoğun komut dosyası gerektiren bileşenlerden çoğunlukla bildirimsel bileşenlere dönüştürdü. Temel sayfalama davranışı için kaydırma yakalama özelliğine dayanarak, ::scroll-button() hem de ::scroll-marker() Desteklenen yerlerde ve özellik algılama ve erişilebilirlik en iyi uygulamalarını uygulayarak, geleneksel JS tabanlı kaydırıcılardan daha hızlı, sağlam ve bakımı daha kolay olan slayt gösterileri sunabilirsiniz; aynı zamanda döngüsel mantık veya gelişmiş etkileşimlerin gerçekten gerektirdiği yerlerde JavaScript'i karıştırmak için yeterli esnekliği de koruyabilirsiniz.