Ama-Carousels e-CSS Ngaphandle kwe-JavaScript: Umhlahlandlela Ophelele

Ikhaya » Python » Ama-Carousels e-CSS Ngaphandle kwe-JavaScript: Umhlahlandlela Ophelele

Ukwakha ama-carousel ngaphandle komugqa owodwa weJavaScript akuseyona inganekwane yesayensi manje; i-CSS yesimanje ikunikeza konke okudingayo ukuze udale amaslayida abushelelezi, anobungani bokuthinta usebenzisa i- Impahla ye-CSS touch-action ezizwakala zingokwemvelo kusiphequluli. Kusukela ekuqoqeni i-scroll kuya ezintweni ezingamanga zokuhlola ezikhiqiza ngokuzenzakalelayo izilawuli zokuzulazula, ungaletha izingxenye ezigcwele ngenkathi ugcina iphakheji yakho ilula futhi impilo yakho ilula.

Uma uke walwa nemitapo yolwazi ye-JS carousel enzima, izinkinga zomswakama noma izinkinga zokufinyeleleka, ama-carousel e-CSS kuphela ayindlela yokuphefumula umoya omusha.. Ngemininingwane yakamuva (njenge-CSS Overflow Level 5) kanye nezici ezisungulwe kahle ezifana scroll-snap-type, manje sekuyinto enengqondo ukuthumela ama-carousel alungele ukukhiqiza asheshayo, afinyeleleka kalula ngekhibhodi futhi aqinile uma i-JavaScript ikhutshaziwe.

Kungani i-CSS yesimanje yenza ama-carousel e-JavaScript abe ngokuzithandela

Sekuyiminyaka, impendulo ezenzakalelayo yokuthi “ngiyakha kanjani i-carousel?” kwakuwukuthi “ngithatha umtapo wezincwadi we-JS”. I-Swiper, i-Slick, i-Glide, i-carousel ka-Bootstrap kanye nabanye abaningi baxazulule inkinga ngokuxuba izilaleli zemicimbi, ama-timer, usayizi wababukeli kanye nezindima ze-ARIA—kodwa baphinde bafaka ama-kilobytes engeziwe ephaketheni lakho futhi bafaka okunye ukuncika okufanele kugcinwe.

Namuhla, i-CSS isifinyelele ngokuthula ezimweni eziningi ezivame ukusetshenziswa ze-carousel. Ngezakhiwo ezimbalwa, ungaguqula i-scroller evamile evundlile ibe isipiliyoni esifakwe ekhasini, esisheshayo nesishelelayo esisebenza ngesondo legundane, i-trackpad, imicibisholo yekhibhodi kanye nokuswayipha kokuthinta. Azikho izilaleli, akukho ukugeleza kabusha okubangelwa yi-JS logic, futhi azikho izimo zomjaho ezine-hydration kuzinhlaka.

Umqondo oyisisekelo ulula: uphatha i-carousel yakho njengendawo eskrolekayo, hhayi njengengxenye yomlingo edlula phakathi kwamaslayidi. I-CSS bese "isiza" ukuskrola ngamaphoyinti okufinyeza, ukushintsha okushelelayo, kanye nezinkinobho nezimpawu ezakhelwe ngaphakathi isiphequluli esizifaka ku-DOM njengezinto zangempela ezisebenzisanayo.

Lolu shintsho lunemiphumela emikhulu ekusebenzeni nasekuqineni. I-carousel ye-CSS isasebenza kahle kakhulu uma i-JS ivinjiwe, yehluleka ukulayisha noma ikhutshazwa ngumsebenzisi. Injini yokuskrola yesiphequluli ngokwayo yenza iningi lokuphakamisa okunzima, okwenziwa ngcono kakhulu kuzo zonke izinjini ezinkulu futhi kulungiselelwe amadivayisi anamandla aphansi namathuluzi okufinyeleleka.

