IiCarousels zeCSS Ngaphandle kweJavaScript: Isikhokelo Esipheleleyo

Ikhaya » Python » IiCarousels zeCSS Ngaphandle kweJavaScript: Isikhokelo Esipheleleyo

Ukwakha ii-carousels ngaphandle komgca omnye weJavaScript akusekho yintsomi yesayensi ngoku; i-CSS yanamhlanje ikunika yonke into oyifunayo ukuze wenze izilayida ezigudileyo nezinobuhlobo usebenzisa Ipropati ye-CSS touch-action ezivakala ngathi zezasekhaya kwisiphequluli. Ukusuka kwi-scroll snapping ukuya kwi-pseudo-elements zovavanyo ezivelisa ngokuzenzekelayo ulawulo lokuhamba, ungahambisa izinto ezipheleleyo ngelixa ugcina iphakheji yakho ithambile kwaye ubomi bakho bulula.

Ukuba wakha walwa neelayibrari ze-JS carousel ezinzima, iingxaki zokufuma okanye iingxaki zokufikeleleka, ii-carousels ze-CSS kuphela ziphefumla umoya omtsha.Ngeenkcukacha zamva nje (ezifana ne-CSS Overflow Level 5) kunye neempawu ezisele zizinzile ezifana scroll-snap-type, ngoku kusengqiqweni ukuthumela ii-carousels ezilungele imveliso ezikhawulezayo, ezifikelelekayo kwikhibhodi kwaye eziqinileyo xa iJavaScript ingasebenzi.

Kutheni i-CSS yanamhlanje yenza ii-carousels zeJavaScript zinganyanzelekanga

Kangangeminyaka, impendulo esisiseko ethi “ndiyakha njani i-carousel?” yayikukuba “ndithathe ilayibrari ye-JS”. I-Swiper, i-Slick, i-Glide, i-carousel kaBootstrap kunye nabanye abaninzi basombulule le ngxaki ngokudibanisa abaphulaphuli bemicimbi, ii-timers, ukulinganisa ubungakanani bababukeli kunye neendima ze-ARIA kuwe—kodwa bafake ii-kilobytes ezongezelelweyo kwi-bundle yakho kwaye bazisa olunye uxhomekeko ekufuneka lugcinwe.

Namhlanje, i-CSS ifikelele ngokukhawuleza kwiimeko ezininzi zokusetyenziswa kwe-carouselNgeempawu ezimbalwa, ungayiguqula i-scroller eqhelekileyo ethe tye ibe ngamava akwiphepha, afakwe kwi-snap‑to‑slide asebenza ngevili lemawusi, i-trackpad, iintolo zekhibhodi kunye nokuswayipha okuchukumisayo. Akukho baphulaphuli, akukho kuphinda kuphume okubangelwa yi-JS logic, kwaye akukho meko yobuhlanga ene-hydration kwi-frameworks.

Ingcinga esisiseko ilula: uphatha i-carousel yakho njengendawo enokuskrolwa, kungekhona njengecandelo lomlingo elithumela phakathi kwezilayidi. I-CSS emva koko "inceda" ukuskrola ngamanqaku okutsalwa, utshintsho olugudileyo, kwaye kwi-spec entsha, amaqhosha kunye neemaki ezakhelwe ngaphakathi ezifakwa yibrowser kwi-DOM njengezinto zokwenyani ezisebenzisanayo.

Olu tshintsho lunemiphumo emikhulu ekusebenzeni nasekuqineniI-CSS carousel isasebenza ngokugqibeleleyo xa i-JS ivaliwe, ingalayishi okanye ikhutshaziwe ngumsebenzisi. Injini yokuskrola yesikhangeli yenza uninzi lokuphakamisa okunzima, olulungiselelwe kakhulu kuzo zonke iinjini ezinkulu kwaye lulungiselelwe izixhobo ezinamandla aphantsi kunye nezixhobo zokufikelela.

