CSS-karussellid ilma JavaScriptita: täielik juhend

Esileht » Python » CSS-karussellid ilma JavaScriptita: täielik juhend

Karussellide loomine ilma ühegi JavaScripti reata pole enam ulme.; tänapäevane CSS annab sulle kõik vajaliku sujuvate ja puutetundlike slaidide loomiseks, kasutades CSS-i puutetundliku tegevuse atribuut mis tunduvad brauseris natiivsed. Alates kerimisfunktsioonidest kuni eksperimentaalsete pseudoelementideni, mis genereerivad automaatselt navigeerimisjuhtelemente, saate pakkuda täisfunktsionaalseid komponente, hoides samal ajal oma paketi lihtsana ja elu lihtsamana.

Kui olete kunagi maadlenud mahukate JS-karusselliraamatukogude, hüdratsiooniprobleemide või ligipääsetavuse iseärasustega, on ainult CSS-il põhinevad karussellid tõeline värskus.Uusimate spetsifikatsioonidega (nt CSS Overflow Level 5) ja väljakujunenud funktsioonidega, näiteks scroll-snap-type, on nüüd realistlik tarnida tootmisvalmis karusselle, mis on kiired, klaviatuuri abil ligipääsetavad ja töökindlad, kui JavaScript on keelatud.

Miks muudab tänapäevane CSS JavaScripti karussellid valikuliseks

Aastaid oli küsimusele „kuidas karusselli ehitada?“ vaikimisi vastus „võta JS-i teek“.Swiper, Slick, Glide, Bootstrapi karussell ja paljud teised lahendasid probleemi, žongleerides teie eest sündmuste kuulajate, taimerite, suuruse muutmise vaatlejate ja ARIA rollidega – aga nad toppisid teie paketti ka lisa kilobaite ja lisasid veel ühe hooldamist vajava sõltuvuse.

Tänapäeval on CSS vaikselt järele jõudnud enamikele karusselli kasutusjuhtudeleMõne omaduse abil saate tavalise horisontaalse kerimisriba muuta lehekülgedega ja slaidile klõpsamise kogemuseks, mis töötab hiireratta, puuteplaadi, klaviatuuri noolte ja puutetundlike liigutustega. Puuduvad kuulajad, JS-loogikast tingitud ümberpaigutused ja raamistike hüdratsiooniga seotud võidujooksutingimused.

Põhiidee on lihtne: käsitlete oma karusselli keritava piirkonnana., mitte maagilise komponendina, mis slaidide vahel teleportreerub. Seejärel „aitab“ CSS kerimist klõpsupunktide, sujuvate üleminekute ja uusima spetsifikatsiooni kohaselt sisseehitatud nuppude ja markeritega, mille brauser DOM-i sisestab reaalsete interaktiivsete elementidena.

Sellel nihkel on suured tagajärjed jõudlusele ja vastupidavuseleCSS-karussell töötab laitmatult ka siis, kui JS on blokeeritud, laadimine ebaõnnestub või kasutaja on selle keelanud. Enamiku raskest tööst teeb ära brauseri enda kerimismootor, mis on kõigis suuremates mootorites ülimalt optimeeritud ning häälestatud väikese energiatarbega seadmetele ja hõlbustustööriistadele.

Lisaks sellele on CSS-i funktsioonideks näiteks :has(), ruudustiku paigutus ja kerimisjuhitud animatsioonid ühendatakse sama kerimisalaga, mis võimaldab teil luua keerukaid slaidiindikaatoreid, sisu paljastamisi või parallaksi ilma kolme erinevat süsteemi (teie koodi, raamatukogu loogikat ja brauseri kerimisriba) habras viisil ühendamata.

Põhielement: Scroll Snap ainult CSS-i karussellidele

Ainult CSS-ile mõeldud karusselli keskmes on Scroll Snap moodul., mis võimaldab teil määrata „magnetilised” punktid, millele kerimisasend peaks lukustuma pärast seda, kui kasutaja kerimise lõpetab. Kahe slaidi vahele jäämise asemel liigub vaade lähimale slaidile, andes klassikalise liuguri tunde.

HTML-i struktuur võib olla minimaalne: horisontaalselt keritav konteiner koos selle sees olevate slaidielementide seeriaga. Kui teie märgistus on järjepidev, ei pea te isegi igale pildile või kaardile eraldi klassi andma – kuigi üksuste nimetamine aitab sageli stiili ja ligipääsetavuse parandamiseks:

