Dala ama-carousel e-CSS athuthukile ngaphandle kwe-JavaScript

Ikhaya » Python » Dala ama-carousel e-CSS athuthukile ngaphandle kwe-JavaScript

Ukwakha ama-carousel ngaphandle kwe-CSS yesimanje akuseyona iphupho elilula—kuyindlela yangempela, elungele ukukhiqiza evame ukusebenza kangcono kunemitapo yolwazi ye-JavaScript yakudala. Ngenxa yezici ezifana nalezi ukuskena okuskrola, izithombe ezinyakazayo eziqhutshwa ukuskena, izakhi zamanga ze-carousel zokuhlola kanye nezinto zokuqala ezifinyeleleka kalula, ungathumela ama-carousel alula, aqinile asazwakala ebushelelezi, esebenzisana futhi ecwebezelayo.

Uma ukhathele ukudonsa ama-JavaScript bundle angu-50KB ukuze ubonise amaslayidi ambalwa, lo mhlahlandlela ukuqondisa kulokho i-CSS yanamuhla engakwenzela kona. Sizohlukanisa imiqondo ebalulekile ngemuva kwama-carousel e-CSS kuphela, ukuthi ungawahlanganisa kanjani nge-scroll-snap, nokuthi kufanele uncike nini kokusha. ::scroll-button() futhi ::scroll-marker() izinto mbumbulu, kanye nendlela yokuzifafaza ngokuzidlalela noma ukuziphatha okujikelezayo ngenkathi usaphatha ukufinyeleleka nokusebenza njengezakhamuzi zesigaba sokuqala.

Kungani ama-carousel e-CSS kuphela ekugcineni eyinketho ebalulekile

Sekuyiminyaka, igama elithi “carousel” cishe liyigama elifanayo nelithi “i-plugin ye-JavaScript”Izixazululo ezifana ne-Swiper, i-Glide noma ama-slider akhulele ekhaya kwakuyindlela esetshenziswa kakhulu: zazisingatha ukuzulazula, isimo, ukwesekwa kwekhibhodi kanye nokuthinta, kodwa ngenxa yesisindo esengeziwe, kwakunabalaleli bemicimbi yonke indawo kanye nenani elikhulu le-DOM gymnastics.

I-CSS yesimanje isivale buthule iningi lalelo gebe. With izakhiwo ezifana scroll-snap-type futhi scroll-snap-align, ungaguqula noma yisiphi iskrola esivundlile noma esiqondile sibe isipiliyoni esifakwe ekhasini. Ngaphezu kwalokho, i-CSS Overflow Level 5 spec yethula isiphequluli esikhiqizwe izinkinobho zokuskrola kanye namakaki eziziphatha njenge-carousel UI efakiwe ngokugcwele, kodwa zimenyezelwe ngokuphelele ku-CSS.

Impumelelo enkulu ukuthi isiphequluli, hhayi ikhodi yakho yeJavaScript, siba nesibopho sezinkinga eziyinhloko ze-UX: i-physics yokuskrola, ukuzulazula kwekhibhodi, ukuhleleka kokugxila, ngisho nezindima ze-ARIA zokulawula kwe-carousel. Ezimweni eziningi kunzima ngempela ukwakha into efinyeleleka kalula futhi esebenza kangcono kunalokho ipulatifomu ekunika khona manje.

Enye inzuzo enkulu yama-carousels e-CSS ukuqinaUma i-JavaScript yehluleka ukulayisha, abasebenzisi abaneskripthi esivinjiwe noma esikhubazekile basathola isethi yezinto ezingasetshenziswa kahle kakhulu. Akukho ukuswakama, akukho ukushintsha kwesakhiwo okwethulwa yikhodi yokulayisha sekwephuzile, kanye nezingxenye ezimbalwa kakhulu ezihambayo ezingahamba kabi ngokuhamba kwesikhathi.

Ibhlogo lokwakha eliyinhloko: isitsha esingaskrolwa esine-Scroll Snap

Yonke i-carousel ye-CSS kuphela iqala impilo njengesitsha esijwayelekile esiskrolwayoCabanga ngohlu olulula lwamaslayidi angaskrolwa ngokuvundlile. Ukusuka lapho, ufaka ukuskrola ukuze i-viewport ivaleleke ngokwemvelo kwisilayidi ngasinye.

