Loo täiustatud CSS-karusselle ilma JavaScriptita

Esileht » Python » Loo täiustatud CSS-karusselle ilma JavaScriptita

Karussellide loomine ainult moodsa CSS-i abil pole enam toruunistus—see on väga reaalne, tootmisvalmis valik, mis suudab sageli klassikalisi JavaScripti slaiditeegid paremini sooritada. Tänu sellistele funktsioonidele nagu kerimisklõpsamine, kerimispõhised animatsioonid, eksperimentaalsed karusselli pseudoelemendid ja robustsed ligipääsetavuse primitiivid, saate tarnida kergeid ja vastupidavaid karusselle, mis tunduvad siiski sujuvad, interaktiivsed ja viimistletud.

Kui oled väsinud 50KB JavaScripti kimpude sisse tõmbamisest ainult mõne slaidi näitamiseks, see juhend tutvustab teile, mida tänapäeva CSS teie heaks teha saab. Me selgitame CSS-i-põhiste karussellide põhikontseptsioone, kuidas neid kerimise abil ühendada ja millal uuele tehnoloogiale toetuda. ::scroll-button() ja ::scroll-marker() pseudoelemente ja kuidas lisada automaatset esitamist või ringikujulist käitumist, käsitledes samal ajal ligipääsetavust ja jõudlust esmaklassilistena.

Miks on ainult CSS-ile mõeldud karussellid lõpuks tõsiseltvõetav valik?

Aastaid oli „karussell” peaaegu „JavaScripti plugina” sünonüüm.Sellised lahendused nagu Swiper, Glide või kohapeal väljatöötatud liugurid olid eelistatud lähenemisviis: need käsitlesid navigeerimist, olekut, klaviatuuri tuge ja puutežeste, kuid lisakaalu, kõikjal asuvate sündmuste kuulajate ja paraja hulga DOM-i võimlemise hinnaga.

Kaasaegne CSS on vaikselt suurema osa sellest tühimikust täitnud. Selliste omadustega nagu scroll-snap-type ja scroll-snap-align, saate muuta iga horisontaalse või vertikaalse kerimisriba lehekülgedega jaotatud kogemuseks. Lisaks sellele tutvustab CSS Overflow Level 5 spetsifikatsioon brauseri loodud kerimisnupud ja markerid mis käituvad nagu täisfunktsionaalne karussellliidese, aga on täielikult CSS-is deklareeritud.

Suur võit on see, et põhiliste UX-probleemide eest vastutab brauser, mitte teie JavaScripti kood.: kerimisfüüsika, klaviatuuril navigeerimine, fookuse järjekord ja isegi karusselli juhtelementide ARIA rollid. Paljudel juhtudel on tõeliselt raske luua midagi ligipääsetavamat ja paremini toimivat kui see, mida platvorm teile kohe karbist võttes pakub.

CSS-karussellide teine ​​​​oluline eelis on vastupidavus.Kui JavaScripti laadimine ebaõnnestub, saavad blokeeritud või keelatud skriptidega kasutajad ikkagi täiesti kasutatava keritava üksuste komplekti. Puudub hüdratsioon, hilinenud laadimisega kaasnev paigutuse nihe ja palju vähem liikuvaid osi, mis võivad aja jooksul valesti minna.

Põhielement: keritav konteiner Scroll Snapiga

Iga ainult CSS-ile mõeldud karussell alustab elu tavalise keritava konteinerina.Mõtle lihtsale slaidide loendile, mida saab horisontaalselt kerida. Sealt lisad kerimise klõpsu, nii et vaateaken lukustub loomulikult iga slaidi külge.

Horisontaalse karusselli minimaalne HTML-struktuur on tahtlikult lihtne.: ümbriselement ja selle sees slaidiüksuste seeria. Võite kasutada ul koos li elemente või a div lapsega divs—CSS teeb raske töö ära, seega pole vaja iga lapse jaoks eraldi tunde anda, välja arvatud juhul, kui teie disain seda nõuab.

Lihtne kerimisklõpsu seadistus võiks CSS-is välja näha selline, eeldades täislaiuses ühe slaidi vaadet:

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

