Kreirajte napredne CSS kružne elemente bez JavaScripta

Početna » piton » Kreirajte napredne CSS kružne elemente bez JavaScripta

Izrada kružnih prozora samo sa modernim CSS-om više nije pusti san—to je vrlo realna, produkcijski spremna opcija koja često može nadmašiti klasične JavaScript biblioteke slajdera. Zahvaljujući funkcijama kao što su privlačenje pomicanja, animacije vođene pomicanjem, eksperimentalni pseudo-elementi u obliku vrtuljke i robusni primitivi za pristupačnost, možete isporučivati ​​lagane, otporne karusele koji i dalje djeluju glatko, interaktivno i uglađeno.

Ako ste umorni od povlačenja JavaScript paketa od 50KB samo da biste prikazali nekoliko slajdova, ovaj vodič vas vodi kroz ono što današnji CSS može učiniti za vas. Razložit ćemo ključne koncepte iza CSS-only kružnih elemenata, kako ih povezati sa scroll-snap funkcijom, kada se osloniti na novi... ::scroll-button() i ::scroll-marker() pseudo-elementi i kako raspršiti elemente u automatskom reprodukovanju ili kružnom ponašanju, a istovremeno tretirati pristupačnost i performanse kao građane prvog reda.

Zašto su CSS-only carouls konačno ozbiljna opcija

Godinama je "carousel" bio gotovo sinonim za "JavaScript dodatak"Rješenja poput Swipera, Glidea ili domaćih slajdera bila su najčešći pristup: oni su se bavili navigacijom, stanjem, podrškom za tastaturu i gestama dodira, ali po cijenu dodatne težine, slušača događaja svuda i poprilične količine DOM gimnastike.

Moderni CSS je tiho zatvorio većinu te praznine.. Sa nekretninama kao što su scroll-snap-type i scroll-snap-align, možete pretvoriti bilo koji horizontalni ili vertikalni skroler u paginirano iskustvo. Osim toga, specifikacija CSS Overflow Level 5 uvodi generirano u pregledniku dugmad za pomicanje i markeri koji se ponašaju kao potpuno funkcionalni carousel UI, ali su u potpunosti deklarisani u CSS-u.

Velika pobjeda je to što preglednik, a ne vaš JavaScript kod, postaje odgovoran za osnovne UX probleme.: fizika skrolovanja, navigacija tastaturom, redoslijed fokusa, pa čak i ARIA uloge za kontrole vrtuljka. U mnogim slučajevima je zaista teško napraviti nešto pristupačnije i s boljim performansama od onoga što vam platforma sada pruža odmah po instalaciji.

Još jedna velika prednost CSS karusela je otpornost.Ako se JavaScript ne uspije učitati, korisnici sa blokiranim ili onemogućenim skriptom i dalje dobijaju savršeno upotrebljiv skup stavki koje se mogu pomicati. Nema hidratacije, nema promjene rasporeda uzrokovane kasnim učitavanjem koda i ima mnogo manje pokretnih dijelova koji mogu s vremenom poći po zlu.

Osnovni gradivni blok: kontejner koji se može pomicati sa funkcijom Scroll Snap

Svaki CSS-only carousel započinje kao običan kontejner za pomicanjeZamislite jednostavnu listu slajdova koji se mogu horizontalno pomicati. Nakon toga, dodajte pričvršćivanje pomicanja tako da se prozor za prikaz prirodno zaključava na svaki slajd.

Minimalna HTML struktura za horizontalni kružni meni je namjerno jednostavna.: omotački element i niz elemenata slajda unutra. Možete koristiti ul sa li elementi, ili div s djetetom divs—CSS obavlja teški posao, tako da vam nisu potrebni posebni časovi za svako dijete osim ako vaš dizajn to ne zahtijeva.

Osnovno podešavanje scroll-snap-a u CSS-u može izgledati ovako, pod pretpostavkom prikaza pune širine, s jednim slajdom:

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