Isakhiwo se-HTML esincane se-carousel evundlile silula ngamabomu: isici sokusonga kanye nochungechunge lwezinto ezilayidi ngaphakathi. Ungasebenzisa ul nge li izakhi, noma div nengane divs—I-CSS yenza umsebenzi onzima, ngakho awudingi izifundo ezikhethekile kuzo zonke izingane ngaphandle kokuthi umklamo wakho udinga zona.

Ukusethwa kwe-scroll-snap okuyisisekelo kungabukeka kanje ku-CSS, uma sicabangela ukubuka okugcwele, okuneslayidi esisodwa:

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

Lapha isitsha sisebenzisa display: flex ukuqondisa izingane zayo ngokuvundlile, Futhi overflow-x: auto ukuze unike amandla ukuskrola. Umlingo ungaphakathi scroll-snap-type: x mandatory, okutshela isiphequluli ukuthi ukuskrola okuvundlile kufanele kuhlale kusendaweni evumelekile, futhi ku scroll-snap-align: center kuslayidi ngayinye, okuchaza lawo maphuzu okufinyeza.

Lokhu kuhlanganiswa kwe-flexbox kanye ne-scroll snap kuzwakala sengathi yi-carousel ngokushesha: abasebenzisi bayaskrola noma baswayiphe, bese islayidi esiseduze singena endaweni yaso. Ngenxa yokuthi isebenzisa ukuskrola kwemvelo, okokufaka kokuthinta kumafoni namathebulethi kuyasebenza nje, ngaphandle kwanoma yikuphi abaphathi bokuthinta noma imitapo yolwazi eyengeziwe.

Awunqunyelwe entweni eyodwa ngokubuka ngakunyeKuma-carousel amaningi abonisa amakhadi amaningana ngesikhathi esisodwa, ungasebenzisa ububanzi obuguquguqukayo bezinto, isibonelo:

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

Lokhu kuhlukahluka kukuvumela ukuthi ubonise, ake sithi, amakhadi amathathu nge-viewport ngayinye enesikhala esincane, ngenkathi besazuza ekuziphatheni kokuthwebula izithombe. Abasebenzisi bashelela emakhasini amakhadi kunakuma-slides eqhawe elilodwa, okusebenza kahle kakhulu ohlwini lwemikhiqizo noma kumagalari.

Izinkinobho zokuskrola ezine-pseudo-element ethi ::scroll-button()

Uma usune-scroller eqhwebayo, into elandelayo abantu abaningi abayifunayo izinkinobho zokuzulazula ezicacile—izilawuli zangaphambilini nezilandelayo ezisunduza i-carousel kwesobunxele noma kwesokudla. Ngokwesiko, ubungadala <button> izakhi, hlanganisa imicimbi yokuchofoza bese ubala ukuthi uzoskrola ibanga elingakanani.

I-CSS Overflow 5 spec iyethula ::scroll-button(), into engamanga evumela isiphequluli ukuthi senze konke lokho kuphakamisa okunzimaNakuba lokhu kutholakala njengamanje kusukela ku-Chrome 135 (futhi ngokuvamile ngemuva kwamafulegi okuhlola ekuqaleni), kuyisibonelo sendlela ama-carousel azobhalwa ngayo kusukela esikhathini esizayo.

Umemezela izinkinobho zokuskrola ngendlela efanayo naleyo obungenza ngayo noma yisiphi esinye isici esingamangaIsibonelo, ukukhiqiza izinkinobho zesobunxele nesokudla ze-carousel yakho:

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

Uma le CSS isetshenziswa, isiphequluli empeleni sidala i-real <button> izakhi njengezihlobo zesitsha sokuskrola, ibaxhumanisa ne-scroller, ibanike izindima ezifanele, bese bexhumanisa ukuziphatha kwabo. Ukuchofoza okukodwa kuvame ukuskrola cishe u-85% wendawo yokuskrola, okuzwakala sengathi “ikhasi” ezindleleni eziningi ze-carousel.

Uma umklamo wakho ulindele into eyodwa egcwele ngobubanzi ngokuchofoza ngakunye, ungahlanganisa lezi zinto ezingamanga nokuqopha okuqinile enganeni ngayinye ngokungeza scroll-snap-stop: alwaysLokho kuphoqa indawo yokubuka ukuthi ifike emingceleni yezinto kunokuba ime phakathi nendawo.