Siin kasutab konteiner display: flex oma lapsed horisontaalselt ritta seadmaja overflow-x: auto kerimise lubamiseks. Maagia peitub selles scroll-snap-type: x mandatory, mis annab brauserile teada, et horisontaalne kerimine peaks alati jääma kehtivale haaramispunktile ja scroll-snap-align: center igal slaidil, mis määrab need ühenduspunktid.

See flexboxi ja scroll snapi kombinatsioon tundub koheselt karusselli moodi: kasutajad kerivad või libistavad ja lähim slaid klõpsab oma kohale. Kuna see kasutab loomulikku kerimist, töötab puutetundlik sisestus telefonides ja tahvelarvutites lihtsalt ilma igasuguse sekkumiseta. žestide käitlejad või lisaraamatukogud.

Sa ei ole piiratud ühe üksuse vaatamisegaMitmeveeruliste karussellide puhul, mis kuvavad korraga mitut kaarti, saate üksuste jaoks kasutada paindlikku laiust, näiteks:

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

See variatsioon võimaldab kuvada näiteks kolme kaarti vaatevälja kohta väikese vahekaugusega., saades samal ajal kasu haaramiskäitumisest. Kasutajad libistavad läbi kaardilehtede, mitte üksikute kangelasslaidide, mis toimib suurepäraselt tooteloendite või galeriide puhul.

Kerimisnupud pseudoelemendiga ::scroll-button()

Kui sul on kerimisriba, siis järgmine asi, mida enamik inimesi soovib, on selged navigeerimisnupud.—eelmise ja järgmise juhtnupud, mis liigutavad karusselli vasakule või paremale. Tavaliselt lood <button> elemente, seovad klõpsamissündmused ja arvutavad, kui kaugele kerida.

CSS Overflow 5 spetsifikatsioon tutvustab ::scroll-button(), pseudoelement, mis laseb brauseril teha kõik selle raske tööKuigi see on praegu saadaval alates Chrome'i versioonist 135 (ja alguses tavaliselt katseliste lippude taga), annab see väikese ülevaate sellest, kuidas karusselle edaspidi luuakse.

Kerimisnupud deklareeritakse samamoodi nagu iga teine ​​pseudoelement.Näiteks karusselli jaoks vasaku ja parema nupu genereerimiseks:

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

Kui seda CSS-i rakendatakse, loob brauser tegelikult päris <button> elemendid kerimiskonteineri õdede-vendadena, ühendab need kerimisribaga, määrab neile sobivad rollid ja juhib nende käitumist. Ühe klõpsuga keritakse tavaliselt umbes 85% kerimisalast, mis enamikus karussellipaigutustes tundub nagu „leht“.

Kui teie kujundus eeldab täpselt ühte täislaiuses elementi klõpsu kohta, saate neid pseudoelemente kombineerida iga lapse rangema haaramisega, lisades scroll-snap-stop: alwaysSee sunnib vaatevälja maanduma esemete piiridele, mitte peatuma keskel.

Sisu omadus täidab siin topeltfunktsiooni: esimene väärtus on see, mida kasutajad visuaalselt näevad (antud juhul noolemärgid) ja teine ​​string on ligipääsetav varutekst, mida saab kuvada abitehnoloogia abil. Neid nuppe saab CSS-i abil vabalt kujundada ja paigutada või kasutada selliseid funktsioone nagu anchor() et need teie paigutusega täpselt joondada.

Kerimismarkerid ::scroll-marker() ja ::scroll-marker-group abil

Karusselli all olevad punktid või sildid – mida sageli nimetatakse lehekülgede jaotamise täpploenditeks või markeriteks – on veel üks levinud nõue.Need näitavad, mitu elementi on olemas ja milline neist on hetkel nähtav, ning võimaldavad kasutajatel otse kindlale slaidile hüpata.

. ::scroll-marker() pseudoelement annab sulle need indikaatorid ilma ankrulinkide või ulatuste käsitsi genereerimataIga marker on sisuliselt navigatsiooniseade. <a> Brauseri loodud element, mis osutab vastavale kerimisüksusele ning osaleb klaviatuuri ja ekraanilugeri navigeerimises.

