Vytvářejte pokročilé CSS karusely bez JavaScriptu

Home » PYTHON » Vytvářejte pokročilé CSS karusely bez JavaScriptu

Vytváření karuselů pouze s moderním CSS už není snem— je to velmi reálná, produkční varianta, která často dokáže překonat klasické knihovny sliderů JavaScriptu. Díky funkcím, jako je přitahování rolování, animace řízené rolováním, experimentální pseudoprvky carousel a robustní primitiva přístupnosti, můžete dodávat lehké a odolné karusely, které stále působí hladce, interaktivně a elegantně.

Pokud vás už nebaví stahovat 50KB JavaScriptové balíčky jen pro zobrazení pár slajdů, tento průvodce vás provede tím, co pro vás dnešní CSS může udělat. Rozebereme si klíčové koncepty karuselů založených pouze na CSS, jak je propojit s funkcí scroll-snap a kdy se spolehnout na nové... ::scroll-button() a ::scroll-marker() pseudoprvky a jak přidat prvky v automatickém přehrávání nebo kruhovém chování a zároveň zacházet s přístupností a výkonem jako s prvky prvotřídních občanů.

Proč jsou karusely pouze s CSS konečně seriózní volbou

Po léta byl „kolotoč“ téměř synonymem pro „JavaScript plugin“Řešení jako Swiper, Glide nebo domácí slidery byly volbou: zvládaly navigaci, stav, podporu klávesnice a dotyková gesta, ale za cenu větší váhy, posluchačů událostí všude kolem a značného množství DOM gymnastiky.

Moderní CSS většinu této mezery tiše uzavřelo.. S vlastnostmi jako např scroll-snap-type a scroll-snap-align, můžete jakýkoli horizontální nebo vertikální scrollovací nástroj proměnit v stránkovaný zážitek. Specifikace CSS Overflow úrovně 5 navíc zavádí generování prohlížečem rolovací tlačítka a značky které se chovají jako plně funkční uživatelské rozhraní carousel, ale jsou deklarovány výhradně v CSS.

Velkým vítězstvím je, že za základní UX záležitosti se stává zodpovědný prohlížeč, nikoli váš JavaScriptový kód.: fyzika rolování, navigace pomocí klávesnice, pořadí fokusu a dokonce i role ARIA pro ovládací prvky karuselu. V mnoha případech je skutečně těžké vytvořit něco přístupnějšího a funkčnějšího, než co vám platforma nyní nabízí ihned po instalaci.

Další velkou výhodou CSS carouselů je odolnost.Pokud se JavaScript nenačte, uživatelé s blokovaným nebo zakázaným skriptem stále získají perfektně použitelnou sadu posouvatelných položek. Nedochází k žádné hydrataci, žádnému posunu rozvržení způsobenému pozdním načítáním kódu a mnohem méně pohyblivých částí, které se mohou časem pokazit.

Základní stavební blok: posouvatelný kontejner s funkcí Scroll Snap

Každý karusel s CSS kódem začíná jako běžný posuvný kontejner.Představte si jednoduchý seznam snímků, které lze vodorovně posouvat. Poté přidáte přichycení posouvání, aby se zobrazovaná oblast přirozeně zafixovala na každém snímku.

Minimální HTML struktura pro horizontální karusel je záměrně jednoduchá: obalový element a uvnitř něj řada prvků snímku. Můžete použít ul s li prvky, nebo div těhotná divs—CSS odvádí těžkou práci, takže nepotřebujete speciální třídy pro každé dítě, pokud to váš návrh nevyžaduje.

Základní nastavení přichytávání rolování by mohlo v CSS vypadat taktoza předpokladu zobrazení na celou šířku s jedním snímkem:

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

Zde kontejner používá display: flex zarovnat své děti vodorovně, a overflow-x: auto pro povolení rolování. Kouzlo spočívá v scroll-snap-type: x mandatory, který říká prohlížeči, že horizontální posouvání by se mělo vždy zastavit na platném bodě uchopení a v scroll-snap-align: center na každém snímku, který definuje tyto body přichycení.