Ngaphezu kwalokho, i-CSS inezici ezifana ne- :has(), ukwakheka kwegridi kanye nezithombe ezinyakazayo eziqhutshwa ukuskrola zixhunywe endaweni efanayo yokuskrola, okukuvumela ukuthi wakhe izinkomba zesilayidi eziyinkimbinkimbi, ukuvezwa kokuqukethwe noma i-parallax ngaphandle kokuhlanganisa izinhlelo ezintathu ezahlukene (ikhodi yakho, i-logic yomtapo wolwazi kanye ne-browser scroll) ngezindlela ezibuthakathaka.

Ibhlogo lokwakha eliyinhloko: I-Scroll Snap yama-carousels e-CSS kuphela

Enhliziyweni ye-carousel ye-CSS kuphela kukhona i-Scroll Snap module, okukuvumela ukuthi uchaze amaphuzu “amagnetic” okufanele indawo yokuskrola iwavale ngemuva kokuba umsebenzisi eyeke ukuskrola. Esikhundleni sokufika phakathi kwamaslayidi amabili, ukubuka kudlulela kweseduze, okwenza lowo muzwa wesilayidi ojwayelekile uzwakale.

Isakhiwo se-HTML singaba sincane kakhulu: isitsha esiskrola ngokuvundlile, kanye nochungechunge lwezinto zesilayidi ngaphakathi kwaso. Awudingi ngisho nokunikeza isithombe noma ikhadi ngalinye ikilasi lalo uma uphawu lwakho luhambisana—yize ukuqamba izinto zakho kuvame ukusiza ekwenzeni isitayela nokufinyeleleka:

Isibonelo sesakhiwo se-carousel yesithombe esiyisisekelo kungacatshangwa njenge-wrapper efana <ul class="carousel"> nge multiple <li> izinto, ngayinye iqukethe isithombe noma ikhadi. Umlingo uhlala ku-CSS:

Uchaza isitsha njengokwakheka okuvundlile okuguquguqukayo okune-scrolling enikwe amandla bese ucacisa ukuthi kufanele iqhekeze eceleni kwe-x axis:

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

Isilayidi ngasinye sibe sesiveza indawo yokuthwebula, ngokuvamile iphakathi nendawo noma ekuqaleni kwe-viewport, futhi ibeka isisekelo esiqinile ukuze kuvele eyodwa noma eziningana ngokubuka ngakunye:

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

Le phethini isivele ikunikeza i-carousel ephelele ngokumangalisayo: abasebenzisi bangaswayipha kuselula, baskrole ngegundane noma nge-trackpad, futhi i-viewport izohlala ihleli kuslayidi esiseduze. Akukho JS ebuka imicimbi yokuskrola noma ukulungisa izikhundla ngesandla.

Ukuze udale ama-carousel ezinto eziningi (njengemichilo yomkhiqizo), udinga nje ukulungisa isisekelo se-flexIsibonelo, ungabonisa izinto ezintathu ngokubuka ngakunye ngesikhala esincane ngokusebenzisa into efana flex: 0 0 calc(33.333% - 1rem) kanye nemingcele eseceleni. I-Scroll Snap ayinandaba ukuthi "ikhasi" ngalinye liyisilayidi esisodwa esigcwele ububanzi noma iqembu lamakhadi amancane.

Izakhiwo ezifana object-fit: cover ziwusizo lapho usebenza ngezithombe ezingavuthiwe, ukuqinisekisa ukuthi zigcwalisa indawo yazo yamaslayidi ngaphandle kokunwebeka. Uma ihlanganiswe nesilinganiso sobukhulu obungaguquki, ungathola ama-carousel esithombe ahlala ehambisana ngokubonakalayo kunoma yimuphi usayizi wesikrini.

Kusukela kuma-scroller alula kuya kuma-carousel azwakala sengathi awendabuko

I-carousel engenalutho egoqayo isivele izwakala imnandi, kodwa imininingwane yesimanje iyaqhubeka, ikakhulukazi ku-Chrome 135+ lapho uhlaka lwe-CSS Overflow Level 5 luqala ukubonakala njengezici zangempela. I-spec iphatha i-carousel njengendawo yokuskrola ene-UI ekhiqizwe yisiphequluli engayikhetha.