Ovdje kontejner koristi display: flex da poravna svoju djecu horizontalno, I overflow-x: auto da biste omogućili skrolovanje. Magija je u scroll-snap-type: x mandatory, što govori pregledniku da horizontalno pomicanje uvijek treba da se zaustavi na valjanoj tački snap-a, i u scroll-snap-align: center na svakom slajdu, što definiše te tačke pričvršćivanja.

Ova kombinacija flexboxa i scroll snapa odmah se čini kao kružna traka.: korisnici skrolaju ili prevlače, a najbliži slajd se uklopi na mjesto. Budući da koristi izvorno skrolanje, unos dodirom na telefonima i tabletima jednostavno funkcionira, bez ikakvog obrađivači gestova ili dodatne biblioteke.

Niste ograničeni na jednu stavku po pregleduZa višekolumne karuselje koji prikazuju nekoliko kartica odjednom, možete koristiti fleksibilnu širinu za stavke, na primjer:

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

Ova varijacija vam omogućava da prikažete, recimo, tri kartice po prikazu sa malo razmaka., a istovremeno imaju koristi od ponašanja pri prikačivanju. Korisnici se kreću kroz stranice kartica umjesto kroz pojedinačne slajdove, što odlično funkcionira za liste proizvoda ili galerije.

Dugmad za skrolovanje sa pseudo-elementom ::scroll-button()

Nakon što imate brzi skroler, sljedeća stvar koju većina ljudi želi su eksplicitni navigacijski gumbi.—prethodne i sljedeće kontrole koje pomiču kružnu traku lijevo ili desno. Tradicionalno biste kreirali <button> elementi, povežu događaje klika i izračunaju koliko daleko treba skrolovati.

Specifikacija CSS Overflow 5 predstavlja ::scroll-button(), pseudoelement koji omogućava pregledniku da obavi sav taj teški posaoIako je ovo trenutno dostupno počevši od Chromea 135 (i obično je u početku ispod eksperimentalnih oznaka), ovo je uvid u to kako će se kružni pregledi kreirati u budućnosti.

Dugmad za pomicanje deklarirate na isti način kao i bilo koji drugi pseudoelement.Na primjer, da biste generirali lijevo i desno dugme za vaš kružni meni:

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

Kada se primijeni ovaj CSS, preglednik zapravo kreira pravi <button> elementi kao braća i sestre kontejnera za skrolovanje, povezuje ih sa skrolerom, dodjeljuje odgovarajuće uloge i određuje njihovo ponašanje. Jedan klik obično skrola oko 85% područja za skrolovanje, što se u većini kružnih rasporeda čini kao "stranica".

Ako vaš dizajn očekuje tačno jednu stavku pune širine po kliku, možete kombinirati ove pseudo-elemente sa strožijim prikačivanjem na svako dijete dodavanjem scroll-snap-stop: alwaysTo prisiljava prikaz da se zaustavi na granicama stavki umjesto da se zaustavi na pola puta.

Svojstvo sadržaja ovdje služi dvostrukoj svrsiPrva vrijednost je ono što korisnici vizualno vide (u ovom slučaju, znakovi strelica), a drugi niz je pristupačan rezervni tekst koji može biti izložen pomoćnoj tehnologiji. Slobodni ste stilizirati i pozicionirati ove dugmad pomoću CSS-a ili koristiti funkcije poput anchor() da ih precizno poravnate s vašim rasporedom.

Markeri za pomicanje sa ::scroll-marker() i ::scroll-marker-group

Tačke ili oznake ispod karusela – često nazvane „oznake za paginaciju“ ili „markeri“ – su još jedan uobičajeni zahtjevOni prikazuju koliko elemenata postoji i koji je trenutno vidljiv, te omogućavaju korisnicima da direktno pređu na određeni slajd.

The ::scroll-marker() pseudo-element vam daje ove indikatore bez ručnog generiranja sidrenih linkova ili rasponaSvaki marker je u suštini navigacijski <a> element koji kreira preglednik, koji pokazuje na odgovarajuću stavku za pomicanje i učestvuje u navigaciji pomoću tastature i čitača ekrana.