Tato kombinace flexboxu a scroll snap se okamžitě jeví jako karusel.: uživatelé posouvají nebo přejíždějí prstem a nejbližší snímek se zacvakne na místo. Protože využívá nativní posouvání, funguje dotykový vstup na telefonech a tabletech jednoduše bez jakýchkoli obslužné rutiny gest nebo další knihovny.

Nejste omezeni na jednu položku na zobrazeníU vícesloupcových karuselů, které zobrazují několik karet najednou, můžete použít flexibilní šířku položek, například:

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

Tato varianta umožňuje zobrazit například tři karty v jednom zobrazovacím poli s trochou mezer., a přitom stále těží z funkce přichycení. Uživatelé procházejí stránkami karet, nikoli jednotlivými snímky, což funguje skvěle pro seznamy produktů nebo galerie.

Posuvná tlačítka s pseudoelementem ::scroll-button()

Jakmile máte scrollovací nástroj, další věc, kterou většina lidí chce, jsou explicitní navigační tlačítka.—předchozí a další ovládací prvky, které posouvají karusel doleva nebo doprava. Tradičně byste vytvořili <button> prvky, vázat události kliknutí a vypočítat, o kolik se má posunout.

Specifikace CSS Overflow 5 představuje ::scroll-button(), pseudoelement, který umožňuje prohlížeči vykonávat veškerou tu těžkou práciI když je tato funkce aktuálně dostupná od verze Chrome 135 (a obvykle zpočátku pod experimentálními vlajkami), je to letmý pohled na to, jak budou karusely vytvářeny v budoucnu.

Tlačítka pro posouvání deklarujete stejným způsobem jako jakýkoli jiný pseudoelement.Například pro generování levého a pravého tlačítka pro váš karusel:

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

Když se tento CSS použije, prohlížeč ve skutečnosti vytvoří skutečné <button> prvky jako sourozenci kontejneru scroll, propojí je s posouvačem, přiřadí jim příslušné role a nastaví jejich chování. Jediné kliknutí obvykle posune přibližně 85 % oblasti posouvání, což se ve většině karuselových rozvržení jeví jako „stránka“.

Pokud váš návrh očekává přesně jeden prvek v plné šířce na jedno kliknutí, můžete tyto pseudoelementy kombinovat s přísnějším přichycením ke každému potomkovi přidáním scroll-snap-stop: alwaysTo nutí výřez, aby se zastavil na hranicích položek, a ne v polovině.

Vlastnost content zde slouží dvojí funkci.: první hodnota je to, co uživatelé vizuálně vidí (v tomto případě znaky šipek), a druhý řetězec je přístupný záložní text, který lze zobrazit asistenčním technologiím. Tato tlačítka si můžete libovolně upravovat stylem a umístěním pomocí CSS nebo použít funkce jako anchor() aby se přesně zarovnaly s vaším rozvržením.

Značky posouvání pomocí ::scroll-marker() a ::scroll-marker-group

Dalším běžným požadavkem jsou tečky nebo popisky pod karuselem – často nazývané „odrážky stránkování“ nebo „značky“Ukazují, kolik položek existuje a která z nich je aktuálně viditelná, a umožňují uživatelům přejít přímo na konkrétní snímek.

Jedno ::scroll-marker() pseudo-element vám poskytuje tyto indikátory bez nutnosti ručního generování kotevních odkazů nebo rozpětíKaždý ukazatel je v podstatě navigační <a> prvek vytvořený prohlížečem, který odkazuje na odpovídající položku pro posouvání a podílí se na navigaci pomocí klávesnice a čtečky obrazovky.

Chcete-li to nastavit, řeknete prohlížeči, kam má umístit skupinu značek. s scroll-marker-groupa na kterých prvcích vytvářet značky. Minimální konfigurace by mohla vypadat takto:

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

