CSS karuseli bez JavaScripta: Kompletan vodič

Početna » piton » CSS karuseli bez JavaScripta: Kompletan vodič

Izrada kružnih prozora bez ijedne linije JavaScripta više nije naučna fantastikaModerni CSS vam pruža sve što vam je potrebno za kreiranje glatkih, dodirom prilagođenih slajderima koristeći CSS svojstvo za djelovanje dodirom koje se osjećaju kao da su nativne u pregledniku. Od pomicanja po ekranu do eksperimentalnih pseudo-elemenata koji automatski generiraju kontrole navigacije, možete isporučiti komponente s punim funkcijama, a istovremeno održavati svoj paket jednostavnijim, a svoj život jednostavnijim.

Ako ste se ikada borili s teškim JS carousel bibliotekama, problemima s hidratacijom ili posebnim potrebama pristupačnosti, CSS-only carousels su pravo osvježenje.Sa najnovijim specifikacijama (kao što je CSS Overflow Level 5) i dobro uspostavljenim funkcijama kao što su scroll-snap-type, sada je realno isporučivati ​​produkcijski spremne karusele koji su brzi, dostupni putem tastature i otporni kada je JavaScript onemogućen.

Zašto moderni CSS čini JavaScript karuselje opcionalnim

Godinama je podrazumijevani odgovor na pitanje „kako da napravim karusel?“ bio „uzmi JS biblioteku“.Swiper, Slick, Glide, Bootstrapov carousel i mnogi drugi riješili su problem žongliranjem slušača događaja, tajmera, posmatrača promjene veličine i ARIA uloga umjesto vas - ali su također ubacili dodatne kilobajte u vaš paket i uveli još jednu zavisnost koju treba održavati.

Danas je CSS tiho uhvatio korak s najčešćim slučajevima upotrebe karusela.Pomoću nekoliko svojstava, možete pretvoriti običan horizontalni skroler u paginirano, iskustvo pomjeranja po stranicama koje radi s kotačićem miša, trackpadom, strelicama na tastaturi i prevlačenjem prstom. Nema slušača, nema preoblikovanja uzrokovanih JS logikom i nema uvjeta utrke s hidratacijom u okvirima.

Osnovna ideja je jednostavna: tretirate svoj karusel kao područje koje se može pomicati, a ne kao magična komponenta koja se teleportira između slajdova. CSS zatim "pomaže" skrolovanju pomoću tačaka snap-a, glatkih prelaza i, u najnovijoj specifikaciji, ugrađenih dugmadi i markera koje preglednik ubrizgava u DOM kao prave interaktivne elemente.

Ova promjena ima velike posljedice na performanse i otpornostCSS karusel i dalje savršeno funkcioniše kada je JS blokiran, ne uspijeva se učitati ili ga je korisnik onemogućio. Mehanizam za skrolovanje u samom pregledniku obavlja većinu teškog posla, što je visoko optimizovano u svakom većem mehanizmu i podešeno za uređaje niske potrošnje energije i alate za pristupačnost.

Osim toga, CSS funkcije poput :has(), raspored mreže i animacije pokretane pomicanjem uključuju se u isto područje za pomicanje, što vam omogućava da kreirate sofisticirane indikatore slajdova, otkrivanja sadržaja ili paralaksu bez spajanja tri različita sistema (vašeg koda, logike biblioteke i skrolovanja preglednika) na krhke načine.

Osnovni gradivni blok: Snap za pomicanje za CSS-samo karusele

U srcu CSS-only carousel-a je modul Scroll Snap., što vam omogućava da definišete „magnetne“ tačke na koje bi se pozicija skrolovanja trebala zaključati nakon što korisnik prestane sa skrolovanjem. Umjesto da se nalazi na pola puta između dva slajda, prikaz se prebacuje na najbliži, dajući taj klasični osjećaj klizača.

HTML struktura može biti minimalna: kontejner koji se horizontalno skroluje, plus niz elemenata slajda unutar njega. Ne morate čak ni svakoj slici ili kartici dati zasebnu klasu ako je vaše označavanje konzistentno - iako imenovanje vaših elemenata često pomaže u stiliziranju i pristupačnosti:

Primjer strukture za osnovni kružni prikaz slika moglo bi se zamisliti kao omotač poput <ul class="carousel"> sa višestrukim <li> stavke, svaka sadrži sliku ili karticu. Magija se krije u CSS-u:

Kontejner definirate kao horizontalni fleksibilni raspored s omogućenim skrolovanjem i odredite da treba da se pričvrsti duž x ose:

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

Svaki pojedinačni slajd zatim otkriva poziciju snap-a, obično u centru ili na početku prikaza, i postavlja fiksnu osnovu tako da se jedan ili više njih pojavljuje po prikazu:

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

Ovaj uzorak vam već daje iznenađujuće kompletan karuselKorisnici mogu prevlačiti prstom na mobilnom uređaju, skrolati mišem ili trackpadom, a prikaz će se uvijek smjestiti na najbliži slajd. Nema JS-a koji prati događaje skrolovanja ili ručno podešava pozicije.

Da biste kreirali višeartikularne karuselje (poput traka proizvoda), potrebno je samo podesiti fleksibilnu osnovu.Na primjer, možete prikazati tri stavke po prikazu s malo razmaka koristeći nešto poput flex: 0 0 calc(33.333% - 1rem) plus bočne margine. Funkciji Scroll Snap nije važno da li je svaka „stranica“ jedan slajd pune širine ili grupa manjih kartica.

Svojstva kao što su object-fit: cover korisni su pri radu sa sirovim slikama, osiguravajući da popunjavaju područje slajda bez rastezanja. U kombinaciji s fiksnim omjerom širine i visine, možete dobiti kružne slike slika koje ostaju vizualno konzistentne na bilo kojoj veličini ekrana.

Od običnih skrolera do vrtuljaka s osjećajem izvornog sadržaja

Goli karusel sa pomicanjem i pričvršćivanjem već se čini dobrim, ali moderne specifikacije idu korak dalje, posebno u Chromeu 135+ gdje nacrt CSS Overflow Level 5 počinje da se pojavljuje kao stvarna funkcija. Specifikacija tretira karusel kao područje za skrolovanje sa opcionim, generisanim korisničkim interfejsom od strane pretraživača oko njega.

U tom modelu, "vrteška" je jednaka: jednom skroleru plus do dva seta mogućnosti.— dugmad za skrolovanje i markeri za skrolovanje. Oba su kreirana pomoću CSS pseudo-elemenata, ali preglednik emituje stvarne DOM srodne elemente pored vašeg skrolera tako da se ponašaju kao izvorne kontrole.

Ključno je da preglednik umjesto vas upravlja semantikom, redoslijedom fokusa i stanjem.Ubrizgani elementi imaju odgovarajuće uloge, mogu se tabirati u razumnom redoslijedu i odražavaju trenutnu poziciju skrolovanja. To znači da repliciranje istog nivoa pristupačnosti ručno kreiranom JS bibliotekom nije trivijalno; trebali biste ARIA atribute, ponašanje fokus grupe, navigaciju tastaturom i najave regija uživo koje sve rade zajedno.

Čak i ako još niste spremni osloniti se na eksperimentalne dijelove, ovaj smjer je važan.To signalizira da se karusel, tabovi, scrollspy komponente i slični UI obrasci uzdižu na nivo "građana prvog reda" u CSS-u, što će postepeno smanjivati ​​potrebu za prilagođenim JavaScript glue kodom.

Krajnji rezultat je robusnija osnova za sve korisnike—uključujući ljude koji onemogućavaju JS, oslanjaju se na pomoćnu tehnologiju, imaju uređaje sa niskom potrošnjom energije ili pretražuju u nestabilnim mrežnim uslovima. Nativno skrolovanje plus CSS stilizovanje nadmašuju vidžete koji koriste mnogo skripti u svim tim scenarijima.

Dodavanje dugmadi za skrolovanje pomoću ::scroll-button()

Na nekim platformama već vidite male strelice pored traka za pomicanje, ali novi ::scroll-button() pseudo-element ide korak dalje i omogućava CSS-u da definiše namjenska dugmad „prethodno/sljedeće“ za bilo koje područje koje se može skrolovati, uključujući i karusel.

Ovi CSS-definirani dugmad za pomicanje ponašaju se drugačije od strelica za pomicanje stare školeUmjesto pomicanja sadržaja u malim koracima, oni preskaču otprilike 85% vidljivog područja po kliku. U vrtuljku pune širine, poravnatom po slajdu, to se osjeća gotovo identično kao dugme za navigaciju po slajdu.