Da biste ovo postavili, kažete pregledniku gdje da postavi grupu markera sa scroll-marker-group, i na kojim elementima kreirati markere. Minimalna konfiguracija bi mogla izgledati ovako:

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

Preglednik gradi ::scroll-marker-group kontejner kao srodni element scrollera i popunjava ga s jednim markerom za svako odabrano dijeteU ovom jednostavnom primjeru markeri su prikazani kao prazne tačke, ali možete jednako lako koristiti tekst poput „Sezona 1“, ikone ili čak sličice promjenom content imovina.

Šta ove markere čini posebnim u poređenju sa običnim trakama za skrolovanje je da su to pravi navigacijski linkovi. Omogućavaju korisnicima da direktno prelaze na smislene pozicije i dolaze s korisnom semantikom: postoji :target-current stanje koje pokazuje koji marker odgovara slajdu koji je trenutno prikazan ili je pričvršćen. Podrška za tastaturu se ponaša kao fokus grupa, a čitači ekrana ih mogu prikazati kao kontrolu sličnu listi tabova.

Ova strategija je posebno moćna kada vaš skroler predstavlja logičke dijelove, a ne pojedinačne elemente.Na primjer, umjesto kreiranja deset markera za deset epizoda, možete kreirati dva markera koja prelaze na početak prve i druge sezone. Slobodni ste odlučiti koje „tačke interesa“ treba adresirati.

Kombiniranje dugmadi i markera u potpuno kružni korisnički interfejs

Kad staviš ::scroll-button() i ::scroll-marker() zajedno na istom skroleru, dobijate korisnički interfejs koji korisnici odmah prepoznaju kao kružnu traku: kontrole za prethodno/sljedeće, red markera koji pokazuju koliko su daleko odmakli i glatko prebacivanje između slajdova.

Ključna razlika u odnosu na klasične JavaScript slajdere je u tome što se većina ove logike sada nalazi u pregledniku.Dugmad i markeri su generirani elementi s ispravnim ARIA ulogama, pravilno integrirani u redoslijed tabulatora i pričom o pristupačnosti koju su dizajnirali temeljni timovi preglednika, a ne iznova izmišljenom za svaku web stranicu.

Ovaj pristup donosi nekoliko vrlo praktičnih prednostiRadi sa onemogućenim JavaScriptom, eliminiše treperenje hidratacije i probleme sa vremenom, smanjuje kumulativni pomak rasporeda jer su kontrole poznate u vrijeme CSS rasporeda i besprijekorno se integriše sa animacijama vođenim skrolovanjem ili upitima stanja skrolovanja ako želite da dodate poseban pečat.

Na uređajima osjetljivim na dodir, iskustvo je prirodno prilagođeno dodiru prstima. jer je kontejner za skrolovanje i dalje samo izvorni skroler. Na desktop računarima, unos pomoću točkića miša i tastature funkcioniše kako se očekuje, a indikatori fokusa na generisanim kontrolama mogu se stilizovati kako bi odgovarali vašim smjernicama za dizajn i pristupačnost.

Iz perspektive održavanja, "uradite manje, ostvarite više" postaje prilično tačan opisUmjesto održavanja logike višestrukih implementacija tipa "carousel" u različitim projektima, oslanjate se na zajedničke, standardizirane funkcije platforme koje će se s vremenom poboljšavati bez dodatnog rada s vaše strane.

Kako koristiti Scroll Snap u stvarnim projektima

Čak i ako na trenutak zanemarite nove pseudo-elemente, samo scroll-snap je već dovoljno dobar za mnoge produkcijske karuselje.Podrška preglednika za pomicanje i privlačenje u modernim pretraživačima je solidna, a ponašanje je predvidljivo i kod pokreta kotačićem miša i dodirom.

U najjednostavnijem scenariju, vaš HTML kružni prikaz može biti div sa nizom slika unutraMožete dati tom kontejneru klasu kao što je .carousel i ostavite podređene slike neklasificirane; CSS se bavi poravnanjem i skrolovanjem.