Prohlížeč vytváří ::scroll-marker-group kontejner jako sourozence scrolleru a naplní ho jedním markerem pro každé vybrané dítěV tomto jednoduchém příkladu jsou značky vykresleny jako prázdné tečky, ale stejně snadno můžete použít text jako „Série 1“, ikony nebo dokonce miniatury změnou content vlastnictví.

Co dělá tyto značky výjimečnými ve srovnání s obyčejným posuvníkem je, že se jedná o skutečné navigační odkazy. Umožňují uživatelům přejít přímo na smysluplné pozice a mají užitečnou sémantiku: existuje :target-current stav označující, která značka odpovídá aktuálně zobrazenému nebo přichycenému snímku. Podpora klávesnice se chová jako fokusní skupina a čtečky obrazovky je mohou zobrazit jako ovládací prvek podobný seznamu tabulek.

Tato strategie je obzvláště účinná, když váš scroller představuje logické bloky spíše než jednotlivé položky.Například místo vytvoření deseti značek pro deset epizod můžete vytvořit dvě značky, které skočí na začátek první a druhé série. Můžete se svobodně rozhodnout, které „zajímavé body“ by měly být adresovatelné.

Kombinace tlačítek a značek do plnohodnotného uživatelského rozhraní karuselu

Když vložíte ::scroll-button() a ::scroll-marker() společně na stejném scrolleru, získáte uživatelské rozhraní, které uživatelé okamžitě rozpoznají jako karusel: ovládací prvky předchozí/následující, řada značek ukazujících, jak daleko se snímky nacházejí, a plynulé přepínání mezi snímky.

Klíčový rozdíl oproti klasickým JavaScriptovým sliderům spočívá v tom, že většina této logiky se nyní nachází v prohlížeči.Tlačítka a značky jsou generované prvky se správnými rolemi ARIA, správně integrované do pořadí tabulací a s příběhem přístupnosti navrženým týmy základního prohlížeče, nikoli nově vynalézaným pro každý web.

Tento přístup přináší několik velmi praktických výhodFunguje s vypnutým JavaScriptem, eliminuje blikání a problémy s načasováním kvůli hydrataci, snižuje kumulativní posun rozvržení, protože ovládací prvky jsou známy již v době rozvržení CSS, a bezproblémově se integruje s animacemi řízenými posouváním nebo dotazy na stav posouvání, pokud chcete přidat šmrnc.

Na dotykových zařízeních je ovládání přirozeně přátelské k prstům protože kontejner pro posouvání je stále jen nativní posouvač. Na počítačích funguje kolečko myši a vstup z klávesnice podle očekávání a indikátory fokusu na generovaných ovládacích prvcích lze upravit tak, aby splňovaly vaše požadavky na design a přístupnost.

Z pohledu údržby se „dělejte méně, dosahujte více“ stává docela přesným popisemMísto udržování logiky vícenásobných implementací karuselu napříč projekty se spoléháte na sdílené, standardizované funkce platformy, které se budou v průběhu času vylepšovat bez nutnosti další práce z vaší strany.

Fungování Scroll Snap v reálných projektech

I když na chvíli ignorujete nové pseudoelementy, samotný scroll-snap je pro mnoho produkčních carouselů už tak dost dobrý.Podpora prohlížeče pro funkci scroll-snap v moderních enginech je solidní a chování je předvídatelné jak při použití kolečka myši, tak při dotykových gestech.

V nejjednodušším scénáři by váš HTML karusel mohl být div s řadou obrázků uvnitřTomuto kontejneru můžete dát třídu jako .carousel a nechat podřízené obrázky neklasifikované; CSS se stará o zarovnání a rolování.