Ako vam je zaista potrebno tačno kretanje jedne stavke, možete kombinovati opcije prikačivanja pomicanjemTipičan recept je scroll-snap-type: x mandatory na kontejneru i scroll-snap-stop: always na svakom djetetu koje se snap-uje. Na taj način, jednim pritiskom na dugme za pomicanje efektivno prelazite s jedne kartice na drugu.

Iz sintaktičke perspektive, dodavanje dugmadi za pomicanje izgleda veoma slično stiliziranju drugih pseudoelemenata.Izaberite element koji se može pomicati (npr. .carousel) i cilj ::scroll-button(left) or ::scroll-button(right) za predstavljanje kontrola za naprijed i nazad. Minimalni primjer:

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

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

Vrijednost sadržaja odvojena kosim crtama vam omogućava da obezbijedite i vizuelnu i pristupačnu oznakuPreglednik zatim kreira pravi <button> čvorove kao braće/sestre vašeg područja za pomicanje i postavlja vaš sadržaj unutar njih. Slobodni ste da ih pozicionirate i stilizirate kako želite, baš kao i bilo koji drugi element - koristeći apsolutno pozicioniranje, CSS mrežu ili čak pozicioniranje sidra.

Fokus stila je i dalje bitan ovdjeNa primjer, primjenom pravila kao što je .carousel::scroll-button(*):focus-visible { outline-offset: 5px; } Osigurava da kada korisnici pritisnu ovu dugmad pomoću tipke Tab, vide jasan pomak prstena fokusa od granice elementa, čime se očuvava upotrebljivost tastature i usklađenost sa WCAG-om.

Ispod haube, preglednik prati stanje dugmadi i dostupan raspon pomicanjaTo znači da ne morate brinuti o onemogućavanju dugmeta „prethodno“ kada ste na prvom slajdu ili dugmeta „sljedeće“ na kraju; platforma može obraditi te uslove na standardizovan način.

Markeri za pomicanje sa ::scroll-marker() za navigaciju pomoću tačaka ili oznaka

Vizuelni markeri - tačke ili sličice ispod trake - danas su gotovo očekivani od strane korisnika.. Novi ::scroll-marker() Pseudo-element vam omogućava generiranje tih indikatora isključivo pomoću CSS-a, pri čemu je svaki povezan s određenom stavkom na listi koja se može pomicati.

Za razliku od palca trake za pomicanje, markeri za pomicanje predstavljaju semantičke tačke interesa.Svaki marker ne odgovara samo poziciji u pikselima, već stvarnom podređenom elementu, što ga čini idealnim za scenarije poput sezona u TV seriji, kategorija proizvoda ili logičkih poglavlja u priči, a ne za svaki pojedinačni kadar.

Markeri se prikazuju kao važeći <a> elementi, što vam besplatno pruža dvije važne funkcije: navigaciju unutar stranice i ispravnu semantiku za čitače ekrana. Ponašaju se slično kao sidreni linkovi, ali s nekim poboljšanjima prilagođenim korištenju u kružnom prikazu.

Među tim poboljšanjima je i :target-current pseudo-klasa, što se podudara s trenutkom kada je odgovarajuća stavka trenutno prikazana ili se na drugi način smatra "aktivnim slajdom". Možete ga koristiti za isticanje aktivnog markera drugom pozadinom ili okvirom.

Da biste ovo povezali, prvo definirate gdje bi se trebala nalaziti grupa markera. koristeći scroll-marker-group svojstvo na kontejneru, obično prije ili poslije scrollera. Na primjer, scroll-marker-group: after; bi postavio markere nakon regije karusel u DOM-u.

Zatim ciljate pojedinačnu djecu koja bi trebala generirati markereAko su vaši slajdovi <li> elementi, nešto poput .carousel > li::scroll-marker će poslužiti. Uobičajeni obrazac je kreiranje praznih tačaka:

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

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

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

Preglednik se brine o generiranju <a> markere, grupišući ih u namjenski kontejner ::scroll-marker-group, i njihovo prikazivanje kao elemenata po kojima se može kretati pomoću tastature, a koji se ponašaju kao fokusna grupa. Čitači ekrana mogu ih prikazati slično kao tablista: pomičete fokus između markera i aktivirate ih da biste prešli na određeni slajd.

