Yenza ii-carousels ze-CSS eziphambili ngaphandle kweJavaScript

Ikhaya » Python » Yenza ii-carousels ze-CSS eziphambili ngaphandle kweJavaScript

Ukwakha ii-carousels ngaphandle kwe-CSS yanamhlanje akuselophupha nje—lukhetho lokwenyani, olulungele imveliso olunokuthi lusebenze ngcono kuneelayibrari zeJavaScript zesilayidi zakudala. Ngenxa yeempawu ezifana ukukrola okuskrola, ii-animations eziqhutywa kukukrola, izinto ezingachanekanga ze-carousel zovavanyo kunye nezinto zokuqala ezifikelelekayo, ungathumela ii-carousels ezikhaphukhaphu, eziqinileyo nezisavakala zigudile, zisebenzisana kwaye zicocekile.

Ukuba udiniwe kukufumana iibhanti zeJavaScript ze-50KB ukuze ubonise izilayidi ezimbalwa, esi sikhokelo sikubonisa oko iCSS yanamhlanje ingakwenzela kona. Siza kuhlalutya iingcamango eziphambili ezikwii-carousels ze-CSS kuphela, indlela yokuzidibanisa nge-scroll-snap, nokuba uxhomekeke nini kwinto entsha. ::scroll-button() kwaye ::scroll-marker() izinto ezingezizo ezokwenyani, kunye nendlela yokufafaza ngokudlala ngokuzenzekelayo okanye ukuziphatha okujikelezayo ngelixa usaphatha ukufikeleleka nokusebenza njengabantu abakumgangatho ophezulu.

Kutheni ii-carousels ze-CSS kuphela ekugqibeleni ziyindlela ebalulekileyo

Kangangeminyaka, igama elithi “carousel” laliphantse libe yinto efanayo nelithi “JavaScript plugin”Izisombululo ezifana neSwiper, iGlide okanye iisliders ezikhulele ekhaya zaziyindlela efanelekileyo: zazisingatha ukuhambahamba, imeko, inkxaso yekhibhodi kunye neempawu zokuchukumisa, kodwa ngenxa yobunzima obungaphezulu, abaphulaphuli bemicimbi kuyo yonke indawo kunye nenani elaneleyo le-DOM gymnastics.

I-CSS yanamhlanje ivale kancinci uninzi lwaloo msantsa. Ngeempawu ezifana scroll-snap-type kwaye scroll-snap-align, ungaguqula nayiphi na i-scroller ethe tye okanye ethe nkqo ibe ngamava abhalwe kwi-paginated. Ngaphezu koko, i-CSS Overflow Level 5 spec yazisa i-browser‑generated amaqhosha okuskrola kunye neemaki eziziphatha njenge-carousel UI ebonakala ngokupheleleyo, kodwa zibhengezwe ngokupheleleyo kwi-CSS.

Eyona nto ibalulekileyo kukuba isikhangeli, hayi ikhowudi yakho yeJavaScript, siba noxanduva lwezinto eziphambili ezixhalabisayo nge-UX.: i-scrolling physics, i-keyboard navigation, i-focus order, kwaneendima ze-ARIA zolawulo lwe-carousel. Kwiimeko ezininzi kunzima ngokwenene ukwakha into efikelelekayo nesebenza ngcono kunaleyo iqonga ngoku likunika yona ngoku.

Enye inzuzo enkulu yee-carousels ze-CSS kukuqinaUkuba iJavaScript ayilayishwanga, abasebenzisi abaneskripthi esivaliweyo okanye abakhubazekileyo basafumana iseti yezinto ezinokuskrolwa ezisebenziseka ngokugqibeleleyo. Akukho manzi, akukho tshintsho loyilo oluziswa yikhowudi yokulayisha kade, kwaye zimbalwa kakhulu iindawo ezihambayo ezinokungahambi kakuhle ngokuhamba kwexesha.