Zapnutím scroll-behavior: smooth na kontejneru, posouvání mezi body přichycení se stává příjemně animovaným místo skákavého. To je patrné zejména tehdy, když uživatelé kliknou na značky nebo kotevní odkazy, nebo když v hybridních nastaveních programově spouštíte posouvání.

Každá klíčová vlastnost funkce scroll-snap hraje velmi odlišnou roli.. scroll-snap-type definuje osu a zda je přichycení povinné, nebo jen nápověda; scroll-snap-align u podřízených objektů určuje, kde se mají zamknout do pohledu (začátek, střed, konec); a scroll-snap-stop: always Zabraňuje prohlížeči v přeskakování bodů přichycení při rychlém posouvání.

V kombinaci s těmito vlastnostmi můžete přesně nastavit, jak by se měl karusel chovat.– od jemného a shovívavého přichycení vhodného pro rozsáhlé sekce obsahu až po striktní chování po jednotlivých snímcích, ideální pro hlavní bannery, kde se nikdy nechcete ocitnout „mezi“ položkami.

Protože se jedná o čistý CSS, můžete rozvržení snadno responzivně přizpůsobit.S mediálními dotazy můžete přepínat z jednoho snímku na zobrazení na úzkých obrazovkách na několik snímků na zobrazení na širokých počítačích pouhou změnou flex-basis položek. Nejsou potřeba žádné zarážky JavaScriptu, posluchače pro změnu velikosti ani přepočítávání šířky.

Experimentální pseudoelementy a detekce prvků

Nové pseudoprvky orientované na karusel –::scroll-button(), ::scroll-marker() a ::scroll-marker-group—jsou silné, ale stále relativně svěžíV době psaní tohoto článku jsou k dispozici v Chromu 135 a novějších, často s vyžadovanými experimentálními příznaky, a časem budou distribuovány i do dalších prohlížečů.

Protože podpora zatím není univerzální, produkční weby by se měly spoléhat na detekci funkcí a elegantní záložní řešení.CSS vám poskytuje @supports at-rule, které umožňuje podmíněně aplikovat pravidla na základě rozpoznávání vlastností.

Můžete definovat jednoduchý záložní navigační pruh– sada odkazů nebo tlačítek, která se nacházejí pod karuselem – a poté tento proužek skryjí, pokud prohlížeč podporuje nativní tlačítka pro posouvání. Například:

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

Zde .carousel-nav může obsahovat ručně psané kotevní odkazy směřující na snímky prostřednictvím ID, jako <a href="#slide1">1</a>V prohlížečích, které rozumí nové vlastnosti scroll-button, se zobrazí nativní ovládací prvky a záložní navigace je skrytá; ve starších prohlížečích zůstává kotevní navigace zachována, spárovaná s funkcí scroll-snap pro dokonale použitelný zážitek.

Tato hybridní strategie umožňuje bezpečné experimentování s funkcemi karuselu nové generace již dnes., aniž byste se museli vázat na konkrétní engine nebo konfiguraci příznaků. S postupným zvyšováním podpory v prohlížečích se můžete více spoléhat na pseudoelementy a ořezat některé ruční úpravy.

Automaticky přehrávané karusely pouze v CSS s animacemi klíčových snímků

Dalším častým požadavkem je automatické přehrávání – karusel, který se posouvá sám od sebe a volitelně se pozastaví při najetí myší na něj.I když má automatické přehrávání určité výhrady ohledně UX a přístupnosti, je možné ho dosáhnout čistě pomocí CSS animací.

Jednoduchý vzorec je animovat horizontální posun vaší slide tracku.

@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; }

V tomto příkladu klíčové snímky stráví na každém posunu určitou dobu, než se přesunou na další snímek.Skladba se na konci přehrává zpět a vytváří dojem opakující se prezentace přes čtyři snímky. Najetím myší na karusel se animace pozastaví, takže si uživatelé mohou prohlížet obsah, aniž by museli neustále čelit pohybu.