Näidisstruktuur lihtsa pildikarusselli jaoks võiks kontseptualiseerida kui ümbrist nagu <ul class="carousel"> mitmega <li> üksused, millest igaüks sisaldab pilti või kaarti. Maagia peitub CSS-is:

Sa defineerid konteineri horisontaalse paindliku paigutusena, kus kerimine on lubatud ja määrake, et see peaks piirduma x-teljega:

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

Iga üksik slaid kuvab seejärel klõpsukoha, tavaliselt vaatevälja keskel või alguses ja määrab fikseeritud aluse, nii et igas vaates kuvatakse üks või mitu:

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

See muster annab sulle juba üllatavalt tervikliku karusselliKasutajad saavad mobiilis libistada, hiire või puuteplaadiga kerida ning vaateaken jääb alati lähimale slaidile. JS ei jälgi kerimissündmusi ega reguleeri positsioone käsitsi.

Mitme kaubaga karussellide (nt tooteribade) loomiseks peate ainult paindlikku alust kohandama.Näiteks võite kuvada kolme elementi vaates väikese vahekaugusega, kasutades midagi sellist nagu flex: 0 0 calc(33.333% - 1rem) pluss külgveerised. Scroll Snap ei hooli, kas iga „leht” on üks täislaiuses slaid või rühm väiksemaid kaarte.

Omadused nagu object-fit: cover on kasulikud toorpiltidega töötamisel, tagades, et need täidavad slaidiala venitamata. Koos fikseeritud kuvasuhtega saate pildikarussellid, mis püsivad visuaalselt ühtlased igas ekraanisuuruses.

Lihtsatest kerimisribadest loomuliku tundega karussellideni

Paljas kerimisnupp-karussell tundub juba hea, aga tänapäevased spetsifikatsioonid viivad selle veelgi kaugemale, eriti Chrome'i versioonides 135+, kus CSS Overflow Level 5 mustand hakkab reaalsete funktsioonidena esile kerkima. Spetsifikatsioon käsitleb karusselli kerimisalana, mille ümber on valikuline brauseri loodud kasutajaliides.

Selles mudelis võrdub „karussell” ühe kerimisriba ja kuni kahe pakkumiste komplektiga.—kerimisnupud ja kerimismarkerid. Mõlemad on loodud CSS-i pseudoelementide abil, kuid brauser kuvab kerimisriba kõrval tegelikke DOM-i õdesid-vendi, nii et need käituvad nagu natiivsed juhtnupud.

Oluline on see, et brauser loob teie eest semantika, fookuse järjekorra ja olekuhalduse.Süstitud elementidel on õiged rollid, neid saab mõistlikus järjekorras tabulaatoritega liigutada ja need peegeldavad praegust kerimisasendit. See tähendab, et sama ligipääsetavuse taseme kopeerimine käsitsi loodud JS-teegiga pole triviaalne; vaja oleks ARIA atribuute, fookusgrupi käitumist, klaviatuuril navigeerimist ja reaalajas piirkondade teadaandeid, mis kõik töötaksid koos.

Isegi kui te pole veel valmis eksperimentaalsetele osadele toetuma, on see suund oluline.See annab märku, et karussellid, vahekaardid, ScrollSpy komponendid ja sarnased kasutajaliidese mustrid on CSS-is „esmaklassiliste kodanike“ staatuses, mis vähendab järk-järgult vajadust kohandatud JavaScripti liimikoodi järele.

Lõpptulemuseks on kõigile kasutajatele kindlam baasolukord.– sealhulgas inimesed, kes keelavad JS-i, tuginevad abitehnoloogiale, omavad vähese energiatarbega seadmeid või sirvivad ebastabiilsetes võrgutingimustes. Natiivne kerimine ja CSS-stiil on kõigis nendes olukordades ülimuslikud skriptimahukate vidinate suhtes.

Kerimisnuppude lisamine ::scroll-button() abil

Mõnel platvormil näete kerimisribade kõrval juba väikeseid nooli., aga uus ::scroll-button() pseudo-element läheb sammu võrra kaugemale ja laseb CSS-il määratleda spetsiaalsed „eelmise/järgmise” nupud igale keritavale alale – sealhulgas karussellidele.

Need CSS-i määratletud kerimisnupud käituvad erinevalt vanakooli kerimisriba nooltestSisu väikeste sammudega nihutamise asemel hüppavad nad iga klõpsuga umbes 85% nähtavast alast. Täislaiuses, klõpsuga joondatud karussellis tundub see peaaegu täpselt nagu slaidipõhine navigeerimisnupp.