Selle seadistamiseks peate brauserile ütlema, kuhu markerirühm paigutada. koos scroll-marker-groupja millistele elementidele markereid luua. Minimaalne konfiguratsioon võiks välja näha selline:

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

Brauser loob ::scroll-marker-group konteiner kerimisriba õena ja täidab selle iga valitud alamjaotuse kohta ühe markerigaSelles lihtsas näites on markerid kuvatud tühjade punktidena, aga sama hästi saab kasutada teksti nagu „Hooaeg 1“, ikoone või isegi pisipilte, muutes content vara.

Mis teeb need markerid tavalise kerimisribaga võrreldes eriliseks? on see, et need on päris navigeerimislingid. Need võimaldavad kasutajatel otse olulistele positsioonidele hüpata ja neil on kasulik semantika: on olemas :target-current olek, mis näitab, milline marker vastab hetkel kuvatavale või klõpsitud slaidile. Klaviatuuritugi toimib nagu fookusgrupp ja ekraanilugejad saavad neid kuvada tabelloendilaadse juhtelemendina.

See strateegia on eriti võimas, kui teie kerimisriba kuvab loogilisi osi, mitte üksikuid elemente.Näiteks kümne episoodi jaoks kümne markeri loomise asemel võite luua kaks markerit, mis liiguvad esimese ja teise hooaja algusesse. Teil on vabadus otsustada, millised „huvipunktid” peaksid olema käsitletavad.

Nuppude ja markerite ühendamine täielikuks karusselli kasutajaliideseks

Kui sa paned ::scroll-button() ja ::scroll-marker() koos samal kerimisribal, saate kasutajaliidese, mille kasutajad tunnevad koheselt karusselli ära: eelmise/järgmise juhtnupud, markerite rida, mis näitavad, kui kaugele nad on jõudnud, ja sujuv slaidide vahetamine.

Peamine erinevus klassikalistest JavaScripti liuguritest on see, et suurem osa sellest loogikast asub nüüd brauseris.Nupud ja markerid on genereeritud elemendid, millel on õiged ARIA rollid, mis on õigesti integreeritud tabulaatorijärjekorda ja mille ligipääsetavuse lugu on kujundanud aluseks olevad brauserimeeskonnad, mitte iga saidi jaoks uuesti leiutatud.

See lähenemisviis pakub mitmeid väga praktilisi eeliseidSee töötab ka siis, kui JavaScript on keelatud, kõrvaldab hüdratsiooni virvenduse ja ajastusprobleemid, vähendab kumulatiivset paigutuse nihet, kuna juhtelemendid on CSS-i paigutuse ajal teada, ning integreerub sujuvalt kerimispõhiste animatsioonide või kerimisoleku päringutega, kui soovite lisada särtsu.

Puutetundlikel seadmetel on kogemus loomulikult sõrmesõbralik sest kerimiskonteiner on ikkagi lihtsalt natiivne kerimisrullik. Lauaarvutites toimivad hiireratas ja klaviatuuri sisend ootuspäraselt ning genereeritud juhtelementide fookuse indikaatoreid saab kujundada vastavalt teie disaini- ja ligipääsetavuse juhistele.

Hoolduse seisukohast on „tee vähem, jõua rohkem” üsna täpne kirjeldus.Selle asemel, et säilitada projektides mitme karusselli juurutuse loogikat, toetute jagatud, standardiseeritud platvormi funktsioonidele, mis aja jooksul täiustuvad ilma teiepoolse lisatööta.

Scroll Snapi toimima panemine päris projektides

Isegi kui uusi pseudoelemente hetkeks ignoreerida, on ainuüksi kerimisklõps paljude tootmiskarussellide jaoks juba piisavalt hea.Kerimisklõpsu tugi brauserites on tänapäevastes otsingumootorites usaldusväärne ning käitumine on etteaimatav nii hiireratta kui ka puutežestide puhul.

Lihtsamal juhul võib teie HTML-karussell olla div mille sees on piltide seeriaSaate sellele konteinerile anda klassi, näiteks .carousel ja jäta alampildid liigitamata; CSS tegeleb joondamise ja kerimisega.