Impahla yokuqukethwe lapha isebenza kabili: inani lokuqala yilokho abasebenzisi abakubona ngamehlo (kulokhu, izinhlamvu zomcibisholo), kanti umucu wesibili uwumbhalo wokubuyela emuva ofinyelelekayo ongavezwa kubuchwepheshe bokusiza. Ukhululekile ukwenza isitayela nokubeka lezi zinkinobho nge-CSS, noma ukusebenzisa imisebenzi efana anchor() ukuze uzivumelanise kahle nokwakheka kwakho.

Amamaki okuskrola ane-::scroll-marker() kanye ne-::scroll-marker-group

Amachashazi noma amalebula ngaphansi kwe-carousel—ngokuvamile abizwa ngokuthi “amachashazi e-pagination” noma “ama-marker”—angenye imfuneko evamileZibonisa ukuthi zingaki izinto ezikhona nokuthi iyiphi ebonakalayo njengamanje, futhi zivumela abasebenzisi ukuthi bagxumele ngqo kusilayidi esithile.

The ::scroll-marker() i-pseudo-element ikunikeza lezi zinkomba ngaphandle kokukhiqiza izixhumanisi noma ama-span ngesandla. Umaki ngamunye empeleni uwukuzulazula <a> isici esidalwe yisiphequluli, esikhomba into ehambisanayo yokuskrola futhi sihlanganyela ekuzulazuleni kwekhibhodi nesifundi sesikrini.

Ukuze usethe lokhu, utshela isiphequluli ukuthi silibeke kuphi iqembu lomaka nge scroll-marker-group, nokuthi yiziphi izakhi okufanele zidalwe kuzo izimpawu. Ukucushwa okuncane kungabukeka kanje:

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

Isiphequluli sakha i- ::scroll-marker-group isitsha njengomfowabo wesikhiphi bese usigcwalisa ngophawu olulodwa lwengane ngayinye ekhethiweKulesi sibonelo esilula, izimpawu zibekwe njengamachashazi angenalutho, kodwa ungasebenzisa kalula umbhalo ofana nokuthi “Isizini 1”, izithonjana noma ngisho nezithonjana ngokushintsha content impahla.

Yini eyenza lezi zimpawu zikhetheke uma ziqhathaniswa ne-scrollbar ecacile ukuthi ziyizixhumanisi zangempela zokuzulazula. Zivumela abasebenzisi ukuthi bagxumele ngqo ezikhundleni ezinengqondo, futhi ziza nencazelo ewusizo: kukhona :target-current isimo esibonisa ukuthi iyiphi imaki ehambisana nesilayidi esibukwayo njengamanje noma esiqoshiwe. Ukusekelwa kwekhibhodi kusebenza njengeqembu lokugxila, futhi abafundi besikrini bangabaveza njengokulawula okufana nohlu lwamathebhu.

Leli cebo linamandla kakhulu lapho i-scroller yakho imelela izingcezu ezinengqondo kunezinto ngazinyeIsibonelo, esikhundleni sokudala izimpawu eziyishumi zeziqephu eziyishumi, ungadala izimpawu ezimbili eziqala ekuqaleni kwesizini yokuqala kanye nesizini yesibili. Ukhululekile ukunquma ukuthi yiziphi "izindawo ezithakazelisayo" okufanele zibhekwe.

Ukuhlanganisa izinkinobho namamaki kube yi-UI ephelele ye-carousel

Uma ubeka ::scroll-button() futhi ::scroll-marker() ndawonye ku-scroller efanayo, ugcina une-UI abasebenzisi abayibona ngokushesha njenge-carousel: izilawuli zangaphambilini/ezilandelayo, umugqa wamamaki abonisa ukuthi zikude kangakanani, kanye nokushelela phakathi kwamaslayidi.

Umehluko oyinhloko kusuka kuma-slider e-JavaScript akudala ukuthi iningi lale logic selihlala kusiphequluliIzinkinobho namamaki kuyizinto ezikhiqizwayo ezinezindima ezifanele ze-ARIA, ezihlanganiswe kahle ku-oda lethebhu, kanye nendaba yokufinyeleleka eklanywe amaqembu esiphequluli angaphansi kunokuba zisungulwe kabusha kusayithi ngalinye.

Le ndlela iletha izinzuzo eziningana eziwusizo kakhulu: isebenza uma i-JavaScript ingasebenzi, iqeda izinkinga zokufiphaza kwamanzi kanye nesikhathi, yehlisa i-Cumulative Layout Shift ngoba izilawuli zaziwa ngesikhathi se-CSS layout, futhi ihlangana kalula ne-animations eqhutshwa yi-scroll noma imibuzo ye-scroll state uma ufuna ukwengeza i-flair.