Ibhloko yokwakha engundoqo: isitya esishukumayo esineScroll Snap

Yonke i-carousel ye-CSS kuphela iqala ubomi njengesikhongozeli esiqhelekileyo esishukumayoCinga ngoluhlu olulula lwezilayidi ezinokuskrolwa ngokuthe tye. Ukusuka apho, wongeza ukukrola ukuze i-viewport ivaleleke kwislayidi nganye ngokwemvelo.

Ulwakhiwo oluncinci lwe-HTML lwe-carousel ethe tye lulula ngabom: into yokusonga kunye nothotho lwezinto ezityibilikayo ngaphakathi. Ungasebenzisa ul kunye li izinto, okanye div nomntwana divs—I-CSS yenza umsebenzi onzima, ngoko ke awudingi zifundo ezikhethekileyo kumntwana ngamnye ngaphandle kokuba uyilo lwakho lufuna zona.

Useto olusisiseko lwe-scroll-snap lunokujongeka ngolu hlobo kwi-CSS, xa ucinga ukuba kukho umbono obanzi ngokupheleleyo, wesilayidi esinye:

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

Apha isitya sisebenzisa display: flex ukucwangcisa abantwana bayo ngokuthe tye, yaye overflow-x: auto ukuvumela ukuskrola. Umlingo ungaphakathi scroll-snap-type: x mandatory, exelela isikhangeli ukuba i-horizontal scroll kufuneka ihlale ihleli kwindawo efanelekileyo ye-snap, kwaye kwi scroll-snap-align: center kwisilayidi ngasinye, esichaza ezo ndawo zokufinyeza.

Olu dibaniso lwe-flexbox kunye ne-scroll snap luvakala ngathi yi-carousel ngoko nangoko: abasebenzisi bayaskrola okanye baswayiphe, kwaye isilayidi esikufutshane siyangena endaweni yaso. Ngenxa yokuba sisebenzisa ukuskrola kwendalo, igalelo lokuchukumisa kwiifowuni nakwiitablethi liyasebenza, ngaphandle kwayo nayiphi na into. abaphathi bezandla okanye amathala eencwadi angaphezulu.

Awuthintelwanga kwinto enye ngokubona ngakunyeKwi-carousels ezininzi ezibonisa amakhadi amaninzi ngaxeshanye, ungasebenzisa ububanzi obuguquguqukayo kwizinto, umzekelo:

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

Olu tshintsho lukuvumela ukuba ubonise, masithi, amakhadi amathathu ngesithuba ngasinye kunye nesithuba esincinci, ngelixa besazuza kwindlela yokuziphatha yokuthatha imifanekiso. Abasebenzisi batyibilika kumaphepha amakhadi endaweni yeeslayidi zeqhawe elinye, ezisebenza kakuhle kuluhlu lweemveliso okanye kwiigalari.

Amaqhosha okuskrola ane-pseudo-element ethi ::scroll-button()

Nje ukuba ube ne-scroller ekhawulezayo, into elandelayo abantu abaninzi abayifunayo ngamaqhosha okuzulazula acacileyo—izilawuli zangaphambili nezilandelayo ezishukumisa i-carousel ekhohlo okanye ekunene. Ngokwesiko, ubuya kuyila <button> izinto, dibanisa imicimbi yokucofa uze ubale ukuba uza kuskrola umgama ongakanani.

I-CSS Overflow 5 spec yazisa ::scroll-button(), into engeyiyo evumela isikhangeli ukuba senze konke oko kuphakamisa okunzimaNangona oku kufumaneka ngoku ukususela kwiChrome 135 (kwaye ngokuqhelekileyo ngasemva kweeflegi zovavanyo ekuqaleni), kukubona indlela ii-carousels eziza kubhalwa ngayo kwixesha elizayo.

Ubhengeza amaqhosha okuskrola ngendlela efanayo naleyo ubuya kwenza ngayo nayiphi na enye into engeyiyoUmzekelo, ukuvelisa amaqhosha asekhohlo nasekunene kwi-carousel yakho:

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