Sisse lülitades scroll-behavior: smooth konteineri peal, muutub kerimispunktide vaheline kerimine meeldivalt animeerituks, mitte hüplikuks. See on eriti märgatav siis, kui kasutajad klõpsavad markeritel või ankrulinkidel või kui käivitate kerimise programmiliselt hübriidseadistustes.

Igal klahvi kerimisklõpsamise omadusel on väga erinev roll. scroll-snap-type määratleb telje ja kas haaramine on kohustuslik või lihtsalt vihje; scroll-snap-align lastele määrab, kus nad vaatevälja lukustuvad (algus, keskpunkt, lõpp); ja scroll-snap-stop: always takistab brauseril kiirel kerimisel ühenduspunktide üle hüppamist.

Koos kasutades võimaldavad need omadused teil täpselt määrata, kuidas karussell peaks tunduma– alates õrnast ja andestavast klõpsamisest, mis sobib suurte sisusektsioonide jaoks, kuni range, slaidihaaval toimuva käitumiseni, mis sobib ideaalselt kangelasbännerite jaoks, kus te ei soovi kunagi esemete „vahele” maanduda.

Kuna see on puhas CSS, saate paigutust hõlpsalt reageerivalt kohandadaMeediapäringute puhul saab kitsastel ekraanidel ühe slaidi vaatamise kohta vahetada laiadel töölaudadel mitme slaidi vaatamise kohta, lihtsalt slaidipilti muutes. flex-basis üksustest. JavaScripti katkestuspunkte, suuruse muutmise kuulajaid ega ümberarvutatud laiusi pole vaja.

Eksperimentaalsed pseudoelemendid ja tunnuste tuvastamine

Uued karussellile orienteeritud pseudoelemendid –::scroll-button(), ::scroll-marker() ja ::scroll-marker-group—on võimsad, aga siiski suhteliselt värskedKirjutamise ajal on need saadaval Chrome'i versioonis 135 ja uuemates, sageli on vaja katselisi märguandeid, ning aja jooksul tehakse need kättesaadavaks ka teistele mootoritele.

Kuna tugi pole veel universaalne, peaksid tootmissaidid lootma funktsioonide tuvastamisele ja sujuvatele varuvariantidele.CSS annab sulle @supports at-rule, mis võimaldab teil tingimuslikult reegleid rakendada omaduste tuvastamise põhjal.

Võiksite määratleda lihtsa varuvaliku navigeerimisriba– linkide või nuppude komplekt, mis asub karusselli all – ja peidab selle riba, kui brauser toetab natiivseid kerimisnuppe. Näiteks:

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

Siin .carousel-nav võib sisaldada käsitsi kirjutatud ankrulinke, mis osutavad slaididele ID-de kauduNagu <a href="#slide1">1</a>Brauserites, mis uut kerimisnupu omadust mõistavad, kuvatakse teie natiivsed juhtnupud ja varumenüü on peidetud; vanemates brauserites jääb ankurnavigatsioon alles koos kerimisnupuga, et tagada ideaalselt kasutatav kogemus.

See hübriidstrateegia muudab järgmise põlvkonna karussellifunktsioonidega katsetamise juba täna ohutuks., ilma et peaksite end kindlasse mootorisse või lipukonfiguratsiooni lukustama. Brauseri toe arenedes saate rohkem pseudoelementidele toetuda ja käsitsi tellinguid kärpida.

Ainult CSS-i automaatesitusega karussellid võtmekaadri animatsioonidega

Teine levinud päring on automaatne esitamine – karussell, mis liigub ise edasi ja valikuliselt peatub hiire liigutamiselKuigi automaatse esitamisega kaasnevad mõned kasutajakogemuse ja ligipääsetavuse osas piiratud piirangud, on seda võimalik saavutada ka ainult CSS-animatsioonide abil.

Lihtne muster on slaidiraja horisontaalse nihkumise animeerimine.

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

Selles näites veedavad võtmekaadrid enne järgmisele slaidile liikumist iga nihke juures teatud aja.Lugu kordub lõpus tagasi, jättes mulje korduvast slaidiseansist, mis koosneb neljast slaidist. Karusselli kohal hiirega liikumine peatab animatsiooni, nii et kasutajad saavad sisu uurida ilma pideva liikumisega võitlemata.

