CSS Carousels bez JavaScripta: Potpuni vodič

Početna » Piton » CSS Carousels bez JavaScripta: Potpuni vodič

Izrada kružnih prozora bez ijedne linije JavaScripta više nije znanstvena fantastikaModerni CSS vam pruža sve što vam je potrebno za izradu glatkih, dodirom prilagođenih klizača pomoću CSS svojstvo dodirne akcije koje se osjećaju kao da su izvorne u pregledniku. Od pomicanja po zaslonu do eksperimentalnih pseudoelemenata koji automatski generiraju navigacijske kontrole, možete isporučiti komponente s punim značajkama, a istovremeno ostaviti svoj paket jednostavnijim, a ž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.S najnovijim specifikacijama (poput CSS Overflow Level 5) i dobro utvrđenim značajkama kao što su scroll-snap-type, sada je realno isporučivati ​​karusele spremne za produkciju koji su brzi, dostupni putem tipkovnice i otporni kada je JavaScript onemogućen.

Zašto moderni CSS čini JavaScript karusele opcionalnim

Godinama je zadani odgovor na pitanje "kako napraviti vrtuljak?" bio "uzmi JS biblioteku".Swiper, Slick, Glide, Bootstrapov carousel i mnogi drugi riješili su problem žongliranjem slušača događaja, timera, promatrača promjene veličine i ARIA uloga umjesto vas - ali su također u vaš paket ubacili dodatne kilobajte i uveli još jednu ovisnost koju treba održavati.

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

Osnovna ideja je jednostavna: svoj karusel tretirate kao područje koje se može pomicati, a ne kao čarobna komponenta koja se teleportira između slajdova. CSS zatim „pomaže“ pomicanju s točkama prianjanja, glatkim prijelazima i, u najnovijoj specifikaciji, ugrađenim gumbima i markerima koje preglednik ubrizgava u DOM kao prave interaktivne elemente.

Ova promjena ima velike posljedice za performanse i otpornostCSS vrtuljak i dalje savršeno radi kada je JS blokiran, ne uspijeva se učitati ili ga je korisnik onemogućio. Vlastiti mehanizam za pomicanje preglednika obavlja većinu teškog posla, što je visoko optimizirano u svakom glavnom mehanizmu i podešeno za uređaje niske snage i alate za pristupačnost.

Osim toga, CSS značajke poput :has(), raspored mreže i animacije pokretane pomicanjem uključuju se u isto područje za pomicanje, što vam omogućuje izradu sofisticiranih indikatora slajdova, otkrivanja sadržaja ili paralakse bez spajanja triju različitih sustava (vašeg koda, logike biblioteke i pomicanja preglednika) na krhke načine.

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

U srcu CSS-only carousela nalazi se modul Scroll Snap., što vam omogućuje definiranje „magnetskih“ točaka na koje bi se položaj pomicanja trebao zaključati nakon što korisnik prestane pomicati. Umjesto da se zaustavi na pola puta između dva slajda, prikaz se pomiče na najbliži, dajući taj klasični osjećaj klizača.

HTML struktura može biti minimalna: kontejner koji se pomiče vodoravno, plus niz elemenata slajda unutar njega. Ne morate čak ni svakoj slici ili kartici dati zasebnu klasu ako je vaše označavanje dosljedno - iako imenovanje vaših elemenata često pomaže za stiliziranje i pristupačnost:

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

Spremnik definirate kao horizontalni fleksibilni raspored s omogućenim pomicanjem i odredite da se treba pomaknuti duž x osi:

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

Svaki pojedinačni slajd zatim otkriva položaj prikvačivanja, obično u središtu ili 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 potpun vrtuljakKorisnici mogu prevlačiti prstom na mobitelu, pomicati se mišem ili trackpadom, a viewport će se uvijek smjestiti na najbliži slajd. Nema JS-a koji prati događaje pomicanja ili ručno podešava položaje.

Za izradu višeartikularnih karusela (poput traka proizvoda), potrebno je samo prilagoditi fleksibilnu osnovuNa 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. Scroll Snap ne mari je li svaka „stranica“ jedan slajd pune širine ili skupina manjih kartica.

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

Od običnih skrola do vrtuljaka s nativnim osjećajem

Goli vrtuljak s pomicanjem i pričvršćivanjem već se čini dobrim, ali moderne specifikacije idu dalje, posebno u Chromeu 135+ gdje se nacrt CSS Overflow Level 5 počinje pojavljivati ​​kao stvarna značajka. Specifikacija tretira rotirajući izbornik kao područje za pomicanje s opcionalnim, u pregledniku generiranim korisničkim sučeljem oko njega.