Xa le CSS isetyenziswa, isikhangeli senza i-intanethi yokwenyani <button> izinto njengezalamane zesikhongozeli sokuskrola, ibadibanisa kwi-scroller, ibanike iindima ezifanelekileyo, baze badibanise indlela abaziphatha ngayo. Ukucofa kube kanye kudla ngokuskrola malunga ne-85% yendawo yokuskrola, nto leyo evakala ngathi “liphepha” kwiindlela ezininzi zokubeka imifanekiso.

Ukuba uyilo lwakho lulindele into enye ebanzi ngokucofa ngakunye, ungazidibanisa ezi zinto zingamanga kunye nokukroba okungqongqo kumntwana ngamnye ngokongeza scroll-snap-stop: alwaysOko kunyanzela indawo yokujonga ukuba ifike kwimida yezinto endaweni yokuma phakathi.

Ipropati yomxholo apha isebenza kabini: ixabiso lokuqala yinto abasebenzisi abayibona ngamehlo (kule meko, oonobumba beentolo), kwaye umtya wesibini ngumbhalo ofikelelekayo onokufumaneka kwitekhnoloji yokuncedisa. Ukhululekile ukuhombisa la maqhosha kwaye uwabeke ngeCSS, okanye usebenzise imisebenzi efana anchor() ukuze zilungelelaniswe ngokuchanekileyo noyilo lwakho.

Skrola iimaki ezine ::scroll-marker() kunye ne ::scroll-marker-group

Amachaphaza okanye iilebhile ezingaphantsi kwekharousel—ezidla ngokubizwa ngokuba “ziibhulethi zepagination” okanye “iimarkers”—zezinye zezinto ezifunekayoZibonisa ukuba zingaphi izinto ezikhoyo kunye nokuba zeziphi ezibonakalayo ngoku, kwaye zivumela abasebenzisi ukuba batsibe ngqo kwisilayidi esithile.

The ::scroll-marker() i-pseudo-element ikunika ezi mpawu ngaphandle kokwenza ii-anchor links okanye ii-span ngesandlaUphawu ngalunye ngokusisiseko luyindlela yokuhambahamba <a> into eyenziwe sisikhangeli, ekhomba kwinto ehambelanayo yokuskrola kwaye ithatha inxaxheba kwindlela yokukhangela i-keyboard kunye ne-screen reader.

Ukuze uyilungiselele le nto, uxelela isikhangeli apho kufuneka sibeke khona iqela leemakishi kunye scroll-marker-group, kunye nokuba zeziphi izinto ekufuneka zenziwe iimaki. Uqwalaselo oluncinci lunokujongeka ngolu hlobo:

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

Isikhangeli sakha i- ::scroll-marker-group isikhongozeli njengomntakwabo wesikroli aze asigcwalise ngophawu olunye lomntwana ngamnye okhethiweyoKulo mzekelo ulula, iimpawu zibonakala njengamachaphaza angenanto, kodwa ungasebenzisa ngokulula umbhalo onje nge-“Season 1”, ii-icon okanye ii-thumbnails ngokutshintsha i- content propati.

Yintoni eyenza ezi mpawu zikhetheke xa zithelekiswa ne-scrollbar ecacileyo kukuba ziikhonkco zokwenyani zokuhamba. Zivumela abasebenzisi ukuba batsibele ngqo kwiindawo ezinentsingiselo, kwaye ziza neentsingiselo eziluncedo: kukho :target-current imeko ebonisa ukuba loluphi uphawu oluhambelana nesilayidi esibonakalayo ngoku okanye esikrweliweyo. Inkxaso yekhibhodi isebenza njengeqela elijolise kulo, kwaye abafundi besikrini banokubabonisa njengolawulo olufana noluhlu lwethebhu.