Kuleyo modeli, "i-carousel" ilingana: i-scroller eyodwa kanye namasethi amabili entengo—izinkinobho zokuskrola kanye nama-scroll markers. Zombili zidalwe yi-CSS pseudo-elements, kodwa isiphequluli sikhipha izihlobo zangempela ze-DOM eduze kwe-scroller yakho ukuze zisebenze njengezilawuli zomdabu.

Okubaluleke kakhulu, isiphequluli sihlanganisa izincazelo, ukuhleleka kokugxila kanye nokuphathwa kwesimo sakho.. Izinto ezifakiwe zinezindima ezifanele, zingafakwa kuthebhu ngokulandelana okunengqondo, futhi zibonisa isikhundla samanje sokuskrola. Lokho kusho ukuthi ukuphinda izinga elifanayo lokufinyeleleka ngelabhulali ye-JS egoqwe ngesandla akuyona into encane; uzodinga izimfanelo ze-ARIA, ukuziphatha kweqembu lokugxila, ukuzulazula kwekhibhodi kanye nezimemezelo zesifunda esibukhoma konke kusebenza ndawonye.

Ngisho noma ungakakulungeli ukuthembela ezingxenyeni zokuhlola okwamanje, lesi siqondiso sibalulekileKubonisa ukuthi ama-carousel, amathebhu, izingxenye ze-scrollspy kanye namaphethini e-UI afanayo aphakanyiswa abe “izakhamuzi zekilasi lokuqala” ku-CSS, okuzonciphisa kancane kancane isidingo sekhodi yeglue ye-JavaScript eyenziwe ngokwezifiso.

Umphumela wokugcina uyisisekelo esiqinile kubo bonke abasebenzisi—kufaka phakathi abantu abakhubaza i-JS, abathembele kubuchwepheshe obusizayo, abanamadivayisi anamandla aphansi noma abaphequlula ngaphansi kwezimo zenethiwekhi ezingasebenzi kahle. Ukuskrola okungokwemvelo kanye nesitayela se-CSS kudlula amawijethi anzima esikripthi kuzo zonke lezo zimo.

Ukwengeza izinkinobho zokuskrola nge-::scroll-button()

Kwamanye amapulatifomu usuvele ubona imicibisholo emincane eduze kwemigqa yokuskrola, kodwa entsha ::scroll-button() isici-mbumbulu sihamba phambili futhi sivumela i-CSS ukuthi ichaze izinkinobho ezinikezelwe "zangaphambilini/ezilandelayo" zanoma iyiphi indawo eskrolwayo—kufaka phakathi ama-carousel.

Lezi zinkinobho zokuskrola ezichazwe yi-CSS zisebenza ngendlela ehlukile kunemicibisholo yebha yokuskrola yakudalaEsikhundleni sokushukumisa okuqukethwe ngokunyuka okuncane, bagxuma cishe u-85% wendawo ebonakalayo ngokuchofoza ngakunye. Ku-carousel egcwele ububanzi, eqondaniswe ngokufinyeza, lokho kuzwakala cishe njengenkinobho yokuzulazula ngesilayidi ngasinye.

Uma udinga ngempela ukunyakaza kwento eyodwa ngqo, ungahlanganisa izinketho zokuskrola. Iresiphi evamile yile scroll-snap-type: x mandatory esitsheni kanye scroll-snap-stop: always kumntwana ngamunye othwebula izithombe. Ngaleyo ndlela, ukucindezela inkinobho yokuskrola kanye kukuthatha kahle kusuka kwelinye ikhadi uye kwelinye.

Ngokombono we-syntax, ukwengeza izinkinobho zokuskrola kubukeka njengokwenza isitayela kwezinye izinto ezingamangaUkhetha into eskrolekayo (ake sithi, .carousel) kanye nethagethi ::scroll-button(left) or ::scroll-button(right) ukumela izilawuli zasemuva naphambili. Isibonelo esincane:

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

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