Ngaphezulu koko, i-CSS ineempawu ezifana :has(), uyilo lwegridi kunye nee-animations eziqhutywa kukuskrola zifakelwa kwindawo efanayo yokuskrola, ikuvumela ukuba wakhe izalathisi zesilayidi ezintsonkothileyo, utyhilelo lomxholo okanye i-parallax ngaphandle kokudibanisa iinkqubo ezintathu ezahlukeneyo (ikhowudi yakho, ingqiqo yelayibrari kunye ne-browser scroll) ngeendlela ezibuthathaka.

Ibhloko yokwakha engundoqo: Skrola i-Snap yee-carousels ze-CSS kuphela

Eyona nto iphambili kwi-carousel ye-CSS kuphela yi-Scroll Snap module., ekuvumela ukuba uchaze amanqaku “emagnethi” ekufuneka indawo yokuskrola itshixe kuwo emva kokuba umsebenzisi eyeke ukuskrola. Endaweni yokufika phakathi kwezilayidi ezimbini, umbono ufikelela kweyona ikufutshane, nto leyo enika loo mvakalelo yesilayidi yakudala.

Ulwakhiwo lwe-HTML lunokuba luncinci: isikhongozeli esiskrola ngokuthe tye, kunye nothotho lwezinto zesilayidi ngaphakathi kuso. Akunyanzelekanga nokuba unike umfanekiso ngamnye okanye ikhadi udidi lwalo ukuba uphawu lwakho luhlala lufana—nangona ukubiza izinto zakho kudla ngokunceda ekulungiseni nasekufikelelekeni:

Umzekelo wesakhiwo se-carousel yomfanekiso osisiseko ingachazwa njenge-wrapper efana <ul class="carousel"> ezininzi <li> izinto, nganye inomfanekiso okanye ikhadi. Umlingo uhlala kwi-CSS:

Uchaza isitya njengoyilo oluthe tye oluguquguqukayo olune-scrolling evuliweyo kwaye ucacise ukuba kufuneka itsale ecaleni kwe-x axis:

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

Isilayidi ngasinye emva koko siveza indawo yokufota, idla ngokuba sembindini okanye ekuqaleni kwe-viewport, kwaye imisela isiseko esizinzileyo ukuze kuvele enye okanye ezininzi ngombono ngamnye:

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

Le patheni sele ikunika i-carousel epheleleyo ngokumangalisayo: abasebenzisi banokuswayipha kwiselfowuni, baskrole ngemawusi okanye ngetrackpad, kwaye i-viewport iya kuhlala ihleli kwislayidi ekufutshane. Akukho JS ijonga iziganeko zokuskrola okanye ukulungisa iindawo ngesandla.

Ukuze wenze ii-carousels zezinto ezininzi (ezifana nemicu yemveliso), kufuneka ulungise kuphela isiseko se-flexUmzekelo, ungabonisa izinto ezintathu ngombono ngamnye ngesithuba esincinci ngokusebenzisa into efana flex: 0 0 calc(33.333% - 1rem) kunye nemida esecaleni. I-Scroll Snap ayikhathali nokuba "iphepha" ngalinye lisisilayidi esinye esibanzi okanye liqela lamakhadi amancinci.

Iipropati ezifana object-fit: cover ziluncedo xa usebenza ngemifanekiso eluhlaza, ukuqinisekisa ukuba bayayizalisa indawo yabo yesilayidi ngaphandle kokuyolula. Xa idibene nomlinganiselo ozinzileyo, ungafumana imifanekiso ehlala ifana nayo nakweyiphi na isayizi yesikrini.

Ukusuka kwii-scrollers ezilula ukuya kwii-carousels ezivakala ngathi zendalo

I-carousel engenanto ejikelezayo sele ivakala kamnandi, kodwa iinkcukacha zanamhlanje zithatha indawo engakumbi., ingakumbi kwiChrome 135+ apho i-CSS Overflow Level 5 draft iqala ukubonakala njengeempawu zokwenyani. I-spec iphatha i-carousel njengendawo yokuskrola ene-UI ekhethiweyo, eyenziwe yibrowser eyijikelezileyo.