Uključivanjem scroll-behavior: smooth na kontejneru, skrolovanje između tačaka snap-a postaje prijatno animirano umjesto skokovitog. Ovo je posebno primjetno kada korisnici kliknu na markere ili sidrene linkove ili kada programski aktivirate skrolovanje u hibridnim postavkama.

Svako ključno svojstvo funkcije scroll-snap igra vrlo različitu ulogu. scroll-snap-type definiše osu i da li je prikačivanje obavezno ili samo nagovještaj; scroll-snap-align na djeci određuje gdje se zaključavaju u prikaz (početak, centar, kraj); i scroll-snap-stop: always sprečava preglednik da preskače tačke snap-a prilikom brzog skrolovanja.

Korištena zajedno, ova svojstva vam omogućavaju da precizno odredite kako bi se karusel trebao osjećati—od nježnog, opraštajućeg fotografisanja pogodnog za velike dijelove sadržaja, do strogog ponašanja slajd po slajd, savršenog za glavne banere gdje nikada ne želite da se nađete „između“ elemenata.

Budući da je ovo čisti CSS, možete lako prilagoditi izgled responzivno.Pomoću medijskih upita možete prebacivati ​​se s jednog slajda po prikazu na uskim ekranima na nekoliko slajdova po prikazu na širokim desktop računarima, jednostavnom promjenom flex-basis stavki. Nisu potrebne JavaScript tačke prekida, slušači za promjenu veličine ili ponovno izračunate širine.

Eksperimentalni pseudo-elementi i detekcija karakteristika

Novi pseudo-elementi orijentisani na karusel—::scroll-button(), ::scroll-marker() i ::scroll-marker-group—su moćni, ali i dalje relativno svježiU trenutku pisanja ovog teksta, dostupni su u Chromeu 135 i novijim verzijama, često uz potrebne eksperimentalne zastavice, a s vremenom će se proširiti i na druge pretraživače.

Budući da podrška još nije univerzalna, produkcijske lokacije bi se trebale oslanjati na detekciju funkcija i elegantne rezervne opcije.CSS vam daje @supports at-pravilo, koje vam omogućava uslovnu primjenu pravila zasnovanih na prepoznavanju svojstava.

Možete definirati jednostavnu rezervnu navigacijsku traku—skup linkova ili dugmadi koji se nalaze ispod karusela — a zatim sakrivaju tu traku kada preglednik podržava izvorne dugmad za pomicanje. Na primjer:

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

ovdje .carousel-nav može sadržavati ručno napisane sidrene linkove koji upućuju na slajdove putem ID-ova, kao <a href="#slide1">1</a>U preglednicima koji razumiju novo svojstvo dugmeta za skrolovanje, pojavljuju se vaše izvorne kontrole, a rezervna navigacija je skrivena; u starijim preglednicima, navigacija sidra ostaje, uparena sa funkcijom za pričvršćivanje skrolovanja za savršeno upotrebljivo iskustvo.

Ova hibridna strategija omogućava sigurno eksperimentiranje s funkcijama karusel sljedeće generacije već danas., bez vezivanja za određeni motor ili konfiguraciju zastavica. Kako podrška preglednika sazrijeva, možete se više oslanjati na pseudo-elemente i smanjiti dio ručnog skeliranja.

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

Još jedan uobičajeni zahtjev je automatska reprodukcija - vrtuljak koji se samostalno pomiče naprijed-nazad, opcionalno pauzirajući kada se zadrži pokazivač miša iznad njega.Iako automatska reprodukcija nosi neke UX ograničenja i ograničenja pristupačnosti, moguće ju je postići isključivo CSS animacijama.

Jednostavan obrazac je animiranje horizontalnog pomjeranja vaše slajd trake..

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

U ovom primjeru, ključni kadrovi provode određeno vrijeme na svakom pomaku prije nego što pređu na sljedeći slajd.Traka se na kraju vraća u petlju, stvarajući izgled ponavljajuće projekcije slajdova preko četiri slajda. Zadržavanje pokazivača miša iznad vrtuljke pauzira animaciju, tako da korisnici mogu pregledati sadržaj bez stalnog kretanja.