Respektovat uživatele, kteří preferují omezený pohyb z důvodu zdraví nebo pohodlí, můžete animaci zabalit do mediálního dotazu:

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

Díky tomu je zajištěno, že u systémů, kde je požadován snížený pohyb, zůstanou kluzáky statické., čímž se efektivně deaktivuje automatické přehrávání a zároveň se stále umožňuje ruční posouvání nebo navigace pomocí tlačítek/značek, kde je to možné.

Jedním důležitým kompromisem je, že automatické přehrávání založené na klíčových snímcích se automaticky neintegruje s funkcí scroll-snap.Obsah překládáte ručně, místo abyste se spoléhali na nativní rolování, takže musíte animaci navrhnout pečlivě, abyste se vyhnuli poloviditelným slajdům a udrželi načasování synchronizované s rozvržením.

Aspekty přístupnosti pro CSS karusely

Přístupnost je oblast, kde mohou karusely založené na CSS skutečně zazářit, protože velká část těžké logiky se přesouvá z vašeho vlastního kódu do chování platformy, které bylo pečlivě navrženo a otestováno.

Když se spoléháte na nativní rolování a přichytávání rolování, automaticky zdědíte podporu klávesnice, dotykového ovládání a myši.Uživatelé mohou přejít do posouvacího panelu stisknutím klávesy Tab, pohybovat se pomocí kláves se šipkami, přejíždět prstem po dotykových obrazovkách a posouvat kolečkem, a to bez použití posluchačů událostí nebo vlastních obslužných rutin.

Experimentální tlačítka a značky pro posouvání jdou ještě o krok dálProhlížeč je vytváří s vhodnou sémantikou, integruje je do pořadí tabulací a udržuje jejich stav, takže je velmi obtížné nechtěně zapomenout na atributy ARIA nebo je špatně označit. Výsledné ovládací prvky typu „carousel“ bývají konzistentněji dostupné než implementace typu „home-rolled“.

Stále můžete a měli byste přidávat sémantické nápovědy do oblastí karuseluNapříklad označení kontejneru pomocí role="region" a popisný aria-label pomáhá uživatelům čtečky obrazovky pochopit, co daná komponenta představuje:

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

Zajištění viditelných indikátorů zaměření pro všechny interaktivní prvky zůstává klíčovéAť už se jedná o vaše vlastní tlačítka a odkazy nebo pseudoelementy generované prohlížečem, ujistěte se, že obrysy fokusu nejsou odstraněny nebo příliš nenápadné. Upravte outline, outline-offset nebo změny pozadí dle potřeby pro splnění požadavků na kontrast.

Velikost dotykového cíle je dalším praktickým faktoremSnažte se o ovládací prvky o rozměrech alespoň 44×44 pixelů, aby splňovaly běžné pokyny pro přístupnost, a aby uživatelé neměli problém s klepáním na šipky nebo tečky na menších obrazovkách.

U všech funkcí automatického přehrávání dejte uživatelům jasnou kontrolu a vyhněte se příliš agresivnímu pohybu.Zajistěte tlačítko pro pozastavení při najetí myší nebo explicitní tlačítko pro pozastavení a zvažte vypnutí automatického přehrávání ve výchozím nastavení, pokud je obsah hustý nebo obsahuje hodně textu. V kombinaci s prefers-reduced-motion, díky tomu bude váš karusel pohodlnější pro širší publikum.

Zvládání kruhového nebo „nekonečného“ rolování pomocí CSS

Jedním z chování, které si lidé často přejí, je kruhové rolování.Když se dostanete na poslední snímek a posunete se dál, plynule se vrátíte k prvnímu, jako by se fyzický kolotoč točil donekonečna.

Dnes neexistuje žádná přímá, čistě CSS vlastnost, která by dělala kontejner scroll inherentně kruhovým.Bez duplikování obsahu bude mít nativní scroller začátek a konec: jakmile dosáhnete poslední položky, další rolování vás jednoduše neposune vpřed.