Inani lokuqukethwe elihlukaniswe ngokusika likuvumela ukuthi unikeze ilebula elibonakalayo nelifinyelelekayoIsiphequluli sibe sesidala okwangempela <button> Ama-node njengezihlobo zendawo yakho yokuskrola futhi ubeka okuqukethwe kwakho ngaphakathi kwawo. Uhlala ukhululekile ukuwabeka nokuwafaka isitayela ngendlela othanda ngayo, njenganoma iyiphi enye into—usebenzisa ukuma okuphelele, igridi ye-CSS noma ngisho ukuma kwe-anchor.

Isitayela sokugxila sisabalulekile laphaIsibonelo, ukusebenzisa umthetho onjengokuthi .carousel::scroll-button(*):focus-visible { outline-offset: 5px; } iqinisekisa ukuthi lapho abasebenzisi bethinta lezi zinkinobho, babona indandatho yokugxila ecacile engaphandle komngcele wento, okulondoloza ukusetshenziswa kwekhibhodi kanye nokuhambisana ne-WCA.

Ngaphansi kwe-hood, isiphequluli sigcina umkhondo wesimo sezinkinobho kanye nobubanzi bokuskrola obutholakalayoLokho kusho ukuthi akudingeki ukhathazeke ngokukhubaza inkinobho ethi “yangaphambilini” uma usesilayidini sokuqala noma inkinobho ethi “elandelayo” ekugcineni; ipulatifomu ingasingatha lezo zimo ngendlela ejwayelekile.

Amamaki okuskrola ane-::scroll-marker() ukuze kuzulazulwe ngezinhlamvu noma ilebula

Izimpawu ezibonakalayo—amachashazi noma izithonjana ngaphansi kwe-carousel—cishe zilindeleke kubasebenzisi kulezi zinsuku. Okusha ::scroll-marker() i-pseudo-element ikuvumela ukuthi udale lezo zinkomba nge-CSS kuphela, ngayinye ixhunywe entweni ethile ohlwini oluskrolwayo.

Ngokungafani nesithupha se-scrollbar, izimpawu zokuskrola zimelela amaphuzu athakazelisayo. Umaki ngamunye awuhambelani nje nendawo ngamaphikseli, kodwa nesici sangempela somntwana, okwenza kube kuhle kakhulu ezimweni ezifana nezinkathi ochungechungeni lwe-TV, izigaba zomkhiqizo, noma izahluko ezinengqondo endabeni kunokuba kube yifreyimu ngayinye.

Amamaki abonakala njengasebenzayo <a> Izakhi, okukunikeza izici ezimbili ezibalulekile mahhala: ukuzulazula ekhasini kanye nencazelo efanele yabafundi besikrini. Zisebenza njengezixhumanisi ze-anchor, kodwa ngezinye izithuthukisi ezenzelwe ukusetshenziswa kwe-carousel.

Phakathi kwalezo zithuthukisi kukhona :target-current ikilasi-mbumbulu, okufana nalapho into ehambisanayo ifakwa esithombeni noma ibhekwa ngokuthi “isilayidi esisebenzayo”. Ungayisebenzisa ukugqamisa umaka osebenzayo ngesizinda noma umngcele ohlukile.

Ukuze uxhume lokhu, uqala ngokuchaza ukuthi iqembu labamaka kufanele lihlale kuphi besebenzisa i scroll-marker-group impahla esitsheni, ngokuvamile ngaphambi noma ngemva kwesiskroli. Isibonelo, scroll-marker-group: after; izobeka izimpawu ngemuva kwesifunda se-carousel ku-DOM.

Bese uqondisa izingane ngazinye okufanele zikhiqize izimpawuUma amaslayidi akho <li> izakhi, into efana .carousel > li::scroll-marker kuzosebenza. Iphethini evamile ukudala amachashazi angenalutho:

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

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

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

Isiphequluli sinakekela ukukhiqiza <a> omaka, bewahlanganisa ndawonye esitsheni esizinikele se-::scroll-marker-group, futhi uziveze njengezinto ezingaqondiswa ngekhibhodi eziziphatha njengeqembu lokugxila. Abafundi besikrini bangaziveza ngendlela efanayo ohlwini lwamathebhu: uhambisa ukugxila phakathi kwamamaki bese uzisebenzisa ukuze ugxumele kusilayidi esithile.