Poštovati korisnike koji preferiraju smanjeno kretanje iz zdravstvenih ili udobnostnih razloga, možete ubaciti animaciju u medijski upit:

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

Ovo osigurava da na sistemima gdje je potrebno smanjeno kretanje, klizači ostaju statični, efektivno onemogućavajući automatsku reprodukciju, a istovremeno omogućavajući ručno pomicanje ili navigaciju pomoću dugmadi/markera gdje je to moguće.

Jedan važan kompromis je taj što se automatska reprodukcija zasnovana na ključnim kadrovima ne integriše automatski sa funkcijom skrolovanja i prikačivanja.Ručno prevodite sadržaj umjesto da se oslanjate na izvorno skrolovanje, tako da morate pažljivo dizajnirati animaciju kako biste izbjegli poluvidljive slajdove i održali vrijeme usklađeno s rasporedom.

Razmatranja pristupačnosti za CSS karusele

Pristupačnost je područje gdje CSS-bazirani karuselci zaista mogu zablistati, jer se veliki dio teške logike prebacuje s vašeg prilagođenog koda na ponašanja platforme koja su pažljivo dizajnirana i testirana.

Kada se oslanjate na izvorno skrolovanje plus privlačenje skrolovanja, automatski nasljeđujete podršku za tastaturu, dodir i miš.Korisnici mogu koristiti Tab za skroler, koristiti tipke sa strelicama za kretanje, prevlačiti prstom po ekranima osjetljivim na dodir i skrolovati pomoću kotačića, bez ikakvih slušača događaja ili prilagođenih rukovatelja.

Eksperimentalna dugmad za pomicanje i markeri idu korak daljePreglednik ih kreira s odgovarajućom semantikom, integrira ih u redoslijed tabulatora i održava njihovo stanje, što vrlo otežava slučajno zaboravljanje ARIA atributa ili njihovo pogrešno označavanje. Rezultirajuće kontrole u obliku karuselja imaju tendenciju da budu dosljednije dostupne od implementacija s početnim promjenama.

I dalje možete i trebate dodavati semantičke naznake svojim regijama u obliku karuselskog prikaza.Na primjer, označavanje kontejnera sa role="region" i opisni aria-label pomaže korisnicima čitača ekrana da shvate šta komponenta predstavlja:

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

Osiguranje vidljivih indikatora fokusa za sve interaktivne elemente ostaje ključnoBez obzira da li su kontrole vaša vlastita dugmad i linkovi ili pseudo-elementi generirani od strane preglednika, provjerite da obrisi fokusa nisu uklonjeni ili previše suptilni da bi se vidjeli. Podesite outline, outline-offset ili promjene pozadine po potrebi kako bi se zadovoljili zahtjevi kontrasta.

Veličina mete dodira je još jedno praktično razmatranjeCiljajte na kontrole veličine najmanje 44×44px kako biste bili u skladu s uobičajenim smjernicama za pristupačnost, tako da korisnici ne bi imali problema s dodirivanjem strelica ili tačaka na manjim ekranima.

Za bilo koju funkciju automatske reprodukcije, dajte korisnicima jasnu kontrolu i izbjegavajte previše agresivne pokreteOmogućite pauziranje prilikom zadržavanja miša ili eksplicitno dugme za pauziranje i razmislite o podrazumevanom isključivanju automatske reprodukcije ako je sadržaj gust ili prepun teksta. U kombinaciji sa prefers-reduced-motion, ovo čini vašu vrtuljku ugodnijom za širu publiku.

Rukovanje kružnim ili "beskonačnim" skrolovanjem pomoću CSS-a

Jedno ponašanje koje ljudi često traže je kružno skrolovanje.Kada dođete do posljednjeg slajda i skrolujete dalje, glatko se vraćate na prvi, poput fizičkog vrtuljka koji se beskrajno okreće.

Danas ne postoji direktno, isključivo CSS svojstvo koje čini kontejner za skrolovanje inherentno kružnim.Bez dupliranja sadržaja, izvorni skroler će imati početak i kraj: kada dođete do posljednje stavke, daljnje skrolovanje vas jednostavno neće pomaknuti naprijed.