Kui vajate tõesti täpselt ühe eseme liikumist, saate kombineerida kerimise haaramise valikuidTüüpiline retsept on scroll-snap-type: x mandatory konteineri peal ja scroll-snap-stop: always igal Snap-lapsel. Nii saate kerimisnupu ühe vajutusega hõlpsalt ühelt kaardilt teisele liikuda.

Süntaksi seisukohast näeb kerimisnuppude lisamine välja nagu teiste pseudoelementide kujundamine.Sa valid keritava elemendi (näiteks .carousel) ja sihtmärk ::scroll-button(left) or ::scroll-button(right) edasi-tagasi juhtnuppude kujutamiseks. Minimaalne näide:

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

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

Kaldkriipsuga eraldatud sisuväärtus võimaldab teil luua nii visuaalse kui ka ligipääsetava sildi.Seejärel loob brauser päris <button> sõlmed teie kerimisala õdede-vendadena ja paigutab teie sisu nende sisse. Teil on vabadus neid vastavalt oma soovile paigutada ja kujundada, nagu iga teist elementi – kasutades absoluutset positsioneerimist, CSS-ruudustikku või isegi ankrupositsioneerimist.

Fookuse stiil on siin endiselt olulineNäiteks sellise reegli rakendamine nagu .carousel::scroll-button(*):focus-visible { outline-offset: 5px; } tagab, et kui kasutajad nendele nuppudele klõpsavad, näevad nad elemendi äärisest selget nihutatud fookusrõngast, säilitades seeläbi klaviatuuri kasutatavuse ja WCAG-i nõuetele vastavuse.

Kapoti all jälgib brauser nuppude olekut ja saadaolevat kerimisvahemikkuSee tähendab, et te ei pea muretsema esimese slaidi juures oleva nupu „eelmine” või lõpus oleva nupu „järgmine” keelamise pärast; platvorm saab nende tingimustega standardiseeritud viisil hakkama.

Kerimismarkerid ::scroll-marker() abil täpploendi või sildi navigeerimiseks

Visuaalsed markerid – täpid või pisipildid karusselli all – on tänapäeval kasutajate poolt peaaegu oodatud.. Uus ::scroll-marker() pseudoelement võimaldab teil neid indikaatoreid genereerida rangelt CSS-iga, millest igaüks on lingitud keritava loendi kindla üksusega.

Erinevalt kerimisriba pöidlast tähistavad kerimismarkerid semantilisi huvipunkteIga marker ei vasta mitte ainult pikslite positsioonile, vaid ka tegelikule alamelemendile, mistõttu on see ideaalne selliste stsenaariumide jaoks nagu telesarjade hooajad, tootekategooriad või loo loogilised peatükid, mitte iga üksiku kaadri jaoks.

Markerid kuvatakse kehtivatena <a> elemendid, pakkudes teile tasuta kahte olulist funktsiooni: lehesisese navigeerimise ja ekraanilugejate jaoks õige semantika. Need käituvad sarnaselt ankrulinkidele, kuid mõningate karusselli kasutamiseks kohandatud täiustustega.

Nende täiustuste hulgas on ka :target-current pseudoklass, mis sobib siis, kui vastav element on hetkel vaatesse kinnitatud või muul viisil „aktiivseks slaidiks“ loetud. Saate seda kasutada aktiivse markeri esiletõstmiseks erineva tausta või äärisega.

Selle ühendamiseks peate kõigepealt määrama, kus markerite rühm peaks asuma. kasutades scroll-marker-group konteineri omadus, tavaliselt enne või pärast kerimisriba. Näiteks scroll-marker-group: after; paigutaks markerid DOM-is karussellipiirkonna järele.

Seejärel sihite individuaalsed lapsed, kes peaksid markereid genereerimaKui teie slaidid on <li> elemendid, midagi sellist .carousel > li::scroll-marker sobib. Levinud muster on tühjade punktide loomine:

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

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

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

Brauser hoolitseb selle genereerimise eest <a> markerid, grupeerides need spetsiaalsesse ::scroll-marker-group konteinerisseja kuvades neid klaviatuuril navigeeritavate elementidena, mis käituvad nagu fookusgrupp. Ekraanilugerid saavad neid kuvada sarnaselt tabelloendiga: liigutate fookust markerite vahel ja aktiveerite need konkreetsele slaidile hüppamiseks.