Eli cebo linamandla ngakumbi xa i-scroller yakho imele iziqwenga ezinengqondo endaweni yezinto ngazinyeUmzekelo, endaweni yokudala iimpawu ezilishumi zeziqephu ezilishumi, ungenza iimpawu ezimbini eziqala ekuqaleni kwesizini yokuqala neyesibini. Ukhululekile ukugqiba ukuba zeziphi "iindawo ezinomdla" ekufuneka zijongwe.

Ukudibanisa amaqhosha kunye neemaki kwi-UI epheleleyo ye-carousel

Xa ubeka ::scroll-button() kwaye ::scroll-marker() kunye kwi-scroller enye, ugqibela une-UI abasebenzisi abayibona ngoko nangoko njenge-carousel: ulawulo lwangaphambili/olulandelayo, umqolo weemaki ezibonisa ukuba zikude kangakanani, kunye nokuqhekezwa okuthe tye phakathi kwezilayidi.

Umahluko ophambili kwiislayidi zeJavaScript zakudala kukuba uninzi lwale logic ngoku luhlala kwisikhangeli-ndlela.Amaqhosha kunye neemaki ziveliswa zizinto ezineendima ezichanekileyo ze-ARIA, ezidityaniswe ngokufanelekileyo kulandelelwano lwethebhu, kunye nebali lokufikeleleka eliyilwe ngamaqela angaphantsi kwesikhangeli endaweni yokwenziwa ngokutsha kwindawo nganye.

Le ndlela izisa iingenelo ezininzi ezisebenzisekayo: isebenza xa iJavaScript ingasebenzi, isusa iingxaki zokufiphaza kwamanzi kunye nexesha, inciphisa i-Cumulative Layout Shift kuba ulawulo luyaziwa ngexesha loyilo lwe-CSS, kwaye idibana ngokulula nee-animations eziqhutywa yi-scroll okanye imibuzo ye-scroll state ukuba ufuna ukongeza i-flair.

Kwizixhobo zokuchukumisa, amava alula ngokwemvelo ukusebenzisa iminwe kuba isikhongozeli sokuskrola sisesisixhobo sokuskrola sendalo. Kwiidesktops, i-mousewheel kunye ne-keyboard input zisebenza njengoko kulindelekile, kwaye izalathisi zokugxila kulawulo oluvelisiweyo zinokulungiswa ukuze zihambelane nezikhokelo zakho zoyilo kunye nokufikeleleka.

Ngokwembono yokugcinwa, "yenza okuncinci, fikelela kokuninzi" iba yinkcazo echanekileyo kakhuluEndaweni yokugcina ingqiqo yokusetyenziswa kwe-carousel ezininzi kwiiprojekthi, uxhomekeke kwiimpawu zeqonga elabelwana ngazo nezisemgangathweni eziya kuhlala ziphucuka ngokuhamba kwexesha ngaphandle komsebenzi owongezelelweyo kwicala lakho.

Ukwenza iScroll Snap isebenze kwiiprojekthi zokwenyani

Nokuba ungawunaki okwethutyana lo mfanekiso-ngqondweni omtsha, i-scroll-snap iyodwa sele ilungile ngokwaneleyo kwii-carousels ezininzi zemveliso.Inkxaso yebrawuza ye-scroll-snap kwiinjini zanamhlanje iqinile, kwaye indlela esebenza ngayo inokuqikelelwa zombini nge-mousewheel kunye ne-touch gestures.

Kwimeko elula, i-carousel yakho ye-HTML isenokuba yi- div kunye nothotho lwemifanekiso ngaphakathiUngasinika eso siqulathi udidi olufana nolu .carousel kwaye ushiye imifanekiso yomntwana ingahlelwanga; i-CSS iphatha ulungelelwaniso kunye nokuskrola.