U tom modelu, „vrtuljak“ je jednak: jednom skrolu plus do dva seta mogućnosti prikaza.—gumbi za pomicanje i markeri za pomicanje. Oboje je stvoreno CSS pseudoelementima, ali preglednik emitira stvarne DOM srodne elemente pored vašeg scrollera pa se ponašaju kao izvorne kontrole.

Ključno je da preglednik sam upravlja semantikom, redoslijedom fokusa i stanjem.Ubrizgani elementi imaju odgovarajuće uloge, mogu se mijenjati pomoću tabulatora u razumnom redoslijedu i odražavaju trenutni položaj pomicanja. To znači da repliciranje iste razine pristupačnosti s ručno generiranom JS bibliotekom nije trivijalno; trebali biste ARIA atribute, ponašanje fokusne grupe, navigaciju tipkovnicom i najave područja uživo koje sve rade zajedno.

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

Krajnji rezultat je robusnija osnova za sve korisnike—uključujući ljude koji onemogućuju JS, oslanjaju se na pomoćnu tehnologiju, imaju uređaje s niskom potrošnjom energije ili pregledavaju u nestabilnim mrežnim uvjetima. Nativno pomicanje uz CSS stiliziranje nadmašuju widgete prepune skripti u svim tim scenarijima.

Dodavanje gumba za pomicanje 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ćuje CSS-u da definira namjenske gumbe "prethodno/sljedeće" za bilo koje područje za pomicanje - uključujući i karusel.

Ovi CSS-definirani gumbi za pomicanje ponašaju se drugačije od strelica za pomicanje stare školeUmjesto pomicanja sadržaja u malim koracima, oni skaču otprilike 85% vidljivog područja po kliku. U karuselu pune širine, poravnanom uz pričvršćivanje, to se osjeća gotovo identično kao gumb za navigaciju po slajdu.

Ako vam je zaista potrebno točno pomicanje jednog elementa, možete kombinirati opcije prianjanja pomicanjemTipičan recept je scroll-snap-type: x mandatory na spremniku i scroll-snap-stop: always na svakom djetetu koje se snap-a. Na taj način, jednim pritiskom na gumb za pomicanje učinkovito prelazite s jedne kartice na drugu.

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

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

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

Vrijednost sadržaja odvojena kosim crtama omogućuje vam da pružite i vizualnu i pristupačnu oznakuPreglednik zatim stvara pravi <button> čvorove kao braće/sestre vašeg područja za pomicanje i smješta vaš sadržaj unutar njih. Slobodni ste ih pozicionirati i stilizirati 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 važan ovdjeNa primjer, primjenom pravila kao što je .carousel::scroll-button(*):focus-visible { outline-offset: 5px; } osigurava da kada korisnici pritisnu tipku Tab na ove gumbe, vide jasan pomak prstena fokusa od obruba elementa, čime se čuva upotrebljivost tipkovnice i usklađenost s WCAG-om.

Ispod haube, preglednik prati stanje gumba i dostupni raspon pomicanjaTo znači da se ne morate brinuti o onemogućavanju gumba „prethodno“ kada ste na prvom slajdu ili gumba „sljedeće“ na kraju; platforma može obraditi te uvjete na standardizirani način.

Markeri za pomicanje s ::scroll-marker() za navigaciju pomoću grafičkih oznaka ili oznaka

Vizualne oznake - točke ili sličice ispod vrtuljka - danas su gotovo očekivane od strane korisnika. Novo ::scroll-marker() pseudo-element vam omogućuje generiranje tih indikatora isključivo pomoću CSS-a, a svaki od njih je povezan s određenom stavkom na popisu koji se može pomicati.

Za razliku od palca trake za pomicanje, markeri za pomicanje predstavljaju semantičke točke interesaSvaki 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čnih poglavlja u priči, a ne za svaki pojedinačni kadar.

Oznake se prikazuju kao valjane <a> elementi, što vam besplatno pruža dvije važne značajke: navigaciju unutar stranice i ispravnu semantiku za čitače zaslona. Ponašaju se slično kao sidrene poveznice, ali s nekim poboljšanjima prilagođenim korištenju vrtuljka.

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