Markerid ei piirdu ainult täppidega. Saate määrata content numbriteks ("1", "2"jne), inimloetavaid silte nagu „1. hooaeg” või „3. peatükk” või isegi tekstisiseseid pilte, et luua pisipiltide galeriisid fotorohkete paigutuste jaoks, näiteks e-kaubanduse tootegaleriid.

Nuppude, markerite ja varustrateegiate kombineerimine

Kui kerimisnuppe ja markereid kerimiskarusselli peal kombineerida, saadakse komponent, mis tundub JS-lahendusest eristamatu., kuid seda on lihtsam hooldada ja sellel on vähem liikuvaid osi. Kasutajad saavad klõpsata nooltel, puudutada täpploendeid, libistada puutetundlikel ekraanidel või kasutada klaviatuuril navigeerimist – kõik see toimib ühtlaselt.

See kombinatsioon lahendab ka levinud jõudluse ja kasutajakogemuse probleemidKuna ükski skript ei koordineeri slaidide muudatusi, siis käsitsi paigutust muutes ei teki seda. scrollLeft kohandused või taimerid, mis käivituvad ebamugavatel aegadel. CLS (kumulatiivne paigutuse nihe) on väiksem, kuna DOM-puu on algusest peale valmis ja te ei süsti ega mõõda elemente elutsükli hilisemas etapis.

Siiski on üks konks: ::scroll-button ja ::scroll-marker on endiselt katsejärgus. ja praegu jõuavad need Chrome'i versioonidesse 135+ ainult eksperimentaalsete lippude taha. See tähendab, et kui kavatsete neid tootmisveebisaitidel kasutada, peate kindlasti looma sujuvad varuvariandid.

Funktsioonide tuvastamine läbi @supports on siin teie parim liitlaneSaate renderdada traditsioonilise navigeerimisriba – lingid saidile #slide1, #slide2 ja nii edasi – vaikimisi peidetakse see siis, kui natiivsed juhtelemendid on saadaval. Ligikaudne kontseptuaalne muster näeb välja selline:

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

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

HTML-is piisab lihtsast navigeerimisribast ankrulinkidegaiga slaid saab idja navigeerimisriba osutab nendele ID-dele. Kerimis-klõpsuga konteineri sees olevale ankrule hüppamine integreerub hästi klõpsutoiminguga, nii et slaid klõpsub pärast hüpet korralikult.

See tähendab, et saate nautida eksperimentaalsete pseudoelementide eeliseid toetavates brauserites.—täielikud natiivsed nupud, markerid ja kerimisoleku konksud — pakkudes samal ajal mujal täielikult funktsionaalset kogemust. Ükski kasutaja ei jää hätta kasutuskõlbmatu liuguriga.

Lisaks sellele töötab see kõik ka siis, kui JavaScript on keelatud., sest sa toetud täielikult HTML-ankrutele, CSS-i kerimiskäitumisele ja brauseri kerimismootorile. Paljude UX-mustrite – galeriide, ajajoonte, samm-sammult esitluste – puhul on see enam kui piisav.

Ainult CSS-i automaatesitusega karussellid võtmekaadri animatsioonidega

Üks levinud funktsioon, mida inimesed karussellilt ootavad, on automaatne esitamine.—slaidid liiguvad automaatselt mõne sekundi pärast edasi. Kuigi seda rakendatakse sageli JavaScripti taimeritega, saab seda käitumist ligikaudselt kirjeldada ka puhaste CSS-animatsioonide abil.

Nipp seisneb kõiki slaide sisaldava paindliku rea teisenduse animeerimises.Fikseeritud arvu slaidide puhul defineerite võtmekaadrite ajajoone, kus rada püsib mõnda aega iga slaidi positsioonil ja seejärel hüppab järgmisele. Näiteks:

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

Seejärel rakendate selle animatsiooni ümbrisele mis hoiab teie slaidielemente, nt .autoplay-carousel { display: flex; animation: slide 12s infinite; }Protsendivahemikud määravad iga slaidi „viivitusajad“, et sisu oleks enne edasiliikumist loetav.

On ülioluline lisada viis, kuidas kasutajad saaksid automaatse esitamise peatadaLihtne, aga tõhus muster on kursori hõljutamisel peatumine .autoplay-carousel:hover { animation-play-state: paused; }, nii et lauaarvuti kasutajad saavad sisuga suheldes liikumise peatada.