Kumadivayisi okuthinta, okuhlangenwe nakho ngokwemvelo kulula ukukusebenzisa ngoba isitsha sokuskrola sisalokhu siwukuskrola nje kwasendaweni. Kuma-desktop, i-mousewheel kanye nokufakwa kwekhibhodi kusebenza njengoba kulindelekile, futhi izinkomba zokugxila ezilawulini ezikhiqizwe zingahlelwa ukuze zihlangabezane neziqondiso zakho zokuklama kanye nokufinyeleleka.

Ngokombono wokulungisa, "yenza okuncane, finyelela okwengeziwe" kuba incazelo enembile impelaEsikhundleni sokugcina umqondo wokusetshenziswa kwe-carousel okuningi kumaphrojekthi, uncika ezicini zesikhulumi ezabiwe nezijwayelekile ezizoqhubeka zithuthuka ngokuhamba kwesikhathi ngaphandle komsebenzi owengeziwe ohlangothini lwakho.

Ukwenza i-Scroll Snap isebenze kumaphrojekthi angempela

Ngisho noma ungawanaki ama-pseudo-element amasha okwesikhashana, i-scroll-snap iyodwa isivele ilungele ama-carousel amaningi okukhiqiza. Ukusekelwa kwesiphequluli se-scroll-snap kuzo zonke izinjini zesimanje kuqinile, futhi ukuziphatha kungabikezelwa kokubili nge-mousewheel kanye nokuthinta.

Esimweni esilula kakhulu, i-carousel yakho ye-HTML ingaba yi- div nochungechunge lwezithombe ngaphakathiUngasinika leso sitsha iklasi efana .carousel futhi ushiye izithombe zezingane zingahlelwanga; i-CSS iphatha ukuvumelanisa nokuskrola.

Ngokuvula scroll-behavior: smooth esitsheni, ukuskrola phakathi kwamaphoyinti okufiphaza kuba yinto ejabulisayo esikhundleni sokugxumagxuma. Lokhu kubonakala kakhulu lapho abasebenzisi bechofoza amamaki noma izixhumanisi ze-anchor, noma uma uqala ukuskrola ngokuhlelekile kumasethingi e-hybrid.

Isici ngasinye se-key skrola-snap sidlala indima ehluke kakhulu. scroll-snap-type ichaza i-axis nokuthi ukuqhafaza kuyimpoqo noma nje kuyinkomba; scroll-snap-align ku-"kid" kuchaza ukuthi bangena kuphi ekubukeni (ukuqala, isikhungo, ukuphela); kanye scroll-snap-stop: always kuvimbela isiphequluli ukuthi singadluli amaphuzu e-snap lapho siskrola ngokushesha.

Uma zisetshenziswa ndawonye, ​​lezi zakhiwo zikuvumela ukuthi uchaze ngqo ukuthi i-carousel kufanele izwakale kanjani—kusukela ekuthatheni izithombe okuthambile nokuthethelelayo okufanele izingxenye ezinkulu zokuqukethwe, kuya ekuziphatheni okuqinile, okushelelayo ngokushelelayo okulungele amabhanela amaqhawe lapho ungafuni khona ukufika “phakathi” kwezinto.

Ngenxa yokuthi lokhu kuyi-CSS emsulwa, ungakwazi kalula ukulungisa ukwakheka ngendlela efaneleNgemibuzo yemidiya, shintsha kusuka kusilayidi esisodwa ngokubuka ngakunye ezikrinini ezincane uye kweziningana ngokubuka ngakunye kumadeskithophu abanzi, ngokushintsha nje flex-basis kwezinto. Azikho izindawo zokuhlukanisa zeJavaScript, usayizi wezilaleli noma ububanzi obubaliwe kabusha obudingekayo.

Izinto mbumbulu zokuhlola kanye nokutholwa kwesici

Izinto ezintsha ezingamanga ezigxile ku-carousel—::scroll-button(), ::scroll-marker() futhi ::scroll-marker-group—zinamandla kodwa zisashaNgesikhathi sokubhala, zitholakala ku-Chrome 135 nakamuva, ngokuvamile zidinga amafulegi okuhlola, futhi zizodluliselwa kwezinye izinjini ngokuhamba kwesikhathi.