Amamaki awagcini kumachashazi kuphela. Ungasetha content izinombolo ("1", "2", njll.), amalebula angafundwa ngabantu afana nokuthi “Isizini 1” noma “Isahluko 3”, noma ngisho nezithombe eziqondile ukudala amagalari amancane ezakhiwo ezigcwele izithombe ezifana namagalari emikhiqizo ye-e-commerce.

Ukuhlanganisa izinkinobho, amamaki, kanye namasu okubuyela emuva

Uma uhlanganisa izinkinobho zokuskrola kanye namamaki phezu kwe-carousel yokuskrola, uthola ingxenye ezwakala ingahlukaniseki nesisombululo se-JS, kodwa kulula ukuyinakekela futhi ithumela izingxenye ezimbalwa ezihambayo. Abasebenzisi bangachofoza imicibisholo, bathephe izinhlamvu, baswayiphe kuma-touchscreen noma basebenzise ukuzulazula kwekhibhodi—konke ngokuziphatha okulinganayo.

Le nhlanganisela ibhekana nokusebenza okuvamile kanye nezinkinga zekhanda ze-UXNgenxa yokuthi azikho izinguquko zesilayidi eziqondisa iskripthi, awutholi ukuhlelwa kwesakhiwo kusuka mathupha scrollLeft ukulungiswa noma ama-timer aqhuma ngezikhathi ezixakile. I-CLS (i-Cumulative Layout Shift) incishisiwe njengoba umuthi we-DOM usulungile kusukela ekuqaleni futhi awujovi noma awulinganisi izakhi sekwephuzile emjikelezweni wokuphila.

Kodwa-ke, kukhona okubambekayo: ::scroll-button kanye ne-::scroll-marker kusasebenza njengokuhlola. futhi okwamanje itholakala kuphela ku-Chrome 135+ ngemuva kwamafulegi okuhlola. Lokho kusho ukuthi kufanele uklame ama-fallback amahle uma uhlela ukuwasebenzisa kumasayithi okukhiqiza.

Ukutholwa kwezici nge @supports ungumngane wakho ongcono kakhulu lapha. Ungenza ibha yokuzulazula yendabuko—izixhumanisi eziya ku- #slide1, #slide2 njalo njalo—ngokuzenzakalelayo, bese uyifihla uma izilawuli zomdabu zitholakala. Iphethini yomqondo engenangqondo ibukeka kanje:

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

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

Ku-HTML, i-nav elula enezixhumanisi ze-anchor yanele: islayidi ngasinye sithola id, futhi i-nav ikhomba kulawo ma-ID. Ukugxumela ku-anchor ngaphakathi kwesitsha se-scroll-snap kuhlangana kahle nokuziphatha kwe-snapping, ngakho-ke islayidi sigxumela kahle ngemva kokugxumela.

Lokhu kusho ukuthi ungajabulela izinzuzo zezinto mbumbulu zokuhlola ekusekeleni iziphequluli—izinkinobho zomdabu ezigcwele, omaka, kanye nezingwegwe zesimo sokuskrola—ngenkathi zisanikeza ulwazi olusebenza ngokugcwele kwenye indawo. Akekho umsebenzisi obhajwa yisilayidi esingasetshenziswa.

Ngaphezu kwalokho, konke lokhu kusasebenza uma i-JavaScript ikhutshaziwe, ngoba uthembele kuphela kuma-anchor e-HTML, ukuziphatha kwe-CSS scroll kanye nenjini yokuskrola yesiphequluli. Kumaphethini amaningi e-UX—amagalari, izikhathi, imibukiso yesinyathelo ngesinyathelo—lokho kwanele.

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

Isici esisodwa esivamile abantu abasilindele kuma-carousel ukudlala ngokuzenzakalela—amaslayidi aqhubekela phambili ngokuzenzakalelayo ngemva kwemizuzwana embalwa. Nakuba lokhu kuvame ukusetshenziswa ngezibali zesikhathi zeJavaScript, ungalinganisa futhi lokhu kuziphatha usebenzisa ama-animation e-CSS ahlanzekile.