Ngokuvula scroll-behavior: smooth kwisikhongozeli, ukuskrola phakathi kwamanqaku e-snap kuba yinto ehlekisayo endaweni yokutsiba. Oku kubonakala ngakumbi xa abasebenzisi becofa ii-markers okanye ii-anchor links, okanye xa uqalisa ukuskrola ngokwenkqubo kwiisetingi ze-hybrid.

Ipropathi nganye yesitshixo sokuskrola-snap idlala indima eyahlukileyo kakhulu. scroll-snap-type ichaza i-axis kunye nokuba ukuqhwanyaza kuyimfuneko okanye yingcebiso nje; scroll-snap-align kubantwana ichaza apho bavaleleka khona (ukuqala, embindini, ekupheleni); kwaye scroll-snap-stop: always ithintela isiphequluli ukuba singatsibi iindawo ezikhawulezayo xa siskrola ngokukhawuleza.

Xa zisetyenziswa kunye, ezi mpawu zikuvumela ukuba uchaze ngqo indlela i-carousel efanele ivakale ngayo—ukusuka ekuthatheni imifanekiso ngokulula nangokuxolelayo efanelekileyo kwiindawo ezinkulu zomxholo, ukuya kwindlela yokuziphatha engqongqo, etyibilikayo netyibilikayo efanelekileyo kwiibhena zeqhawe apho ungafuniyo ukufika "phakathi" kwezinto.

Ngenxa yokuba le yiCSS emsulwa, ungayilungisa ngokulula uyilo ngendlela ephendulayoNgemibuzo yemidiya, tshintsha ukusuka kwisilayidi esinye ngombono ngamnye kwizikrini ezimxinwa ukuya kwezininzi ngombono ngamnye kwiidesktop ezibanzi, ngokutshintsha nje flex-basis kwezinto. Akukho ndawo zokwaphuka kweJavaScript, ukulinganisa ubungakanani babaphulaphuli okanye ububanzi obubalwe ngokutsha obufunekayo.

Izinto ezingachanekanga zovavanyo kunye nokufunyanwa kweempawu

Izinto ezintsha ezingachanekanga ezijolise kwi-carousel—::scroll-button(), ::scroll-marker() kwaye ::scroll-marker-group—zinamandla kodwa zisentsha xa zithelekiswaNgexesha lokubhalwa kwale ngxelo, ziyafumaneka kwiChrome 135 nakweminye imimandla, zihlala zifuna iiflegi zovavanyo, kwaye ziya kusasazeka kwezinye iinjini ngokuhamba kwexesha.

Ngenxa yokuba inkxaso ayikafumaneki kwihlabathi liphela, iisayithi zemveliso kufuneka zixhomekeke ekufumaneni iimpawu kunye nokubuyela umva okuhle.. I-CSS ikunika @supports umthetho we-at-rule, okuvumela ukuba usebenzise imithetho ngokwemiqathango esekwe ekuqatshelweni kwepropati.

Ungachaza umgca olula wokuhambahamba obuyela umva—iseti yeekhonkco okanye amaqhosha ahlala phantsi kwe-carousel—aze afihle loo mgca xa isikhangeli sixhasa amaqhosha okuskrola endalo. Umzekelo:

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

apha .carousel-nav ingaba neekhonkco ze-anchor ezibhalwe ngesandla ezikhomba kwiislayidi ngee-ID, njengaye <a href="#slide1">1</a>Kwiibhrawuza eziqonda ipropathi entsha yeqhosha lokuskrola, ulawulo lwakho lwendalo luyavela kwaye i-nav yokubuyela umva ifihliwe; kwiibhrawuza ezindala, i-anchor navigation ihlala ihleli, idibene ne-scroll-snap ukuze ufumane amava asebenziseka ngokugqibeleleyo.

Le ndlela idibeneyo yenza kube lula ukuzama iimpawu ze-carousel zesizukulwana esilandelayo namhlanje, ngaphandle kokuzitshixa kwi-injini ethile okanye kwi-flag configuration. Njengoko inkxaso yesiphequluli ikhula, unokuxhomekeka kakhulu kwizinto ezingachanekanga kwaye unciphise ezinye ze-scaffolding ezenziwe ngesandla.