Ligipääsetavuse kaalutlused lähevad liikumisvalikutega veelgi kaugemale. Austades prefers-reduced-motion peetakse parimaks tavaks, seega saate animatsiooni täielikult keelata kasutajatele, kes eelistavad vähem liikumist:

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

Kuigi CSS-i automaatse esitamise lahendused ei suuda hõlpsalt hakkama saada kõigi servadega, mida JS suudab– nagu tõeliselt dünaamilised slaidide arvud või keerukas kasutajakeskne pausi/jätkamise loogika – on need üllatavalt head lihtsate staatiliste karussellide jaoks, kui soovite skriptimist täielikult vältida.

Ainult CSS-i ja JavaScripti karussellide võrdlus

Karusselli jaoks CSS-i ja JavaScripti vahel otsustamine ei ole kõik-või-midagi-küsimus.; see sõltub teie nõuetest, sihtrühmast ja hoolduseelarvest. Kuid paljudes reaalsetes stsenaariumides on tasakaal tugevalt CSS-i kasuks nihkunud.

Toimivuse seisukohast on CSS-karussellid selged võitjad.Teegikoodi parsimist ega käivitamist ei toimu, iga kerimisinteraktsiooni korral ei kuulata sündmusi ega skriptitud kohanduste poolt käivitatavaid käitusaja paigutuse ümberarvutusi. Brauseri kerimismootor on kirjutatud ülimalt optimeeritud natiivkoodis ja häälestatud kõigele alates tipptasemel lauaarvutitest kuni väikese energiatarbega telefonideni.

Ligipääsetavuse osas tõstavad uued CSS-i karussellifunktsioonid lati märkimisväärselt.Brauseri pakutavad kerimisnupud ja markerid on eelnevalt programmeeritud ARIA rollide, klaviatuuri käitumise ja teadetega, mis muidu tuleks JavaScriptis hoolikalt uuesti luua. Isegi ilma nendeta saab kerimiskarusselli rollide ja siltide abil hõlpsaks muuta.

Teisest küljest on JavaScript endiselt kasulik väga keerukate mustrite jaoks.Kui vajate keerukat automaatse esitamise loogikat, analüütilisi konksusid, kohandatud füüsikat või soovite sünkroonida mitut jagatud olekuga karusselli (nt põhipilt pluss pisipiltide rida pluss väline lehekülgjaotus), võivad skriptipõhised lähenemisviisid olla siiski paindlikumad.

Peamine mõte on aga see, et paljud „igapäevased” karussellid ei vaja tegelikult sellist keerukusastet.Lihtsa tootegalerii, iseloomustuse slaidi või „esiletõstetud postituste” riba saab tavaliselt luua kerimisliigutuse, mõne CSS-reegli ja valikuliste natiivsete juhtelementide abil, säästes teid 50KB suuruse sõltuvuse hankimisest ainult kolme slaidi vahel liikumiseks.

Teine kaalutlus on vastupidavus JavaScripti ebaõnnestumise korralAinult CSS-il põhinevad karussellid töötavad laitmatult ka siis, kui JS on ettevõtte puhverserver blokeeritud, reklaamiblokeerija katki või pole lihtsalt veel laaditud, kui kasutaja lehele jõuab. Sellist sujuvat halvenemist on raske saavutada teekidega, mis sõltuvad lehe laadimise järgsest initsialiseerimisfaasist.

CSS-karussellide ligipääsetavuse parimad tavad

Isegi kui brauser aitab mõne ligipääsetavuse aspektiga, on teil ikkagi oluline roll et muuta oma CSS-karussell kõigile kasutatavaks. Semantika, fookuse haldamine ja liikumistundlikkus peaksid kõik olema teie meelest esiplaanil.

Esmalt määrake karussellile sobiv orientiirSelle mässimine elementi, millel on role="region" ja kirjeldav aria-label näiteks „Tootegalerii” või „Esiletõstetud artiklid” muudab ekraanilugeja kasutajatel leidmise ja mõistmise lihtsamaks.

Igal slaidil võib olla ka ligipääsetav siltnäiteks läbi aria-label näiteks „Slaid 1/3”, „Slaid 2/3” jne. Nii saab kasutaja slaidile jõudes kohe konteksti oma positsiooni kohta järjestuses.