Kuloo modeli, "i-carousel" ilingana: i-scroller enye kunye neeseti ezimbini zexabiso—amaqhosha okuskrola kunye nee-scroll markers. Zombini zenziwe zii-pseudo-elements ze-CSS, kodwa isikhangeli sikhupha ii-DOM zakwa-DOM ecaleni kwe-scroller yakho ukuze zisebenze njengolawulo lwendalo.

Okubaluleke kakhulu, isikhangeli sidibanisa intsingiselo, ulungelelwaniso lokugxila kunye nolawulo lwelizwe kuwe.Izinto ezifakwe kwi-intanethi zinemisebenzi efanelekileyo, zinokufakwa kwi-tab ngendlela efanelekileyo, kwaye zibonisa indawo yokuskrola yangoku. Oko kuthetha ukuba ukuphinda inqanaba elifanayo lokufikeleleka ngelayibrari ye-JS egoqwe ngesandla akuyonto ilula; ubuya kufuna iimpawu ze-ARIA, ukuziphatha kweqela elijolise kulo, ukuhamba kwekhibhodi kunye nezibhengezo zengingqi ephilayo zonke zisebenza kunye.

Nokuba awukakulungeli ukuthembela kwiindawo zovavanyo okwangoku, olu lwalathiso lubalulekileIbonisa ukuba ii-carousels, ii-tabs, ii-scrollspy components kunye neepateni ze-UI ezifanayo ziphakanyiswa zibe "ngabemi beklasi yokuqala" kwi-CSS, nto leyo eya kunciphisa kancinci imfuneko yekhowudi yeglue yeJavaScript eyenziwe ngokwezifiso.

Isiphumo sokugqibela sisisiseko esiqinileyo kubo bonke abasebenzisi—kuquka abantu abavala i-JS, abaxhomekeke kwitekhnoloji yokuncedisa, abanezixhobo ezisebenzisa amandla aphantsi okanye abakhangela phantsi kweemeko zenethiwekhi ezibuthathaka. I-Native scroll kunye ne-CSS styling trump script-heavy widgets kuzo zonke ezo meko.

Ukongeza amaqhosha okuskrola nge ::scroll-button()

Kwezinye iiplatifomu sele ubona iintolo ezincinci ecaleni kwee-scrollbar, kodwa entsha ::scroll-button() into engeyiyo ithatha inyathelo eliya phambili kwaye ivumela i-CSS ukuba ichaze amaqhosha azinikeleyo "angaphambili/alandelayo" kuyo nayiphi na indawo enokuskrolwa—kuquka ii-carousels.

La maqhosha okuskrola achazwe yiCSS aziphatha ngendlela eyahlukileyo kwiintolo ze-scrollbar zakudalaEndaweni yokushukumisa umxholo ngokwanda okuncinci, batsiba malunga ne-85% yendawo ebonakalayo ngokucofa. Kwi-carousel epheleleyo, elungelelaniswe ngobubanzi obupheleleyo, evakala ngathi liqhosha lokuhamba ngesilayidi ngasinye.

Ukuba ufuna ngokwenene intshukumo yento enye, ungadibanisa iindlela zokuskena ngokuskrolaIresiphi eqhelekileyo yile scroll-snap-type: x mandatory kwisikhongozeli kwaye scroll-snap-stop: always kumntwana ngamnye othatha imifanekiso. Ngale ndlela, ukucofa iqhosha lokuskrola kube kanye kuya kukusa kwelinye ikhadi uye kwelinye.

Ngokwembono ye-syntax, ukongeza amaqhosha okuskrola kufana kakhulu nokwenza ezinye izinto ezingachanekanga zibe nomtsalane.Ukhetha into enokuskrolwa (masithi, .carousel) kunye nenjongo ::scroll-button(left) or ::scroll-button(right) ukumela ulawulo olubuyela umva noluya phambili. Umzekelo omncinci:

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

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