Ii-carousels ze-CSS kuphela ezidlala ngokuzenzekelayo ezinee-animations ze-keyframe

Esinye isicelo esiqhelekileyo kukudlala ngokuzenzekelayo—i-carousel ezihambela yodwa, ikhetha ukuma xa ibekwe phezulu.Nangona ukudlala ngokuzenzekelayo kunemiqobo ethile ye-UX kunye nokufikelela, kunokwenzeka ukukwenza oko nge-CSS animations kuphela.

Indlela elula yokwenza inguqulelo ethe tye yethrekhi yakho yesilayidi ibe yi-animation.

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

Kulo mzekelo, ii-keyframes zichitha ixesha elininzi kwi-offset nganye ngaphambi kokuba ziye kwisilayidi esilandelayo.. Ingoma ibuyela umva ekupheleni, inika inkangeleko yesilayidi ephindaphindayo kwiislayidi ezine. Ukuzulazula phezu kwe-carousel kuyayimisa i-animation, ukuze abasebenzisi bakwazi ukujonga umxholo ngaphandle kokulwa nentshukumo eqhubekayo.

Ukuhlonipha abasebenzisi abakhetha ukunyakaza okuncitshisiweyo ngenxa yezizathu zempilo okanye intuthuzelo, ungayisonga i-animation kwi-media query:

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

Oku kuqinisekisa ukuba kwiinkqubo apho kucelwe khona intshukumo encitshisiweyo, izilayidi zihlala zingashukumi., ikhubaza ukudlala ngokuzenzekelayo ngelixa ivumela ukuskrola ngesandla okanye ukuzulazula ngamaqhosha/umaka apho kubonelelwe khona.

Enye into ebalulekileyo yokutshintshiselana kukuba i-autoplay esekelwe kwi-keyframe ayidibani ne-scroll-snap ngokuzenzekelayo.Uguqulela umxholo ngesandla endaweni yokuxhomekeka kwi-native scroll, ngoko ke kufuneka uyila i-animation ngononophelo ukuze uphephe izilayidi ezingabonakaliyo kwaye ugcine ixesha lihambelana noyilo lwakho.

Izinto eziqwalaselwayo malunga nokufikeleleka kwee-carousels ze-CSS

Ukufikeleleka yindawo apho ii-carousels ezisekelwe kwi-CSS zinokukhanya ngokwenene, kuba uninzi lwe-logic enzima itshintsha ukusuka kwikhowudi yakho yesiko ukuya kwiindlela zokuziphatha zeqonga eziye zayilwa ngononophelo kwaye zavavanywa.

Xa uxhomekeke kwi-native scrolling kunye ne-scroll-snap, ufumana inkxaso yekhibhodi, yokuchukumisa kunye neyemawusi ngokuzenzekelayo.Abasebenzisi bangafaka i-scroller kwi-scroll, basebenzise amaqhosha e-arrow ukuhambisa, ukuswayipha kwii-touchscreens kunye nokuskrola ngevili, ngaphandle kwabaphulaphuli bemicimbi okanye abaphathi abakhethekileyo.

Amaqhosha okuskrola kunye neemaki zovavanyo ziya phambili. Isikhangeli sizidala ngeentsingiselo ezifanelekileyo, sizihlanganise kwi-tab order, kwaye sigcina imeko yazo, okwenza kube nzima kakhulu ukulibala ngempazamo iimpawu ze-ARIA okanye ukuzibhala ngendlela engafanelekanga. Ulawulo lwe-carousel oluvelayo ludla ngokufikeleleka lula kuneenkqubo ezifakwe ekhaya.

Usenokongeza kwaye usafanele ukongeza amacebiso acacileyo kwiindawo zakho ze-carouselUmzekelo, ukumaka isitya ngo role="region" kunye nenkcazelo echazayo aria-label kunceda abasebenzisi besikrini ukuba baqonde ukuba eli candelo limele ntoni:

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