Markeri nisu ograničeni na tačke. Možete postaviti content brojevima ("1", "2"itd.), oznake koje ljudi mogu čitati poput „Sezona 1“ ili „Poglavlje 3“, ili čak slike u tekstu za kreiranje galerija sličica za rasporede s puno fotografija, kao što su galerije proizvoda e-trgovine.

Kombinovanje dugmadi, markera i rezervnih strategija

Kada kombinujete dugmad za skrolovanje i markere na vrhu karusel-a za skrolovanje, dobijate komponentu koja se čini nerazlučivom od JS rešenja., ali je lakši za održavanje i isporučuje se s manje pokretnih dijelova. Korisnici mogu kliknuti na strelice, dodirnuti grafičke oznake, prevući prstom po ekranima osjetljivim na dodir ili koristiti navigaciju pomoću tastature - sve uz dosljedno ponašanje.

Ova kombinacija također rješava uobičajene probleme s performansama i korisničkim iskustvom.Budući da nijedan skript ne koordinira promjene slajdova, ne dolazi do ručnog mijenjanja rasporeda. scrollLeft podešavanja ili tajmeri koji se aktiviraju u nezgodnim trenucima. CLS (Kumulativno pomjeranje rasporeda) je smanjen jer je DOM stablo spremno od početka i ne ubrizgavate ili mjerite elemente kasno u životnom ciklusu.

Međutim, postoji jedna kvaka: ::scroll-button i ::scroll-marker su još uvijek eksperimentalni. i trenutno se pojavljuju samo u Chromeu 135+ iza eksperimentalnih zastavica. To znači da apsolutno morate dizajnirati elegantne rezervne opcije ako ih planirate koristiti na produkcijskim stranicama.

Detekcija karakteristika putem @supports je tvoj najbolji saveznik ovdjeMožete prikazati tradicionalnu navigacijsku traku - linkove do #slide1, #slide2 i tako dalje - prema zadanim postavkama, zatim ga sakrijte kada su dostupne izvorne kontrole. Grubi konceptualni obrazac izgleda ovako:

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

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

U HTML-u je dovoljna jednostavna navigacija sa sidrenim linkovima.svaki slajd dobija id, a navigacija pokazuje na te ID-ove. Skakanje na sidro unutar kontejnera za pomicanje se lijepo integrira s ponašanjem pomicanja, tako da se slajd uredno pomiče nakon skoka.

To znači da možete uživati ​​u prednostima eksperimentalnih pseudoelemenata u podržanim preglednicima.—potpuno nativna dugmad, markeri i kuke za stanje pomicanja — a istovremeno nude potpuno funkcionalno iskustvo na drugim mjestima. Nijedan korisnik ne ostaje zaglavljen s neupotrebljivim klizačem.

Osim toga, sve ovo i dalje radi kada je JavaScript onemogućen., jer se oslanjate isključivo na HTML sidra, CSS ponašanje skrolovanja i mehanizam za skrolovanje preglednika. Za mnoge UX obrasce - galerije, vremenske linije, detaljne prikaze - to je više nego dovoljno.

Vrteške s automatskim reproduciranjem samo putem CSS-a s animacijama ključnih kadrova

Jedna uobičajena karakteristika koju ljudi očekuju od kružnih ekrana je automatsko pokretanje.—slajdovi se automatski pomiču nakon nekoliko sekundi. Iako se ovo često implementira pomoću JavaScript tajmera, ovo ponašanje možete aproksimirati i korištenjem čistih CSS animacija.

Trik je u animiranju transformacije fleksibilnog reda koji sadrži sve slajdoveZa fiksni broj slajdova, definirate vremensku liniju ključnih kadrova gdje se traka zadržava na svakoj poziciji slajda neko vrijeme, a zatim preskače na sljedeći. Nešto poput:

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

Zatim primjenjujete ovu animaciju na omotač koji sadrži elemente vašeg slajda, npr. .autoplay-carousel { display: flex; animation: slide 12s infinite; }Procentni rasponi definiraju vrijeme "zadržavanja" na svakom slajdu kako bi sadržaj bio čitljiv prije prelaska na sljedeći slajd.