Da biste ovo povezali, prvo definirate gdje bi se trebala nalaziti grupa markera pomoću scroll-marker-group svojstvo na kontejneru, obično prije ili poslije scrollera. Na primjer, scroll-marker-group: after; bi postavio markere nakon područja vrtuljka 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 učiniti. Uobičajeni obrazac je stvaranje praznih toč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, grupirajući ih u namjenski kontejner ::scroll-marker-groupi izlažući ih kao elemente za navigaciju pomoću tipkovnice koji se ponašaju poput fokusne grupe. Čitači zaslona mogu ih prikazati slično kao popis tablica: pomičete fokus između oznaka i aktivirate ih za prelazak na određeni slajd.

Markeri nisu ograničeni na točke. Možete postaviti content brojevima ("1", "2"itd.), oznake čitljive ljudima poput „Sezona 1“ ili „Poglavlje 3“ ili čak ugrađene slike za stvaranje galerija sličica za rasporede s puno fotografija poput galerija proizvoda e-trgovine.

Kombiniranje gumba, markera i rezervnih strategija

Kada kombinirate gumbe za pomicanje i markere na vrhu vrtuljka za pomicanje i pričvršćivanje, dobivate komponentu koja se čini nerazlučivom od JS rješenja., ali ga je lakše održavati i isporučuje se s manje pokretnih dijelova. Korisnici mogu klikati strelice, dodirivati ​​grafičke oznake, prelaziti prstom po zaslonima osjetljivim na dodir ili koristiti navigaciju tipkovnicom - 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 prilagodbe ili okidanje timera u nezgodnim trenucima. CLS (Cumulative Layout Shift) je smanjen jer je DOM stablo spremno od početka i ne ubrizgavate niti mjerite elemente kasno u životnom ciklusu.

Međutim, postoji 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 značajki putem @supports je tvoj najbolji saveznik ovdjeMožete prikazati tradicionalnu navigacijsku traku - poveznice na #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 s linkovima sidrasvaki slajd dobiva id, a navigacija pokazuje na te ID-ove. Skakanje na sidro unutar kontejnera za pomicanje lijepo se 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 pratećim preglednicima.—potpuno opremljeni izvorni gumbi, markeri i kuke za stanje pomicanja — a istovremeno nude potpuno funkcionalno iskustvo na drugim mjestima. Nijedan korisnik ne mora ostati 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 pomicanja i mehanizam za pomicanje preglednika. Za mnoge UX obrasce - galerije, vremenske crte, detaljne prikaze - to je više nego dovoljno.

Vrtuljci s automatskim pokretanjem samo putem CSS-a s animacijama ključnih kadrova

Jedna uobičajena značajka koju ljudi očekuju od vrtuljaka je automatska reprodukcija.—slajdovi se automatski pomiču nakon nekoliko sekundi. Iako se ovo često implementira pomoću JavaScript timera, 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 zapis ostaje na svakoj poziciji slajda neko vrijeme, a zatim skač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 slajda, npr. .autoplay-carousel { display: flex; animation: slide 12s infinite; }Rasponi postotaka definiraju vremena "zadržavanja" na svakom slajdu kako bi sadržaj bio čitljiv prije prelaska na sljedeći.

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

Razmatranja pristupačnosti idu još dalje s postavkama kretanja. poštujući prefers-reduced-motion smatra se najboljom praksom, pa 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 rubne slučajeve koje JS može— poput uistinu dinamičkog brojanja slajdova ili složene logike pauziranja/nastavka koju pokreće korisnik — iznenađujuće su solidni za jednostavne, statične vrtuljke kada želite u potpunosti izbjeći skriptiranje.

Usporedba vrtuljaka koji koriste samo CSS i JavaScript

Odluka između CSS-a i JavaScripta za carousel nije prijedlog tipa "sve ili ništa".; ovisi o vašim zahtjevima, publici i budžetu za održavanje. Ali ravnoteža se uvelike pomaknula u korist CSS-a za mnoge scenarije iz stvarnog svijeta.

S gledišta performansi, CSS karuseli su jasni pobjedniciNema parsiranja ili izvršavanja bibliotečkog koda, nema slušača događaja pri svakoj interakciji pomicanja i nema ponovnih izračuna rasporeda tijekom izvođenja koje pokreću skriptirane prilagodbe. Mehanizam za pomicanje preglednika napisan je u visoko optimiziranom izvornom kodu i podešen za sve, od vrhunskih stolnih računala do telefona niske potrošnje energije.