Ngenxa yokuthi ukwesekwa akukabi yinto yonke, amasayithi okukhiqiza kufanele athembele ekutholakaleni kwezici kanye nokubuyiselwa emuva okuhle. I-CSS ikunikeza @supports umthetho we-at-rule, okuvumela ukuthi usebenzise imithetho ngokwemibandela ngokusekelwe ekuqashelweni kwempahla.

Ungase uchaze umucu olula wokuzulazula wokubuyela emuva—isethi yezixhumanisi noma izinkinobho ezihlala ngaphansi kwe-carousel—bese zifihla lowo mugqa lapho isiphequluli sisekela izinkinobho zokuskrola zomdabu. Isibonelo:

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

Lapha .carousel-nav ingaqukatha izixhumanisi ze-anchor ezibhalwe ngesandla ezikhomba kumaslayidi ngama-ID, like <a href="#slide1">1</a>Kuziphequluli eziqonda isici esisha senkinobho yokuskrola, izilawuli zakho zomdabu ziyavela futhi i-nav yokuwela emuva ifihliwe; kuziphequluli ezindala, ukuzulazula kwe-anchor kuhlala, kubhangqiwe ne-scroll-snap ukuze kube nokuhlangenwe nakho okusebenziseka kahle.

Leli cebo elihlanganisiwe lenza kube kuphephile ukuzama izici ze-carousel zesizukulwane esilandelayo namuhla, ngaphandle kokuzikhiya enjinini ethile noma ekucushweni kwefulegi. Njengoba ukwesekwa kwesiphequluli kukhula, ungancika kakhulu ezintweni ezingamanga bese usika ezinye ze-scaffolding ngesandla.

Ama-carousel e-CSS kuphela adlala ngokuzenzakalela anezithombe zozimele eziyisihluthulelo

Esinye isicelo esivamile ukudlala ngokuzenzakalela—i-carousel ezihambela yodwa, uma iphakanyisiwe ikhefu uma ibekwe phezuluNakuba ukudlala ngokuzenzakalela kunezixwayiso ezithile ze-UX kanye nokufinyeleleka, kungenzeka ukukwenza nge-CSS animations kuphela.

Iphethini elula ukwenza ukuhumusha okuvundlile kwethrekhi yakho yesilayidi kube ngokoqobo.

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

Kulesi sibonelo, ozimele abayinhloko bachitha isikhathi esithile ku-offset ngayinye ngaphambi kokuthuthela kuslayidi esilandelayo. Ithrekhi ibuyela emuva ekugcineni, iveza ukubukeka kwesilayidi esiphindaphindayo phezu kwamaslayidi amane. Ukuhambisa phezulu kwe-carousel kumisa ukugqwayiza, ukuze abasebenzisi bakwazi ukuhlola okuqukethwe ngaphandle kokulwa nokunyakaza okuqhubekayo.

Ukuhlonipha abasebenzisi abakhetha ukunyakaza okuncishisiwe ngenxa yezizathu zempilo noma induduzo, ungasonga i-animation kumbuzo wemidiya:

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

Lokhu kuqinisekisa ukuthi ezinhlelweni lapho kucelwe khona ukunyakaza okuncishisiwe, amaslayidi ahlala engashintshi, ikhubaza ukudlala ngokuzenzakalela ngempumelelo ngenkathi ivumela ukuskrola ngesandla noma ukuzulazula kwenkinobho/umaka lapho kunikeziwe.

Ukushintshana okubalulekile ukuthi ukudlala ngokuzenzakalela okusekelwe ku-keyframe akuhlangani ne-scroll-snap ngokuzenzakalelayoUhumusha okuqukethwe ngesandla kunokuba uthembele ku-native scroll, ngakho-ke kufanele uklame i-animation ngokucophelela ukuze ugweme amaslayidi angabonakali kahle futhi ugcine isikhathi sihambisana nesakhiwo sakho.

Izinto okufanele uzicabangele ukuze ufinyeleleke kuma-carousels e-CSS

Ukufinyeleleka kuyindawo lapho ama-carousel asekelwe ku-CSS angakhanya khona ngempela, ngoba iningi le-logic esindayo lishintsha kusuka kukhodi yakho yangokwezifiso kuya ekuziphatheni kwepulatifomu okuklanywe futhi kwahlolwa ngokucophelela.