Icebo liwukwenza i-animation i-transform yomugqa oguquguqukayo oqukethe wonke amaslayidi. Ngenani elinqunyiwe lamaslayidi, uchaza umugqa wesikhathi wozimele okhiye lapho ithrekhi ihlala endaweni ngayinye yesilayidi isikhashana, bese igxumela kwelandelayo. Okufana nalokhu:

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

Bese usebenzisa lokhu kugqwayiza ku-wrapper ephethe izakhi zakho zesilayidi, isib. .autoplay-carousel { display: flex; animation: slide 12s infinite; }Amaphesenti achaza izikhathi "zokuhlala" kuslayidi ngayinye ukuze okuqukethwe kufundeke ngaphambi kokuqhubeka.

Kubalulekile ukwengeza indlela abasebenzisi abazoyimisa ngayo ukudlala ngokuzenzakalelaIndlela elula kodwa ephumelelayo yokuma kancane uma uhambisa i-hover nge .autoplay-carousel:hover { animation-play-state: paused; }, ukuze abasebenzisi bedeskithophu bakwazi ukumisa ukunyakaza lapho bexhumana nokuqukethwe.

Izinto okufanele uzicabangele ukuze ufinyeleleke zidlulela phambili ezintweni ozikhethayo zokunyakazaUkuhlonipha prefers-reduced-motion kubhekwa njengomkhuba omuhle kakhulu, ngakho-ke ungakhubaza ngokuphelele ukugqwayiza kubasebenzisi abathanda ukunyakaza okuncane:

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

Ngenkathi izixazululo ze-CSS ngokuzenzakalela zingakwazi ukusingatha kalula wonke amacala onqenqema i-JS engakwazi ukuwasingatha—njengokubalwa kwamaslayidi aguquguqukayo ngempela noma i-logic eyinkimbinkimbi eqhutshwa ngumsebenzisi yokumisa okwesikhashana/yokuqalisa kabusha—ziqinile ngokumangazayo kuma-carousels alula, angaguquki uma ufuna ukugwema ukubhala ngokuphelele.

Ukuqhathanisa ama-carousel e-CSS kuphela kanye ne-JavaScript

Ukunquma phakathi kwe-CSS ne-JavaScript nge-carousel akuyona into engenziwa noma engenziwanga; kuncike ezidingweni zakho, izithameli kanye nesabelomali sokulungisa. Kodwa ibhalansi ishintshe kakhulu yakhetha i-CSS ezimweni eziningi zangempela.

Ngokombono wokusebenza, ama-carousel e-CSS angabanqobi abacacileAkukho ukuhlaziya noma ukusebenzisa ikhodi yomtapo wolwazi, akukho zilaleli zemicimbi kukho konke ukusebenzisana kokuskrola, futhi akukho ukubalwa kabusha kwesakhiwo sesikhathi sokusebenza okubangelwa ukulungiswa okubhaliwe. Injini yokuskrola yesiphequluli ibhalwe ngekhodi yomdabu elungiselelwe kakhulu futhi ilungiselelwe yonke into kusukela kuma-desktop aphezulu kuya kumafoni anamandla aphansi.

Ngokuphathelene nokufinyeleleka, izici ezintsha ze-CSS carousel ziphakamisa kakhulu izinga. Izinkinobho zokuskrola kanye namamaki anikezwa yisiphequluli ziza zixhunywe kusengaphambili ngezindima ze-ARIA, ukuziphatha kwekhibhodi kanye nezimemezelo obekuyodingeka zenziwe kabusha ngokucophelela ku-JavaScript. Ngisho noma kungekho lokho, i-scroll-snap carousel isengenziwa itholakale ngezindima namalebula.

Ngakolunye uhlangothi, iJavaScript isasebenza kumaphethini athuthukile kakhuluUma udinga i-autoplay logic eyinkimbinkimbi, ama-analytics hook, i-physics yangokwezifiso, noma ukuvumelanisa ama-carousel amaningi nesimo esabiwe (isb., isithombe esiyinhloko kanye nomugqa wesithonjana kanye nohlu lwamakhasi angaphandle), izindlela eziqhutshwa yiskripthi zisengaguquguquka kakhudlwana.