Ixabiso lomxholo owahlulwe ngesikere likuvumela ukuba unikeze ilebheli ebonakalayo nefikelelekayoEmva koko isikhangeli sewebhu senza i-intanethi yokwenyani <button> ii-nodes njengee-siblings ze-scroll area yakho kwaye ubeka umxholo wakho ngaphakathi kuzo. Uhlala ukhululekile ukuzibeka nokuzilungisa ngendlela othanda ngayo, njengayo nayiphi na enye into—usebenzisa i-absolute positioning, i-CSS grid okanye i-anchor positioning.

Indlela yokugxila isabalulekile aphaUmzekelo, ukusebenzisa umthetho ofana no .carousel::scroll-button(*):focus-visible { outline-offset: 5px; } iqinisekisa ukuba xa abasebenzisi becofa la maqhosha, babona i-focus ring ecacileyo i-offset ukusuka kumda we-element, igcina ukusetyenziswa kwekhibhodi kunye nokuhambelana ne-WCAG.

Ngaphantsi kwe-hood, isiphequluli sigcina umkhondo wemeko yeqhosha kunye noluhlu lokuskrola olufumanekayoOko kuthetha ukuba akufuneki ukhathazeke ngokukhubaza iqhosha elithi "langaphambili" xa ukwislayidi yokuqala okanye iqhosha elithi "elilandelayo" ekupheleni; iqonga lingakwazi ukusingatha ezo meko ngendlela eqhelekileyo.

Skrola iimaki ezine- ::scroll-marker() ukuze ufumane indlela yokuhambahamba ngeebhulethi okanye ilebhile

Iimpawu ezibonakalayo—amachaphaza okanye ii-thumbnails phantsi kwe-carousel—zilindeleke kakhulu kubasebenzisi kule mihla. Entsha ::scroll-marker() i-pseudo-element ikuvumela ukuba uvelise ezo mpawu nge-CSS kuphela, nganye idibene nento ethile kuluhlu olunokuskrolwa.

Ngokungafaniyo nobhontsi we-scrollbar, iimpawu ze-scroll zimele amanqaku anomdlaUphawu ngalunye aluhambelani nje nendawo kwiiphikseli, kodwa nenxalenye yomntwana yokwenyani, nto leyo eyenza ukuba lufaneleke kwiimeko ezinje ngamaxesha onyaka kuthotho lweTV, iindidi zeemveliso, okanye izahluko ezinengqondo ebalini kunokuba lube yifreyimu nganye.

Iimpawu zibonakala njengezisebenzayo <a> Izinto, ikunika iimpawu ezimbini ezibalulekileyo simahla: ukuzulazula kwiphepha kunye nentsingiselo echanekileyo yabafundi besikrini. Zisebenza njengeekhonkco ze-anchor, kodwa zinophuculo oluthile olulungiselelwe ukusetyenziswa kwe-carousel.

Phakathi kwezo ziphuculo kukho :target-current iklasi-mbumbulu, ehambelanayo xa into ehambelanayo ngoku ithathwa njenge "islayidi esebenzayo". Ungayisebenzisa ukugqamisa uphawu olusebenzayo ngemvelaphi okanye umda owahlukileyo.

Ukuze udibanise oku, kuqala uchaze apho iqela labamakishi lifanele lihlale khona se benzisa scroll-marker-group uphawu olukwisikhongozeli, ngesiqhelo ngaphambi okanye emva kwe-scroller. Umzekelo, scroll-marker-group: after; izakubeka iimpawu emva kwendawo ye-carousel kwi-DOM.

Emva koko ujolise kubantwana ngabanye ekufuneka bavelise iimpawuUkuba izilayidi zakho <li> izinto ezifana .carousel > li::scroll-marker Ipateni eqhelekileyo kukudala amachaphaza angenanto:

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

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

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

Isikhangeli sijongana nokuvelisa <a> iimakishi, uzihlanganise zibe yisikhongozeli esizinikeleyo se- ::scroll-marker-group, kwaye uziveze njengezinto ezinokuhanjwa ngekhibhodi eziziphatha njengeqela elijolise kuzo. Abafundi besikrini banokuzibonisa ngendlela efanayo kuluhlu lwethebhu: uhambisa ugxininiso phakathi kweemaki kwaye uzisebenzise ukuze zitsibe kwisilayidi esithile.