Uma uthembele ekuskroleni kwasendaweni kanye nokuskrola-snap, uthola ngokuzenzakalelayo ukwesekwa kwekhibhodi, ukuthinta kanye negundaneAbasebenzisi bangangena ku-scroller, basebenzise okhiye bemicibisholo ukuze bahambise, baswayiphe kuma-touchscreen bese beskrola ngesondo, ngaphandle kwabalaleli bomcimbi noma abaphathi abangokwezifiso.

Izinkinobho zokuskrola zokuhlola kanye namamaki ziya phambili. Isiphequluli siwadala nge-semantics efanele, siwahlanganise nohlelo lwethebhu, futhi sigcina isimo sawo, okwenza kube nzima kakhulu ukukhohlwa ngephutha izimfanelo ze-ARIA noma ukuwafaka ilebula elingalungile. Izilawuli ze-carousel eziphumelayo zivame ukufinyeleleka kalula kunezisetshenziswa ezigoqwe ekhaya.

Ungakwazi futhi kufanele usangeze amacebo okuqonda ezindaweni zakho ze-carouselIsibonelo, ukumaka isitsha nge role="region" kanye nencazelo aria-label kusiza abasebenzisi besikrini abafundayo ukuthi baqonde ukuthi ingxenye imeleni:

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

Ukuqinisekisa izinkomba zokugxila ezibonakalayo kuzo zonke izinto ezisebenzisanayo kusabalulekile. Kungakhathaliseki ukuthi izilawuli ziyizinkinobho nezixhumanisi zakho noma izinto ezingamanga ezenziwe isiphequluli, qiniseka ukuthi izinhlaka zokugxila azisuswa noma zenziwe zibe zicashile kakhulu ukuba zibonakale. outline, outline-offset noma izinguquko zangemuva njengoba kudingeka ukuze kuhlangatshezwane nezimfuneko zokuqhathanisa.

Usayizi wethagethi yokuthinta ungenye into ewusizo okufanele uyicabangele. Hlosa izilawuli okungenani ezingama-44×44px ukuze zihambisane neziqondiso ezivamile zokufinyeleleka, ukuze abasebenzisi bangazami ukuchofoza imicibisholo noma amachashazi ezikrinini ezincane.

Kunoma yikuphi ukusebenza kokudlala ngokuzenzakalela, nikeza abasebenzisi ukulawula okucacile futhi ugweme ukunyakaza okunamandla ngokweqile. Nikeza inkinobho yokumisa okwesikhashana noma inkinobho yokumisa okwesikhashana ecacile, bese ucabanga ngokucisha ukudlala ngokuzenzakalela uma okuqukethwe kukhulu noma umbhalo unzima. Kuhlanganiswe ne prefers-reduced-motion, lokhu kwenza i-carousel yakho ibe ntofontofo kakhulu kubabukeli abaningi.

Ukuphatha ukuskrola okujikelezayo noma "okungenamkhawulo" nge-CSS

Enye indlela abantu abavame ukuyicela ukuskrola okujikelezayo: uma ufika kusilayidi sokugcina bese uskrola phambili, ugoqa kahle ubuyele kwesokuqala, njenge-carousel ebonakalayo ejikelezayo ngokungapheli.

Namuhla, ayikho impahla eqondile, ye-CSS kuphela eyenza isitsha sokuskrola sibe yindilinga ngokwemveloNgaphandle kokuphinda okuqukethwe, i-scroller yomdabu izoba nesiqalo nesiphetho: uma usufinyelele into yokugcina, ukuqhubeka nokuskrola akukushukumisi phambili.

Ababhali be-Spec bayazi ukuthi ama-carousel amaningi e-UI alindele lokhu kuziphatha okuguquguqukayo, futhi kukhona intshisekelo ebonakalayo ekuhloleni izixazululo zezinga lepulatifomu zokuskrola okujikelezayo, ngendlela efanayo nezinkinobho ezintsha zokuskrola kanye namamaki abekwe ngayo ezingeni elifanayo. Lokho kusho ukuthi, okwamanje awukwazi ukucela isiphequluli ukuthi sigoqe izikhundla zokuskrola ngokwendabuko ngesimemezelo esisodwa se-CSS.

Kumasethingi e-CSS kuphela, ukulingisa i-looping kuvame ukusho ukuguqula i-animation (njengasezibonelweni ze-keyframe ezidlala ngokuzenzakalela) noma ukwamukela ukuphela okuqondile kokulandelanaUma i-infinity engenamthungo idingeka ngempela futhi awukwazi ukuphinda okuqukethwe, i-JavaScript iseyithuluzi eliguquguqukayo okwamanje.