Autori specifikacija su svjesni da mnogi UI kružni prikazi očekuju ovo ponašanje u petlji., i postoji aktivno interesovanje za istraživanje rješenja na nivou platforme za ciklično skrolovanje, slično kao što su standardizovani novi dugmići i markeri za skrolovanje. Uprkos tome, trenutno ne možete tražiti od pretraživača da izvorno prelomi pozicije skrolovanja jednom CSS deklaracijom.

U čisto CSS postavkama, simuliranje petlje obično znači animiranje transformacija (kao u primjerima ključnih kadrova automatske reprodukcije) ili prihvatanje linearnog završetka sekvence.Ako je besprijekorna beskonačnost apsolutno neophodna i ne možete duplicirati sadržaj, JavaScript je za sada i dalje fleksibilniji alat.

Dobra vijest je da vas ništa ne sprječava da kombinirate uglavnom CSS-om vođenu vrtuljku s malo JavaScripta tamo gdje to zaista dodaje vrijednost.Za svakodnevnu navigaciju možete se osloniti na scroll-snap i CSS dugmad, a zatim dodati nekoliko linija skripte za praćenje pozicije skrolovanja i prelazak s kraja na početak kada je to prikladno.

HTML/CSS u odnosu na JavaScript za bogate karuselje zasnovane na karticama

Česta dilema za novije programere je da li složeniji karusel kartica "mora" biti napisan u JavaScriptuLjudi često zamišljaju da čim se od jednostavnih slika napravi responzivna kartica s raznim komponentama, CSS sam po sebi prestaje biti održiv.

U praksi, CSS scroll-snap funkcioniše jednako dobro za bogate kartice kao i za obične slike.Sve dok je svaka kartica blok unutar kontejnera za skrolovanje, možete se prikačiti na nju, animirati oko nje i slagati dodatne stilove preko nje. Naslovi, dugmad, fragmenti teksta, pa čak i ugrađeni mediji, ne mijenjaju fundamentalno mehaniku.

JavaScript blista u uslovnom ponašanju i složenim stanjimaAko vaš kružni meni mora dinamički filtrirati kartice, mijenjati redoslijed slajdova, sinhronizirati se s drugim komponentama, dohvaćati novi sadržaj u hodu ili podržavati visoko prilagođenu logiku („ako se klikne na ovu tačku, prikaži tu potpuno nepovezanu karticu“), onda JavaScript može lakše izraziti tu poslovnu logiku nego sam CSS.

Međutim, iznenađujući broj svakodnevnih slajdera su u suštini statične liste stavki koje se linearno kreću.U tim slučajevima, korištenje nekoliko linija CSS-a umjesto uvoza velike JS biblioteke je i jednostavnije za razmišljanje i bolje za performanse. Razumijevanje scroll-snap-a i novijih pseudo-elemenata omogućava vam da JavaScript rezervirate za rijetke slučajeve kada se zaista isplati.

Ako još uvijek učite front-end razvoj, tretiranje CSS carousel-a kao vaše zadane osnovne postavke je odlična navika.Počnite s HTML-om i CSS-om, a skripte koristite tek kada naiđete na jasno ograničenje. Ovo vas uči više o tome šta platforma već može i često dovodi do vitkijih i čistijih kodnih baza.

Korak unazad, novonastali skup CSS funkcija vezanih za skrolovanje, prikačivanje, dugmad, markere i upite o stanju skrolovanja transformirao je karusele iz widgeta s puno skripti u uglavnom deklarativne komponente. Oslanjajući se na scroll-snap za osnovno ponašanje pri prijavljivanju stranica, korištenjem ::scroll-button() i ::scroll-marker() Tamo gdje je to podržano, i primjenjujući najbolje prakse za detekciju funkcija i pristupačnost, možete isporučivati ​​karusele koji su brzi, robusni i lakši za održavanje od tradicionalnih JS-vođenih slajdera - a istovremeno zadržati dovoljno fleksibilnosti za miješanje s JavaScriptom tamo gdje to ciklička logika ili napredne interakcije zaista zahtijevaju.