Iimpawu azikhawulelwanga kumachaphaza kuphela. Ungaseta content kumanani ("1", "2", njl.njl.), iilebhile ezifundeka ebantwini ezifana nethi “Season 1” okanye “Chapter 3”, okanye nemifanekiso ethe tye ukwenza iigalari ezincinci zeefoto ezininzi ezifana neegalari zeemveliso zorhwebo lwe-intanethi.

Ukudibanisa amaqhosha, iimpawu, kunye namaqhinga okubuyela umva

Xa udibanisa amaqhosha okuskrola kunye neemaki phezu kwe-scroll-snap carousel, ufumana icandelo elivakala lingahlukaniyo kwisisombululo se-JS., kodwa kulula ukuyilungisa kwaye ithumela izinto ezimbalwa ezihambayo. Abasebenzisi banokucofa iintolo, bacofe iibhulethi, baswayiphe kwiitouchscreens okanye basebenzise ukuzulazula kwikhibhodi—konke oku kwenziwa ngendlela efanayo.

Le combo ikwajongana nokusebenza okuqhelekileyo kunye neentloko ze-UXNgenxa yokuba akukho sikripthi esilawula utshintsho lweslayidi, awufumani uhlengahlengiso loyilo oluvela ngesandla. scrollLeft uhlengahlengiso okanye ii-timers ezidubula ngamaxesha angaqhelekanga. I-CLS (i-Cumulative Layout Shift) inciphile kuba umthi we-DOM ulungele kwasekuqaleni kwaye awufaki okanye ulinganise izinto emva kwexesha kumjikelo wobomi.

Nangona kunjalo, kukho into ethi: ::scroll-button kunye ne ::scroll-marker zisavavanywa. kwaye okwangoku ifumaneka kwiChrome 135+ kuphela ngasemva kweeflegi zovavanyo. Oko kuthetha ukuba kufuneka uyile ii-fallbacks ezintle ukuba uceba ukuzisebenzisa kwiindawo zemveliso.

Ukufunyanwa kweempawu nge @supports ngumhlobo wakho ongcono aphaUngenza ibha yokukhangela yendabuko—amakhonkco aya #slide1, #slide2 njalo njalo—ngokungagqibekanga, uze uyifihle xa ulawulo lwendalo lufumaneka. Ipatheni yengcinga erhabaxa ibukeka ngolu hlobo:

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

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

Kwi-HTML, i-nav elula ene-anchor links yanele: isilayidi ngasinye sifumana id, kwaye i-nav ikhomba kwezo ID. Ukutsiba kwi-anchor ngaphakathi kwisikhongozeli se-scroll-snap kuhambelana kakuhle nokuziphatha kwe-snapping, ngoko ke islayidi itsiba kakuhle emva kokutsiba.

Oku kuthetha ukuba ungayonwabela iingenelo zezinto ezingachanekanga zovavanyo ekuxhaseni iibrowsers—amaqhosha apheleleyo emveli, ii-markers, kunye nee-scroll state hooks—ngexesha zibonelela ngamava asebenza ngokupheleleyo kwenye indawo. Akukho msebenzisi ubambeka kwisilayida esingasetyenziswayo.

Ngaphezu koko, konke oku kusasebenza xa iJavaScript ingasebenzi, kuba uxhomekeke kuphela kwii-anchors ze-HTML, indlela yokubhala i-CSS kunye ne-injini yokuskrola yesikhangeli. Kwiipateni ezininzi ze-UX—iigalari, amaxesha, imiboniso yenyathelo ngenyathelo—oko kwanele.

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

Into eqhelekileyo abantu abayilindeleyo kwii-carousels kukudlala ngokuzenzekelayo—izilayidi ziya phambili ngokuzenzekelayo emva kwemizuzwana embalwa. Nangona oku kudla ngokusetyenziswa ngee-JavaScript timers, ungaqikelela oku kuziphatha usebenzisa ii-animations ze-CSS ezicocekileyo.