Što se tiče pristupačnosti, nove CSS značajke vrtuljka značajno podižu ljestvicuGumbi i markeri za pomicanje koje pruža preglednik dolaze s unaprijed instaliranim ARIA ulogama, ponašanjem tipkovnice i najavama koje bi se inače morale pomno ponovno stvoriti 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 automatske reprodukcije, analitičke kuke, prilagođena fizika ili sinkronizacija više vrtuljaka s dijeljenim stanjem (npr. glavna slika plus red sličica plus vanjsko numeriranje), pristupi temeljeni na skriptama i dalje mogu biti fleksibilniji.

Međutim, ključni uvid je da mnogi „svakodnevni“ vrtuljci zapravo ne trebaju ovu razinu složenosti.Jednostavna galerija proizvoda, klizač s preporukama ili traka s „istaknutim objavama“ obično se mogu implementirati pomoću pomicanja pomoću prianjanja, nekoliko CSS pravila i opcionalnih izvornih kontrola - što vam štedi vrijeme pri pomicanju između tri slajda.

Drugo razmatranje je otpornost kada JavaScript zakaže.Vrteljci koji koriste samo CSS nastavljaju savršeno raditi ako je JS blokiran korporativnim proxyjem, oštećen blokatorom oglasa ili jednostavno još nije učitan kada korisnik sleti na stranicu. Takvu vrstu elegantne degradacije teško je postići s bibliotekama koje ovise o fazi inicijalizacije nakon učitavanja stranice.

Najbolje prakse pristupačnosti za CSS rotirajuće elemente

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

Prvo, dajte karuselu odgovarajuću orijentirnu točkuOmotavanje u element s role="region" i opisni aria-label poput „Galerije proizvoda“ ili „Istaknutih članaka“ olakšava korisnicima čitača zaslona pronalaženje i razumijevanje.

Svaki slajd može imati 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 dobiva kontekst o svojoj poziciji u nizu.

Ne zaboravite vidljive indikatore fokusaBilo koji interaktivni element - bilo da se radi o ::scroll-buttonA ::scroll-marker-generirana veza ili ručno sidro u vašoj rezervnoj navigaciji - treba jasan stil fokusa koji prolazi smjernice za kontrast i ne uklanja se globalnim resetiranjem.

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

Konačno, razmislite o veličinama dodirnih metaBez obzira stilizirate li izvorne markere za pomicanje ili vlastite navigacijske poveznice, interaktivna područja neka budu barem 44 × 44 CSS piksela. To obično znači velikodušno punjenje i razmak, a ne male krugove čvrsto zbijene jedan uz drugi.

Stvarni tijekovi rada, alati i budući smjerovi

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

Uz konfiguratore, odabrane galerije CSS-om generiranih demonstracija prikazuju što je mogućePronaći ćete uzorke poput sučelja s karticama, navigacije scrollspyjem, slajdova temeljenih 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 kako bi dokazali poantu: bogato, interaktivno korisničko sučelje u potpunosti je ostvarivo samo s HTML-om i CSS-om. Često otkrivaju svoje alate putem @layer deklaracije, tako da možete pregledati i odabrati stilove koji odgovaraju vašem vlastitom sustavu dizajna.

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

To bi otvorilo vrata brendiranim, bogato stiliziranim kontrolama izgrađenim s utility frameworkovima. poput Tailwinda, a pritom zadržavajući semantiku i ponašanje vođeno platformom. U biti biste ukrasili korisničko sučelje, ali biste pregledniku omogućili da ostane mozak operacije.

Drugo veliko područje je cikličko ili beskonačno pomicanjeMnogi se današnji rotirajući slajdovi "prelamaju" kada dođete do kraja, besprijekorno se vraćajući na prvi slajd. Čista implementacija ovoga je nezgodna, često uključuje duplicirani sadržaj ili složenu logiku. Podrška na razini platforme za cikličko pomicanje omogućila bi preglednicima da elegantnije i učinkovitije rukuju ponašanjem prelamanja.

Kako ove značajke sazrijevaju i šire se izvan Chromea na druge tražilice, jaz između onoga što "nativni CSS rotirajući izbornik" može učiniti i onoga što nude JavaScript biblioteke s velikom težinom nastavit će se smanjivati, čineći pristupe bez skripti zadanom početnom toč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.Počevši od jednostavnog rasporeda s pomicanjem i prianjanjem, dodavanjem eksperimentalnih gumba i markera gdje je to podržano i uvođenjem 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.