Kodwa-ke, ukuqonda okuyinhloko ukuthi ama-carousel amaningi “ansuku zonke” awadingi ngempela leli zinga lobunzimaIgalari yomkhiqizo elula, isilayida sobufakazi noma umucu "wokuthunyelwe okufakiwe" ngokuvamile ungasetshenziswa nge-scroll snap, imithetho embalwa ye-CSS kanye nezilawuli zomdabu ezingakhethwa—okukusindisa ekudonseleni ukuxhomekeka okungu-50KB ukuze nje uhambe phakathi kwamaslayidi amathathu.

Okunye okucatshangelwayo ukuqina lapho iJavaScript yehlulekaAma-carousel e-CSS kuphela aqhubeka esebenza kahle uma i-JS ivinjiwe yi-proxy yenkampani, iphulwe yi-ad blocker, noma ingakalayishwa lapho umsebenzisi efika ekhasini. Lolu hlobo lokwehla kobuhle kunzima ukulufeza ngamalabhulali ancike esigabeni sokuqalisa ngemva kokulayishwa kwekhasi.

Izindlela ezinhle kakhulu zokufinyeleleka zama-carousels e-CSS

Ngisho noma isiphequluli sisiza ngezici ezithile zokufinyeleleka, usadlala indima ebalulekile ekwenzeni i-CSS carousel yakho isetshenziswe yiwo wonke umuntu. I-Semantics, ukuphathwa kokugxila kanye nokuzwela ukunyakaza konke kufanele kube phambili engqondweni yakho.

Okokuqala, nikeza i-carousel uphawu olufaneleUkuyisonga ngesici role="region" kanye nencazelo aria-label njengokuthi “Igalari yomkhiqizo” noma “Izihloko ezifakiwe” kwenza kube lula ngabasebenzisi besikrini sokufunda ukuthola nokuqonda.

Isilayidi ngasinye singaba nelebula elifinyelelekayo futhi, isibonelo nge- aria-label ethi “Isilayidi 1 kwezingu-3”, “Isilayidi 2 kwezingu-3”, njalo njalo. Ngaleyo ndlela, lapho umsebenzisi efika kusilayidi, uthola umongo osheshayo mayelana nendawo yakhe ochungechungeni.

Ungakhohlwa izinkomba zokugxila ezibonakalayoNoma yisiphi isici esisebenzisanayo—kungakhathaliseki ukuthi ::scroll-button, a ::scroll-markerisixhumanisi esikhiqizwe ngesandla, noma i-anchor esetshenziswa ngesandla ku-nav yakho yokubuyela emuva—idinga isitayela sokugxila esicacile esidlula iziqondiso zokuqhathanisa futhi esingasuswa ngokusetha kabusha komhlaba wonke.

Uma usebenzisa ukuzidlalela ngokuzenzakalela noma ukuskena okuqhutshwa ukuskrola, hlonipha izintandokazi zokunyakaza. Kusetshenziswa prefers-reduced-motion ukukhubaza noma ukwenza lula izithombe ezinyakazayo akuyona into ongayikhetha uma ukhathalela abasebenzisi abavame ukuba nesifo sokunyakaza, futhi kulula ngokwanele ukugoqa imiphumela enamandla kakhulu embuzweni wemidiya.

Okokugcina, cabanga ngosayizi we-touch target. Kungakhathaliseki ukuthi wenza isitayela sama-scroll markers endabuko noma izixhumanisi zakho ze-nav, gcina izindawo ezisebenzisanayo okungenani zibe ngamaphikseli angu-44×44 e-CSS. Lokho ngokuvamile kusho ukugoqa okukhulu kanye nesikhala kunokuba kube yizindilinga ezincane ezihlanganiswe ndawonye.

Imisebenzi yangempela, amathuluzi, kanye neziqondiso zesikhathi esizayo