Icebo kukwenza i-animation i-transform yomqolo oguquguqukayo oqulethe zonke iislayidiKwinani elimiselweyo leeslayidi, uchaza umgca wexesha wefreyimu yesitshixo apho ithrekhi ihlala kwindawo nganye yesilayidi okwethutyana, ize itsibele kwenye. Into efana nale:

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

Emva koko ufaka olu phawu lokugqwala kwi-wrapper egcina izinto zakho zesilayidi, umz. .autoplay-carousel { display: flex; animation: slide 12s infinite; }Uluhlu lweepesenti luchaza amaxesha "okuhlala" kwisilayidi ngasinye ukuze umxholo ufundwe ngaphambi kokuba uqhubeke.

Kubalulekile ukongeza indlela yokuba abasebenzisi bayeke ukudlala ngokuzenzekelayoIndlela elula kodwa esebenzayo kukuma kancinci xa uhambisa isandi ngesandi .autoplay-carousel:hover { animation-play-state: paused; }, ukuze abasebenzisi bedesktop bakwazi ukumisa intshukumo xa benxibelelana nomxholo.

Izinto eziqwalaselwayo malunga nokufikeleleka zihamba phambili kwizinto ezikhethwayo xa kuziwa ekushukumeni. Ukuhlonipha prefers-reduced-motion ithathwa njengeyona ndlela ilungileyo yokwenza izinto, ngoko ke ungayicima ngokupheleleyo i-animation kubasebenzisi abakhetha intshukumo encinci:

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

Ngelixa izisombululo ze-CSS ngokuzenzekelayo zingenakuphatha ngokulula zonke iimeko zomda ezinokwenziwa yi-JS—njengokubalwa kwezilayidi eziguquguqukayo ngokwenene okanye ingqiqo yokumisa/yokuqalisa eqhutywa ngumsebenzisi eyinkimbinkimbi—ziqinile ngokumangalisayo kwii-carousels ezilula nezinganyakaziyo xa ufuna ukuphepha ukubhala konke konke.

Ukuthelekisa ii-carousels ze-CSS-kuphela kunye neJavaScript

Ukugqiba phakathi kweCSS neJavaScript kwi-carousel akusiyonto ithethwayo okanye engenziwanga nto; kuxhomekeke kwiimfuno zakho, abaphulaphuli kunye nohlahlo lwabiwo-mali lokugcinwa. Kodwa ibhalansi itshintshe kakhulu yaya kwiCSS kwiimeko ezininzi zehlabathi lokwenyani.

Ngokwembono yokusebenza, ii-carousels zeCSS zicacile ukuba ziphumeleleAkukho kuhlalutywa okanye ukuphunyezwa kwekhowudi yelayibrari, akukho baphulaphuli bemicimbi kuyo yonke intsebenziswano yokuskrola, kwaye akukho kubalwa kwakhona kwesakhiwo sexesha lokusebenza okubangelwa kukulungiswa okubhaliweyo. Injini yokuskrola yesikhangeli ibhalwe ngekhowudi yendalo ephuculiweyo kakhulu kwaye ilungiselelwe yonke into ukusuka kwiidesktops eziphezulu ukuya kwiifowuni ezinamandla aphantsi.

Ngokuphathelele ukufikeleleka, iimpawu ezintsha ze-CSS carousel ziphakamisa kakhulu umgangathoAmaqhosha okuskrola kunye neemaki ezibonelelwa sisikhangeli ziza zifakwe iindima ze-ARIA, indlela yokuziphatha kwekhibhodi kunye nezibhengezo ebekuya kufuneka zenziwe ngokutsha ngononophelo kwiJavaScript. Nokuba azikho ezo, i-scroll-snap carousel isenokwenziwa ifikeleleke ngeendima kunye neelebhile.

Kwelinye icala, iJavaScript ihlala iluncedo kwiipateni eziphambili kakhuluUkuba ufuna i-autoplay logic eneenkcukacha ezininzi, ii-analytics hooks, i-custom physics, okanye ukuvumelanisa ii-carousels ezininzi kunye ne-shared state (umz., umfanekiso oyintloko kunye nomqolo we-thumbnail kunye ne-pagination yangaphandle), iindlela eziqhutywa yiskripthi zisenokuguquguquka ngakumbi.