Ukuqinisekisa ukuba izalathisi zokugxila ezibonakalayo kuzo zonke izinto ezisebenzisanayo zihlala zibalulekileNokuba ulawulo ngamaqhosha akho kunye neekhonkco okanye izinto ezingachanekanga ezenziwe sisikhangeli, qiniseka ukuba imida yokugxila ayisuswanga okanye yenziwe ingabonakali lula. outline, outline-offset okanye utshintsho oluvela kwimvelaphi njengoko kufuneka ukuze kuhlangatyezwane neemfuno zomahluko.

Ubungakanani bento ekujoliswe kuyo yenye into enokwenziwa ukuze uyiqwalasele. Jonga ukuba ulawulo oluyi-44×44px ubuncinane luhambelana nezikhokelo zokufikelela eziqhelekileyo, ukuze abasebenzisi bangasokoli ukucofa iintolo okanye amachaphaza kwizikrini ezincinci.

Nakuphi na ukusebenza kokuzidlalela ngokuzenzekelayo, nika abasebenzisi ulawulo olucacileyo kwaye uphephe intshukumo erhabaxa kakhulu. Nika iqhosha lokumisa isikhashana okanye iqhosha lokumisa elicacileyo, kwaye ucinge ngokuyicima ngokuzenzekelayo ukuba umxholo uxinene okanye umbhalo unzima. prefers-reduced-motion, oku kwenza i-carousel yakho ibe mnandi ngakumbi kubaphulaphuli abaninzi.

Ukuphatha ukuskrola okujikelezayo okanye "okungenamkhawulo" nge-CSS

Enye indlela abantu abasoloko beyicela kukujikeleza ngesangqa: xa ufika kwisilayidi sokugqibela uze uskrole phambili, ubuyela kwislayidi sokuqala ngokutyibilikayo, njenge-carousel ebonakalayo ejikelezayo ngokungapheliyo.

Namhlanje, akukho propati ethe ngqo, yeCSS kuphela eyenza isitya sokuskrola sibe yisangqa ngokwendaloNgaphandle kokuphinda umxholo, umntu oskrolayo uya kuba nesiqalo nesiphelo: wakufika kwinto yokugqibela, ukuskrola okungakumbi akukushukumisi phambili.

Ababhali beenkcukacha bayazi ukuba uninzi lwee-carousels ze-UI zilindele olu hlobo lokuziphatha olujikelezayo, kwaye kukho umdla osebenzayo ekuphononongeni izisombululo zenqanaba leqonga lokuskrola ngokujikelezayo, ngendlela efanayo naleyo amaqhosha amatsha okuskrola kunye neemaki ayenziwe ngayo asemgangathweni. Oko kuthethiweyo, okwangoku awunakucela isikhangeli ukuba sisonge izikhundla zokuskrola ngokwendalo ngesibhengezo esinye seCSS.

Kwiisetingi zeCSS kuphela, ukulinganisa i-looping kudla ngokuthetha ukuguqula i-animation (njengakwimizekelo ye-autoplay keyframe) okanye ukwamkela isiphelo esithe ngqo kulandelelwanoUkuba i-infinity engenamthungo iyimfuneko ngokupheleleyo kwaye awukwazi ukuphinda umxholo, iJavaScript isesisixhobo esiguquguqukayo ngakumbi okwangoku.

Iindaba ezimnandi zezokuba akukho nto ikuthintelayo ekudibaniseni i-carousel eqhutywa yi-CSS kunye ne-JavaScript encinci apho yongeza ixabiso ngokwenene.Ungaxhomekeka kumaqhosha e-scroll-snap kunye ne-CSS ukuze ukwazi ukuhambahamba yonke imihla, uze wongeze imigca embalwa yesikripthi ukuze ubukele indawo yokuskrola uze utsibe ukusuka esiphelweni ukuya ekuqaleni xa kufanelekile.