Ära unusta nähtavaid fookusindikaatoreidIga interaktiivne element – ​​olgu see siis ::scroll-buttono ::scroll-marker-genereeritud link või käsitsi lisatud ankur varuvaliku navigeerimisribal – vajab selget fookusstiili, mis vastab kontrasti juhistele ja mida globaalsed lähtestused ei eemalda.

Automaatse esitamise või kerimispõhiste animatsioonide kasutamisel arvestage liikumiseelistusega.. Kasutades prefers-reduced-motion Animatsioonide keelamine või lihtsustamine pole valikuline, kui hoolite kasutajatest, kellel on kalduvus liikumishaigusele, ja intensiivsemate efektide mähkimine meediapäringusse on piisavalt lihtne.

Lõpuks kaaluge puutetundlike sihtmärkide suurusiOlenemata sellest, kas kujundate natiivseid kerimismarkereid või oma navigeerimislinke, hoidke interaktiivsete alade suurus vähemalt umbes 44 × 44 CSS-pikslit. See tähendab tavaliselt rohkelt täitematerjali ja vahesid, mitte tihedalt koos olevaid pisikesi ringe.

Reaalse maailma töövood, tööriistad ja tulevikusuunad

CSS-karussellidega katsetamise lihtsustamiseks on mõned meeskonnad loonud reaalajas konfigureerimistööriistad. kus saab lüliteid vahetada – kerimisnuppe lubada, markereid vahetada, klõpsurežiime reguleerida – ja koheselt näha selle konfiguratsiooni jaoks vajalikku uuendatud CSS-i. Need mänguväljakud on suurepärased õppimiseks nokitsemise teel.

Lisaks konfiguraatoritele näitavad CSS-i karusselli demode kureeritud galeriid, mis on võimalikLeiad mustreid nagu vahekaartidega liidesed, ScrollSpy navigeerimine, samm-sammult slaidid, pisipiltide galeriid ja palju muud, mis kõik jagavad sama kerimisalade alust koos haaramise ja valikuliste juhtelementidega.

Paljud neist demosaitidest ei sisalda tahtlikult JavaScripti selle väite tõestuseks: rikkaliku ja interaktiivse kasutajaliidese loomine on täiesti saavutatav ainult HTML-i ja CSS-iga. Nad avaldavad oma utiliite sageli läbi @layer deklaratsioonid, et saaksite neid kontrollida ja valida stiile, mis sobivad teie enda disainisüsteemiga.

Tulevikku vaadates töötab CSS-platvorm juba kahel olulisel arenguteelEsimene on „too oma elemendid“, kus brauseri loodud nuppude ja markerite asemel saate ise oma elemente lisada. <a> ja <button> märgistus, saades samal ajal kasu aluseks olevast kerimisloogikast.

See avaks ukse kaubamärgiga, rikkaliku stiiliga juhtelementidele, mis on loodud utiliidiraamistike abil. nagu Tailwindis, säilitades samal ajal platvormi poolt juhitava semantika ja käitumise. Sa sisuliselt kaunistaksid kasutajaliidest, kuid jätaksid brauseri operatsiooni ajuks.

Teine suur valdkond on tsükliline ehk lõputu keriminePaljud tänapäevased karussellid „murduvad“ lõppu jõudes, liikudes sujuvalt tagasi esimesele slaidile. Selle selge rakendamine on keeruline, hõlmates sageli dubleerivat sisu või keerukat loogikat. Platvormitasemel tsüklilise kerimise tugi võimaldaks brauseritel kerimisega elegantsemalt ja tõhusamalt toime tulla.

Nende funktsioonide küpsedes ja Chrome'ist teistesse mootoritesse levides, väheneb lõhe „natiivse CSS-karusselli” ja suuremahuliste JavaScripti teekide pakutava vahel jätkuvalt, muutes skriptivabad lähenemisviisid vaikimisi lähtepunktiks, mitte ääremaa eksperimendiks.

Kokkuvõttes annab tänapäevane CSS teile igati põhjust karussellide loomise ümbermõtlemiseks.Alustades lihtsast kerimisfunktsiooniga paigutusest, lisades toetatud kohtades eksperimentaalseid nuppe ja markereid ning hajutades ligipääsetavuse parimaid tavasid, saate luua reageerivaid, sujuvaid ja töökindlaid liugureid ilma JS-sõltuvuse poole pöördumata. Paljude projektide puhul tähendab see kiiremaid lehti, vähem koodi hooldamist ja vastupidavamat kogemust iga kasutaja jaoks.