Nangona kunjalo, ingqiqo ephambili kukuba ii-carousels ezininzi "zemihla ngemihla" azidingi olu nqanaba lobunzimaIgalari yemveliso elula, isilayidi sobungqina okanye umgca "wezithuba eziveleleyo" ungasetyenziswa nge-scroll snap, imithetho embalwa ye-CSS kunye nolawulo lwendalo olukhethiweyo—ukukusindisa ekutsaleni ukuxhomekeka kwi-50KB ukuze uhambe phakathi kwezilayidi ezintathu.

Enye into ekufuneka iqwalaselwe kukuqina xa iJavaScript isilelaIi-carousels ze-CSS kuphela zihlala zisebenza ngokugqibeleleyo ukuba i-JS ivaliwe yi-proxy yenkampani, yaphulwe yi-ad blocker, okanye ayikalayishwa xa umsebenzisi efika kwiphepha. Olu hlobo lokonakala okuhle kunzima ukulufezekisa kwiilayibrari ezixhomekeke kwinqanaba lokuqalisa emva kokulayisha iphepha.

Iindlela ezilungileyo zokufikeleleka kwii-carousels zeCSS

Nokuba isikhangeli sikunceda kwiinkalo ezithile zokufikelela, usadlala indima ebalulekileyo ekwenzeni i-CSS carousel yakho isebenziseke kuwo wonke umntu. I-Semantics, ulawulo lokugxila kunye novakalelo lwentshukumo zonke kufuneka zibe phambili engqondweni yakho.

Okokuqala, nika i-carousel uphawu olufanelekileyoUkuyisonga ngento ethile role="region" kunye nenkcazelo echazayo aria-label njenge-“Product gallery” okanye “Featured articles” yenza kube lula ukuba abasebenzisi be-screen reader bayifumane baze bayiqonde.

Isilayidi ngasinye sinokuba nelebheli efikelelekayo, umzekelo nge aria-label esithi “Islayidi 1 kwezi-3”, “Islayidi 2 kwezi-3”, njalo njalo. Ngale ndlela, xa umsebenzisi efika kwisilayidi, ufumana umxholo ngoko nangoko malunga nendawo yakhe kulandelelwano.

Ungalibali izalathisi zokugxila ezibonakalayoNasiphi na isiqalelo esisebenzisanayo—nokuba ::scroll-button, i ::scroll-marker-ikhonkco elenziwe ngesandla, okanye i-anchor yesandla kwi-nav yakho yokubuyela umva—ifuna isitayile esicacileyo sokugxila esidlula izikhokelo zomahluko kwaye esingasuswayo ngokuseta kwakhona kwehlabathi.

Ukuba usebenzisa i-autoplay okanye i-scroll-driven animations, hlonipha ukhetho lwakho lwentshukumo. Sebenzisa prefers-reduced-motion Ukukhubaza okanye ukwenza lula ii-animation akunyanzelekanga ukuba ukhathalele abasebenzisi abanesifo sokudakumba, kwaye kulula ngokwaneleyo ukugubungela iziphumo eziqatha ngakumbi kumbuzo weendaba.

Okokugqibela, cinga ngobukhulu bezinto ezikujoliswe kuzo xa uchukumisaNokuba ulungisa ii-scroll markers zemveli okanye ii-nav links zakho, gcina iindawo ezisebenzisanayo ubuncinane malunga nee-pixels ze-44×44 ze-CSS. Oko kuthetha ukuba i-padding eninzi kunye nesithuba esiphakathi kunokuba kubekho izangqa ezincinci ezihlanganiswe ndawonye.

Iindlela zokusebenza zehlabathi lokwenyani, izixhobo, kunye nezikhokelo zexesha elizayo