Kasutajate austamiseks, kes eelistavad tervise või mugavuse huvides piiratud liikumisvõimet, saate animatsiooni meediapäringusse mähkida:

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

See tagab, et süsteemides, kus nõutakse liikumispiirangut, jäävad liugurid paigale., keelates sisuliselt automaatse esitamise, lubades samal ajal käsitsi kerimist või nuppude/markerite abil navigeerimist, kui see on olemas.

Üks oluline kompromiss on see, et võtmekaadripõhine automaatne esitamine ei integreeru automaatse kerimisklõpsuga.Sa tõlgid sisu käsitsi, selle asemel et tugineda loomulikule kerimisrežiimile, seega pead animatsiooni hoolikalt kujundama, et vältida pooleldi nähtamatuid slaide ja hoida ajastus paigutusega sünkroonis.

CSS-karussellide ligipääsetavuse kaalutlused

Ligipääsetavus on valdkond, kus CSS-põhised karussellid saavad tõeliselt särada, sest suur osa loogikast nihkub teie kohandatud koodist platvormi käitumismallidele, mis on hoolikalt kavandatud ja testitud.

Kui tuginete loomulikule kerimisele ja kerimisfunktsioonile, saate automaatselt klaviatuuri, puutetundliku ekraani ja hiire toe.Kasutajad saavad kerimisribal liikuda tabulaatoriga, nooleklahve kasutada, puutetundlikel ekraanidel libistada ja rattaga kerida, ilma igasuguste sündmuste kuulajate või kohandatud käitlejateta.

Eksperimentaalsed kerimisnupud ja markerid lähevad sammu võrra edasiBrauser loob need sobiva semantikaga, integreerib need tabulaatorijärjekorda ja säilitab nende olekut, mistõttu on ARIA atribuutide kogemata unustamine või vale märgistamine väga keeruline. Saadud karusselli juhtelemendid on tavaliselt järjepidevamalt ligipääsetavad kui kodus rullitud rakendused.

Karussellipiirkondadele saab ja peaks ikkagi semantilisi vihjeid lisamaNäiteks konteineri märgistamine role="region" ja kirjeldav aria-label aitab ekraanilugeja kasutajatel mõista, mida komponent esindab:

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

Kõigi interaktiivsete elementide nähtavate fookusindikaatorite tagamine on endiselt üliolulineOlenemata sellest, kas juhtelemendid on teie enda nupud ja lingid või brauseri loodud pseudoelemendid, veenduge, et fookuse kontuurid poleks eemaldatud ega liiga peeneks muudetud. outline, outline-offset või tausta muudatusi vastavalt vajadusele kontrastinõuete täitmiseks.

Puutepunkti suurus on veel üks praktiline kaalutlusPüüdke saavutada juhtelementide suurus vähemalt 44 × 44 pikslit, et need vastaksid levinud ligipääsetavuse juhistele ja et kasutajatel ei oleks väiksematel ekraanidel noolte või punktide puudutamisega raskusi.

Automaatse esituse funktsioonide puhul andke kasutajatele selge kontroll ja vältige liiga agressiivset liikumistPakkuda kursori hõljutamisel pausi tegemise nuppu või eraldi pausinuppu ning kaaluda automaatse esitamise vaikimisi väljalülitamist, kui sisu on tihe või tekstirohke. Koos prefers-reduced-motion, see muudab teie karusselli laiema publiku jaoks mugavamaks.

Ringikujulise või „lõpmatu” kerimise käsitlemine CSS-iga

Üks käitumine, mida inimesed sageli küsivad, on ringikujuline kerimineKui jõuad viimase slaidini ja kerid edasi, liigud sujuvalt tagasi esimesele slaidile, nagu füüsiline lõputult pöörlev karussell.

Tänapäeval pole otsest, puhtalt CSS-i omadust, mis muudaks kerimiskonteineri loomupäraselt ringikujuliseks.Sisu dubleerimata on natiivsel kerimisribal algus ja lõpp: kui olete jõudnud viimase üksuseni, siis edasine kerimine teid lihtsalt edasi ei vii.