Ključno je dodati način da korisnici pauziraju automatsku reprodukcijuJednostavan, ali efikasan obrazac je pauziranje prilikom zadržavanja miša pomoću .autoplay-carousel:hover { animation-play-state: paused; }, tako da korisnici računara mogu zaustaviti kretanje kada interaguju sa sadržajem.

Razmatranja pristupačnosti idu još dalje s postavkama kretanjaPoštovanje prefers-reduced-motion smatra se najboljom praksom, tako da možete potpuno onemogućiti animaciju za korisnike koji preferiraju manje kretanja:

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

Iako CSS rješenja za automatsko pokretanje ne mogu lako obraditi sve granične slučajeve koje JS može— poput zaista dinamičkog brojanja slajdova ili složene logike pauziranja/nastavka koju pokreće korisnik — iznenađujuće su solidni za jednostavne, statične karusele kada želite u potpunosti izbjeći skriptiranje.

Poređenje CSS-only i JavaScript karusela

Odluka između CSS-a i JavaScripta za carousel nije rješenje tipa "sve ili ništa".; zavisi od vaših zahtjeva, publike i budžeta za održavanje. Ali ravnoteža se uveliko promijenila u korist CSS-a u mnogim scenarijima iz stvarnog svijeta.

Sa stanovišta performansi, CSS karusel-i su jasni pobjednici.Nema parsiranja ili izvršavanja bibliotečkog koda, nema slušača događaja pri svakoj interakciji skrolovanja, niti ponovnih izračuna rasporeda tokom izvođenja koje pokreću skriptovane prilagodbe. Mehanizam za skrolovanje preglednika napisan je u visoko optimizovanom izvornom kodu i podešen za sve, od vrhunskih desktop računara do telefona niske potrošnje energije.

Što se tiče pristupačnosti, nove CSS funkcije karusel značajno podižu ljestvicu.Dugmad i markeri za pomicanje koje pruža preglednik dolaze s unaprijed programiranim ARIA ulogama, ponašanjem tastature i najavama koje bi se inače morale pažljivo rekreirati u JavaScriptu. Čak i bez toga, vrtuljak za pomicanje i privlačenje i dalje može biti dostupan pomoću uloga i oznaka.

S druge strane, JavaScript ostaje koristan za vrlo napredne obrasceAko vam je potrebna složena logika automatskog reproduciranja, analitičke kuke, prilagođena fizika ili sinhronizacija više karusela sa zajedničkim stanjem (npr. glavna slika plus red sličica plus vanjsko paginiranje), pristupi vođeni skriptama i dalje mogu biti fleksibilniji.

Međutim, ključni uvid je da mnogi „svakodnevni“ kružni radovi zapravo ne zahtijevaju ovaj nivo složenosti.Jednostavna galerija proizvoda, slajder za preporuke ili traka „istaknutih objava“ obično se mogu implementirati pomoću funkcije „scroll snap“, nekoliko CSS pravila i opcionalnih izvornih kontrola – što vam štedi vrijeme pri preuzimanju zavisnosti od 50KB samo za kretanje između tri slajda.

Još jedno razmatranje je otpornost kada JavaScript zakaže.Carousel-i koji koriste samo CSS nastavljaju savršeno raditi čak i ako je JS blokiran korporativnim proxyjem, oštećen blokatorom oglasa ili jednostavno još nije učitan kada korisnik dođe na stranicu. Takvu vrstu elegantne degradacije teško je postići s bibliotekama koje zavise od faze inicijalizacije nakon učitavanja stranice.

Najbolje prakse pristupačnosti za CSS karusele

Čak i ako preglednik pomaže s nekim aspektima pristupačnosti, vi i dalje igrate ključnu ulogu. prilikom izrade CSS vrtuljka za sve upotrebljivog. Semantika, upravljanje fokusom i osjetljivost na pokret trebaju vam biti na prvom mjestu.

Prvo, dajte karuselu odgovarajuću orijentirnu tačkuOmotavanje u element sa role="region" i opisni aria-label kao što su „Galerija proizvoda“ ili „Istaknuti članci“ olakšavaju korisnicima čitača ekrana da pronađu i razumiju.

Svaki slajd može nositi i pristupačnu oznaku, na primjer putem aria-label navodeći „Slajd 1 od 3“, „Slajd 2 od 3“ i tako dalje. Na taj način, kada korisnik dođe na slajd, odmah dobija kontekst o svojoj poziciji u nizu.