Autoři specifikací si uvědomují, že mnoho UI carouselů očekává toto chování v cyklech.a existuje aktivní zájem o prozkoumání řešení na úrovni platformy pro cyklické rolování, podobně jako byla standardizována nová tlačítka a značky rolování. Nicméně v současné době nelze po prohlížeči požadovat, aby nativně zalamoval pozice rolování pomocí jediné deklarace CSS.

V čistě CSS nastaveních simulace smyčky obvykle znamená animaci transformací (jako v příkladech klíčových snímků automatického přehrávání) nebo přijetí lineárního konce sekvence.Pokud je bezproblémová nekonečnost absolutně nezbytná a nelze duplikovat obsah, JavaScript je prozatím stále flexibilnějším nástrojem.

Dobrou zprávou je, že vám nic nebrání v kombinaci karuselu řízeného převážně CSS s trochou JavaScriptu tam, kde to skutečně přidává hodnotu.Pro každodenní navigaci se můžete spolehnout na funkce scroll-snap a tlačítka CSS a poté přidat několik řádků skriptu pro sledování pozice rolování a v případě potřeby přeskočit z konce na začátek.

HTML/CSS versus JavaScript pro bohaté kartotéky založené na kartách

Častým dilematem novějších vývojářů je, zda složitější karusel karet „musí“ být napsán v JavaScriptu.Lidé si často představují, že jakmile překročí rámec jednoduchých obrázků a přejdou k responzivním vizitkám s různými komponentami, samotné CSS přestane být životaschopné.

V praxi funguje CSS scroll-snap stejně dobře pro bohaté karty jako pro obyčejné obrázky.Dokud je každá karta blokem v kontejneru scrollu, můžete se k ní přichytit, animovat kolem ní a vrstvit na ni další styly. Nadpisy, tlačítka, fragmenty textu a dokonce i vložená média zásadně nemění mechaniku.

JavaScript vyniká v podmíněném chování a komplexních stavech.Pokud váš karusel musí dynamicky filtrovat karty, měnit pořadí snímků, synchronizovat se s dalšími komponentami, načítat nový obsah za chodu nebo podporovat vysoce přizpůsobitelnou logiku („pokud se klikne na tuto tečku, zobrazí se tato zcela nesouvisející karta“), pak JavaScript dokáže tuto obchodní logiku vyjádřit snadněji než samotný CSS.

Překvapivý počet každodenních posuvníků jsou však v podstatě statické seznamy položek, které se lineárně posouvajíV těchto případech je použití několika řádků CSS namísto importu velké JS knihovny jednak jednodušší na zvážení a jednak lepší z hlediska výkonu. Pochopení scroll-snap a novějších pseudoelementů vám umožňuje vyhradit si JavaScript pro vzácné případy, kdy se skutečně vyplatí.

Pokud se stále učíte front-end vývoj, je skvělým zvykem používat CSS carousels jako výchozí výchozí nastavení.Začněte s HTML a CSS a po skriptech sahejte pouze tehdy, když narazíte na jasné omezení. To vás naučí více o tom, co platforma již umí, a často vede k štíhlejším a čistším kódovým základnám.

S odstupem času se zaměříme na nově vznikající sadu funkcí CSS týkajících se rolování, přichytávání, tlačítek, značek a dotazů na stav rolování. transformoval karusely z widgetů zaměřených na skripty na převážně deklarativní komponenty. Spoléháním se na scroll-snap pro základní stránkovací chování, použití ::scroll-button() a ::scroll-marker() Tam, kde je to podporováno, a s využitím osvědčených postupů pro detekci funkcí a přístupnost, můžete dodávat karusely, které jsou rychlé, robustní a snáze se udržují než tradiční slidery řízené JS – a zároveň si zachovat dostatečnou flexibilitu pro použití v JavaScriptu tam, kde to cyklická logika nebo pokročilé interakce skutečně vyžadují.