Izindaba ezinhle ukuthi akukho okukuvimbela ekuhlanganiseni i-carousel eqhutshwa kakhulu yi-CSS ne-JavaScript encane lapho inezela khona ngempela inaniUngase uthembele ezinkinobho ze-scroll-snap kanye ne-CSS ukuze uzulazule nsuku zonke, bese ufaka imigqa embalwa yesikripthi ukuze ubuke indawo yokuskrola bese ugxuma kusukela ekugcineni kuya ekuqaleni uma kufaneleka.

I-HTML/CSS uma iqhathaniswa ne-JavaScript yama-carousels acebile, asekelwe ekhadini

Inkinga evamile kubathuthukisi abasha ukuthi ngabe i-carousel yamakhadi eyinkimbinkimbi "kumele" ibhalwe ngeJavaScriptAbantu bavame ukucabanga ukuthi ngokushesha nje lapho udlula izithombe ezilula uye kumakhadi aphendulayo anezingxenye ezahlukahlukene, i-CSS iyodwa ayibe isasebenza.

Empeleni, i-CSS scroll-snap isebenza kahle kumakhadi acebile njengoba isebenza ezithombeni ezingenaluthoUma nje ikhadi ngalinye liyibhulokhi ngaphakathi kwesitsha sokuskrola, ungalithinta, ulijikeleze bese ubeka izitayela ezengeziwe phezulu. Izihloko, izinkinobho, izingcezu zombhalo ngisho nemidiya efakiwe ayishintshi kakhulu indlela esebenza ngayo.

Lapho iJavaScript ikhanya khona isesimweni sokuziphatha okunemibandela kanye nesimo esiyinkimbinkimbiUma i-carousel yakho kufanele ihlunge amakhadi ngendlela eguquguqukayo, ihlele kabusha amaslayidi, ivumelanise nezinye izingxenye, ilande okuqukethwe okusha ngokushesha noma isekele i-logic eyenziwe ngokwezifiso kakhulu ("uma leli chashazi lichofoziwe, bonisa lelo khadi elingahlobene nhlobo"), khona-ke iJavaScript ingaveza leyo logic yebhizinisi kalula kune-CSS yodwa.

Kodwa-ke, inani elimangalisayo lama-slider ansuku zonke empeleni liluhlu olumile lwezinto ezithuthuka ngokulandelanaKulezo zimo, ukusebenzisa imigqa embalwa ye-CSS kunokungenisa umtapo wezincwadi omkhulu we-JS kulula ukucabanga ngakho futhi kungcono ekusebenzeni. Ukuqonda i-scroll-snap kanye nezinto ezintsha ezingamanga kukuvumela ukuthi ubhukhe i-JavaScript yezimo ezingavamile lapho izikhokhela khona ngempela.

Uma usafunda ukuthuthukiswa kwangaphambi kwesikhathi, ukuphatha ama-carousel e-CSS njengesisekelo sakho esizenzakalelayo kuwumkhuba omuhle kakhuluQala nge-HTML ne-CSS, bese ufinyelela umbhalo kuphela uma ufinyelela umkhawulo ocacile. Lokhu kukufundisa okwengeziwe ngalokho ipulatifomu engakwenza kakade futhi kuvame ukuholela kuma-codebases alula futhi ahlanzekile.

Uma sibuyela emuva, isethi entsha ye-CSS ifaka phakathi ukuskrola, ukuqhafaza, izinkinobho, omaka kanye nemibuzo yesimo sokuskrola iguqule ama-carousel kusuka kumawijethi asindayo esikripthi aba izingxenye ezichazayo kakhulu. Ngokuncika ku-scroll-snap ukuze kube nokuziphatha kwe-core paging, isebenzisa ::scroll-button() futhi ::scroll-marker() lapho kusekelwa khona, futhi usebenzisa izindlela ezinhle kakhulu zokuthola izici kanye nokufinyeleleka, ungathumela ama-carousel asheshayo, aqinile futhi okulula ukuwagcina kunezilayidi zendabuko eziqhutshwa yi-JS—ngenkathi usagcina ukuguquguquka okwanele kokuxubana ku-JavaScript lapho i-logic yokujikeleza noma ukusebenzisana okuthuthukile kudinga khona ngempela.