Ukuze kube lula ukwenza uvavanyo ngee-carousels ze-CSS, amanye amaqela enze izixhobo ze-configurator ezibukhoma apho unokujika khona iiswitshi—vula amaqhosha okuskrola, utshintshe iimaki, ulungise iindlela zokufota—kwaye ubone ngoko nangoko i-CSS ehlaziyiweyo efunekayo kuloo lungiselelo. Ezi ndawo zokudlala zintle kakhulu zokufunda ngokutshintsha-tshintsha.

Kunye nabalungiseleli, iigalari ezikhethwe kakuhle zeedemo ze-carousel ze-CSS kuphela zibonisa oko kunokwenzekaUza kufumana iipateni ezifana nee-interfaces ezifakwe kwiithebhu, i-scrollspy navigation, ii-slides ezisekwe kwinyathelo, ii-thumbnail gallerys kunye nokunye, zonke zabelana ngesiseko esifanayo seendawo zokuskrola kunye ne-snapping kunye nolawulo olukhethiweyo.

Uninzi lwezi ndawo zedemo zithunyelwa ngabom ngaphandle kweJavaScript ukungqina le ngongoma: i-UI etyebileyo, enokusebenzisana inokwenzeka ngokupheleleyo nge-HTML kunye ne-CSS yodwa. Bahlala beveza izixhobo zabo ngokusebenzisa @layer izibhengezo, ukuze ukwazi ukujonga kunye neendlela zokukhetha ezihambelana nenkqubo yakho yoyilo.

Ukujonga phambili, iqonga le-CSS sele lisebenza kwiindlela ezimbini ezibalulekileyo zophuhlisoEyokuqala “yiza nezinto zakho,” apho endaweni yokuthembela kumaqhosha kunye neemaki ezenziwe sisikhangeli, uya kukwazi ukufaka ezakho. <a> kwaye <button> uphawu, ngelixa lisazuza kwi-scroll logic esisiseko.

Oku kuya kuvula ithuba lokulawula okunophawu, okunesitayile esityebileyo okwakhiwe ngeenkqubo zezixhobo zokusebenza. njengeTailwind, ngelixa ugcina intsingiselo kunye nokuziphatha kulawulwa yiqonga. Ubuya kuyihombisa i-UI kodwa uvumele isikhangeli sihlale singqondo yomsebenzi.

Indawo yesibini enkulu kukuskrola okujikelezayo okanye okungapheliyo. Ii-carousels ezininzi namhlanje "zijikeleza" xa ufika esiphelweni, zibuyela kwislayidi yokuqala ngaphandle kokuphazamiseka. Ukusebenzisa oku ngendlela ecocekileyo kunzima, kudla ngokubandakanya umxholo ophindwe kabini okanye i-logic enzima. Inkxaso yenqanaba leqonga lokuskrola nge-cyclic iya kuvumela iibrowsers ukuba ziphathe indlela yokuziphatha ejikelezayo ngobuchule nangobuchule.

Njengoko ezi mpawu zivuthwa kwaye zisasazeka ngaphaya kweChrome ziye kwezinye iinjini, umsantsa phakathi koko kunokwenziwa yi-"native CSS carousel" kunye noko kunikezelwa ziilayibrari zeJavaScript ezinzima uya kuqhubeka uncipha, okwenza iindlela ezingenaskripthi zibe yindawo yokuqala emiselweyo endaweni yovavanyo lwecala elingasentla.

Lilonke, i-CSS yanamhlanje ikunika zonke izizathu zokucinga ngokutsha ngendlela owakha ngayo ii-carouselsUkuqala ngoyilo olulula lokuskrola-snap, ubeke amaqhosha ovavanyo kunye neemaki apho zixhaswa khona, kunye neendlela ezilungileyo zokufikeleleka kuyo yonke indawo, unganikezela ngezilayidi eziphendulayo, ezigudileyo, neziqinileyo ngaphandle kokufikelela kwi-JS. Kwiiprojekthi ezininzi, oko kuthetha amaphepha akhawulezayo, ikhowudi encinci ekufuneka igcinwe, kunye namava aqinileyo kumsebenzisi ngamnye.