Ukuze kube lula ukuzama ama-carousel e-CSS, amanye amaqembu adale amathuluzi okulungisa bukhoma lapho ungaphendula khona amaswishi—unike amandla izinkinobho zokuskrola, uguqule amamaki, ulungise izindlela zokushintsha—bese ubona ngokushesha i-CSS ebuyekeziwe edingekayo kulolo lungiselelo. Lezi zindawo zokudlala zinhle kakhulu ekufundeni ngokushintshashintsha.

Kanye nama-configurators, amagalari akhethiwe ama-demo e-carousel e-CSS kuphela abonisa lokho okungenzekaUzothola amaphethini afana nezixhumi ezifakwe amathebhu, ukuzulazula kwe-scrollspy, amaslayidi asekelwe ezinyathelweni, amagalari ezithonjana nokuningi, konke kwabelana ngesisekelo esifanayo sezindawo zokuskrola kanye nokulawula kokuthwebula kanye nokuzikhethela.

Eziningi zalezi zingosi zedemo zithunyelwa ngamabomu ngaphandle kweJavaScript ukufakazela leli phuzu: i-UI ecebile, enomuzwa wokuxhumana ingafinyeleleka ngokuphelele nge-HTML ne-CSS kuphela. Bavame ukuveza izinsiza zabo ngokusebenzisa @layer izimemezelo, ukuze ukwazi ukuhlola nezitayela zokukhetha ezifanelana nohlelo lwakho lokuklama.

Uma sibheka phambili, ipulatifomu ye-CSS isivele isebenza ezindleleni ezimbili ezibalulekile zokuziphendukela kwemveloOkokuqala “letha izakhi zakho,” lapho esikhundleni sokuthembela ezinkinobheni nasezimaki ezenziwe isiphequluli, uzokwazi ukuxhuma ezakho <a> futhi <button> uphawu, ngenkathi sisazuza ku-logic eyisisekelo yokuskrola.

Lokhu kuzovula umnyango wezilawuli ezinegama elihle, ezicebile ezakhiwe ngezinhlaka zezinsizakusebenza njengoTailwind, ngenkathi ugcina ukwakheka kanye nokuziphatha kulawulwa yipulatifomu. Ubungahlobisa i-UI kodwa uvumele isiphequluli sihlale singumqondo wokusebenza.

Indawo yesibili enkulu ukuskrola okujikelezayo noma okungenamkhawulo. Ama-carousel amaningi namuhla "ayagoqa" uma ufika ekugcineni, abuyele emuva kalula kusilayidi sokuqala. Ukusebenzisa lokhu ngendlela ehlanzekile kunzima, ngokuvamile kuhilela okuqukethwe okuphindwe kabili noma i-logic eyinkimbinkimbi. Ukusekelwa kwezinga lepulatifomu lokuskrola okujikelezayo kuzovumela iziphequluli ukuthi ziphathe ukuziphatha okujikelezayo ngendlela ehlelekile futhi ephumelelayo.

Njengoba lezi zici zivuthwa futhi zisakazeka ngale kwe-Chrome kwezinye izinjini, igebe phakathi kwalokho okungenziwa yi-"native CSS carousel" nalokho okunikezwa yimitapo yolwazi ye-JavaScript esindayo lizoqhubeka nokuncipha, okwenza izindlela ezingenaskripthi zibe yindawo yokuqala ezenzakalelayo kunokuba kube ukuhlolwa kwecala elingaseceleni.

Sekukonke, i-CSS yesimanje ikunikeza zonke izizathu zokucabanga kabusha ngendlela owakha ngayo ama-carouselUkuqala ngesakhiwo esilula sokuskrola-snap, ukwengeza izinkinobho zokuhlola kanye namamaki lapho kusekelwa khona, kanye nemikhuba emihle yokufinyeleleka yokufafaza kuyo yonke indawo, ungaletha amaslayida aphendulayo, abushelelezi, futhi aqinile ngaphandle kokufinyelela ukuthembela ku-JS. Kumaphrojekthi amaningi, lokho kusho amakhasi asheshayo, ikhodi encane okufanele igcinwe, kanye nokuhlangenwe nakho okuqinile kumsebenzisi ngamunye.