Spetsifikatsiooni autorid on teadlikud, et paljud kasutajaliidese karussellid eeldavad sellist tsüklilist käitumist.ja aktiivselt tuntakse huvi platvormil põhinevate tsüklilise kerimise lahenduste uurimise vastu, sarnaselt uute kerimisnuppude ja markerite standardiseerimisele. Siiski ei saa hetkel brauserilt ühe CSS-deklaratsiooniga paluda kerimispositsioone natiivselt murda.

Puhtalt CSS-i seadistustes tähendab tsükli simuleerimine tavaliselt teisenduste animeerimist (nagu automaatse esitamise võtmekaadrite näidetes) või järjestuse lineaarse lõpu aktsepteerimist.Kui sujuv lõpmatus on absoluutselt vajalik ja sisu dubleerida ei saa, on JavaScript praegu endiselt paindlikum tööriist.

Hea uudis on see, et miski ei takista teil kombineerimast peamiselt CSS-il põhinevat karusselli pisikese JavaScriptiga, mis annab tõelist lisaväärtust.Igapäevaseks navigeerimiseks võid kasutada kerimisnuppe ja CSS-nuppe ning seejärel lisada paar rida skripti, et jälgida kerimispositsiooni ja vajadusel otsast algusesse hüpata.

HTML/CSS versus JavaScript rikaste kaardipõhiste karussellide jaoks

Uuemate arendajate sagedane dilemma on see, kas keerukam kaardikarussell peab olema kirjutatud JavaScriptis.Inimesed kujutavad sageli ette, et niipea, kui astutakse lihtsatest piltidest erinevate komponentidega reageerivate kaartide juurde, lakkab CSS üksi olemast elujõuline.

Praktikas töötab CSS-i kerimisklõps sama hästi nii rikkalike kaartide kui ka tavaliste piltide puhul.Niikaua kui iga kaart on kerimiskonteineris plokk, saate sellele klõpsata, selle ümber animeerida ja peale lisada täiendavaid stiile. Pealkirjad, nupud, tekstifragmendid ja isegi manustatud meedia ei muuda mehaanikat põhimõtteliselt.

JavaScript särab tingimusliku käitumise ja keerulise oleku poolest.Kui teie karussell peab kaarte dünaamiliselt filtreerima, slaide ümber järjestama, teiste komponentidega sünkroonima, uut sisu lennult tooma või toetama kõrgelt kohandatud loogikat („kui sellele punktile klõpsatakse, kuvatakse täiesti mitteseotud kaart”), siis saab JavaScript seda äriloogikat hõlpsamini väljendada kui ainult CSS.

Üllatavalt suur osa igapäevastest liuguritest on aga sisuliselt staatilised üksuste loendid, mis edeneb lineaarselt.Sellistel juhtudel on lihtsam arutleda ja jõudluse seisukohast parem kasutada vaid mõnda CSS-i rida, mitte importida suurt JS-i teeki. Scroll-Snapi ja uuemate pseudoelementide mõistmine võimaldab teil JavaScripti reserveerida harvadele juhtudele, kus see end tõesti ära tasub.

Kui alles õpid esiotsa arendust, on CSS-karussellide käsitlemine vaikimisi baasjoonena suurepärane harjumus.Alusta HTML-i ja CSS-iga ning haara skripti alles siis, kui jõuad selge piiranguni. See annab sulle rohkem teada, mida platvorm juba suudab teha, ja viib sageli lihtsamate ja puhtamate koodibaasideni.

Astudes sammu tagasi, esilekerkiv CSS-i funktsioonide komplekt kerimise, haaramise, nuppude, markerite ja kerimisoleku päringute kohta on muutnud karussellid skriptiderohketest vidinatest enamasti deklaratiivseteks komponentideks. Tuginedes lehe põhikäitumisele kerimisklõpsuga, kasutades ::scroll-button() ja ::scroll-marker() Kui see on toetatud ja rakendate funktsioonide tuvastamise ja ligipääsetavuse parimaid tavasid, saate pakkuda karusselle, mis on kiired, töökindlad ja hõlpsamini hooldatavad kui traditsioonilised JS-põhised liugurid – säilitades samal ajal piisavalt paindlikkust JavaScripti lisamiseks kohtades, kus tsükliline loogika või täiustatud interaktsioonid seda tõesti nõuavad.