I-HTML/CSS xa ithelekiswa neJavaScript yee-carousels ezityebileyo, ezisekelwe kwikhadi

Ingxaki eqhelekileyo kubaphuhlisi abatsha kukuba ingaba i-carousel yekhadi enzima ngakumbi "kufuneka" ibhalwe kwiJavaScriptAbantu badla ngokucinga ukuba xa udlula kwimifanekiso elula uye kumakhadi aphendulayo aneenxalenye ezahlukeneyo, i-CSS yodwa ayisebenzi.

Enyanisweni, i-CSS scroll-snap isebenza kakuhle kumakhadi atyebileyo njengoko isenza kwimifanekiso ecacileyo.Ukuba ikhadi ngalinye liyibhloko ngaphakathi kwisikhongozeli sokuskrola, ungayithatha, uyijikeleze kwaye ubeke ezinye iindlela ngaphezulu. Izihloko, amaqhosha, iziqwenga zombhalo kwanemidiya efakiweyo ayitshintshi ngokupheleleyo indlela esebenza ngayo.

Apho iJavaScript ikhanya khona ikwimeko yokuziphatha enemiqathango kunye nemeko enzimaUkuba i-carousel yakho kufuneka ihluze amakhadi ngendlela eguquguqukayo, icwangcise kwakhona iislayidi, ivumelanise nezinye izinto, ikhuphe umxholo omtsha ngokukhawuleza okanye ixhase i-logic eyenzelwe wena kakhulu ("ukuba eli nqaku licofiwe, bonisa elo khadi lingadibaniyo konke konke"), iJavaScript inokuyichaza loo logic yeshishini ngokulula kuneCSS yodwa.

Nangona kunjalo, inani elimangalisayo leeslayidi zemihla ngemihla ngokusisiseko luluhlu olungaguqukiyo lwezinto ezihamba ngokuthe ngqoKwezo meko, ukusebenzisa imigca embalwa yeCSS endaweni yokungenisa ilayibrari enkulu yeJS kulula ukuyicinga kwaye kungcono ekusebenzeni. Ukuqonda i-scroll-snap kunye nee-pseudo-elements ezintsha kukuvumela ukuba ugcine iJavaScript kwiimeko ezingaqhelekanga apho ihlawulela khona ngokwenene.

Ukuba usafunda uphuhliso lwangaphambili, ukuphatha ii-carousels ze-CSS njengesiseko sakho esimiselweyo ngumkhwa omhle.Qala nge-HTML kunye ne-CSS, kwaye ufikelele kwiskripthi kuphela xa ufikelele kumda ocacileyo. Oku kukufundisa okungakumbi malunga noko iqonga linokukwenza kwaye kudla ngokukhokelela kwiziseko zekhowudi ezicocekileyo nezingenamsebenzi.

Ukubuyela umva, iseti entsha ye-CSS inezinto ezimalunga nokuskrola, ukuqhwanyaza, amaqhosha, iimpawu kunye nemibuzo yesimo sokuskrola iguqule ii-carousels ukusuka kwii-widgets ezisindayo zeskripthi ukuya kwiinxalenye ezichazayo kakhulu. Ngokusebenzisa i-scroll-snap kwi-core paging behavior, isebenzisa ::scroll-button() kwaye ::scroll-marker() apho ixhaswa khona, kwaye usebenzisa iindlela ezilungileyo zokufumanisa iimpawu kunye nokufikeleleka, ungathumela ii-carousels ezikhawulezayo, ezomeleleyo kwaye ezilula ukuzigcina kunezilayidi zendabuko eziqhutywa yi-JS—ngexesha usagcina ukuguquguquka okwaneleyo kokuxubana kwiJavaScript apho i-cyclical logic okanye unxibelelwano oluphambili luyifuna ngokwenene loo nto.