Ne zaboravite vidljive indikatore fokusaBilo koji interaktivni element - bilo da je to ::scroll-button, a ::scroll-marker-generirana veza ili ručno sidro u vašoj rezervnoj navigaciji - potreban je jasan stil fokusa koji prolazi kroz smjernice za kontrast i ne uklanja se globalnim resetiranjem.

Ako koristite automatsku reprodukciju ili animacije pokretane pomicanjem, poštujte postavke kretanja. Upotreba prefers-reduced-motion Onemogućavanje ili pojednostavljivanje animacija nije opcionalno ako vam je stalo do korisnika sklonih mučnini kretanja, a dovoljno je lako intenzivnije efekte uključiti u medijski upit.

Konačno, razmislite o veličinama dodirnih metaBez obzira da li stilizirate izvorne markere za pomicanje ili vlastite navigacijske linkove, interaktivna područja trebaju biti veličine najmanje 44×44 CSS piksela. To obično znači velikodušno punjenje i razmak, a ne male krugove zbijene jedan do drugog.

Praktični tokovi rada, alati i budući pravci

Kako bi olakšali eksperimentiranje s CSS kružnim elementima, neki timovi su kreirali alate za konfigurisanje uživo. gdje možete prebacivati ​​prekidače - omogućiti dugmad za pomicanje, uključivati ​​markere, podešavati načine prianjanja - i odmah vidjeti ažurirani CSS potreban za tu konfiguraciju. Ova igrališta su fantastična za učenje kroz prljanje.

Uz konfiguratore, odabrane galerije CSS-om kreiranih demonstracija prikazuju šta je sve moguće.Naći ćete obrasce poput interfejsa s karticama, navigacije putem ScrollSpy-a, slajdova zasnovanih na koracima, galerija sličica i još mnogo toga, a svi dijele istu osnovu područja za pomicanje, plus pričvršćivanje i opcionalne kontrole.

Mnoge od ovih demo stranica namjerno se isporučuju bez JavaScripta da dokaže poentu: bogat, interaktivan korisnički interfejs je u potpunosti ostvariv samo HTML-om i CSS-om. Često otkrivaju svoje alate kroz @layer deklaracije, tako da možete pregledati i odabrati stilove koji odgovaraju vašem vlastitom sistemu dizajna.

Gledajući unaprijed, CSS platforma već radi na dva važna evolucijska puta.Prvo je „donesite vlastite elemente“, gdje umjesto oslanjanja na dugmad i markere generirane u pregledniku, moći ćete uključiti vlastite <a> i <button> označavanje, a istovremeno imati koristi od osnovne logike skrolovanja.

Ovo bi otvorilo vrata brendiranim, bogato stiliziranim kontrolama izgrađenim pomoću utility frameworkova. kao Tailwind, a pritom zadržavate semantiku i ponašanje vođeno platformom. U suštini biste ukrasili korisnički interfejs, ali biste omogućili da preglednik ostane mozak operacije.

Drugo veliko područje je ciklično ili beskonačno skrolovanjeMnogi kružni prikazi se danas "prelome" kada dođete do kraja, besprijekorno se vraćajući na prvi slajd. Čista implementacija ovoga je nezgodna, često uključuje duplirani sadržaj ili složenu logiku. Podrška na nivou platforme za ciklično skrolovanje omogućila bi preglednicima da elegantnije i efikasnije rukuju ponašanjem preloma.

Kako ove funkcije sazrijevaju i šire se izvan Chromea na druge pretraživače, jaz između onoga što "nativni CSS kružni meni" može da uradi i onoga što nude JavaScript biblioteke velike težine će se nastaviti smanjivati, čineći pristupe bez skripti zadanom početnom tačkom, a ne eksperimentom na rubu slučaja.

Sve u svemu, moderni CSS vam daje sve razloge da preispitate način na koji gradite kružne prozore (carousels).Počevši od jednostavnog rasporeda sa pomicanjem i prihvatom, dodavanjem eksperimentalnih dugmadi i markera gdje je to podržano, te primjenom najboljih praksi pristupačnosti, možete isporučiti responzivne, glatke i robusne klizače bez posezanja za JS ovisnošću. Za mnoge projekte to znači brže stranice, manje koda za održavanje i otpornije iskustvo za svakog korisnika.