Izilayida eziyi-19 noma ama-carousels CSS ne-HTML kuwebhusayithi yakho

Ukuba amawebhusayithi athatha bonke ububanzi besikriniSithole ukuthi izinto ezithile zingahlanganiswa ezingasiza ukubonisa isampula yonke yemikhiqizo ezothengiswa noma uhambo esingahle silunikeze ehlobo. Ama-carousel noma ama-slider angenye yalezi zinto zewebhu ezisivumela ukuthi sibonise imikhiqizo yethu ngendlela edonsa amehlo kakhulu.

I-Los Izilayida zamahhala, ama-scroller noma ama-carousels ku-CSS ozoyithola ngezansi, zenzele umlando omuhle wazo zonke izinhlobo zezinhloso emsebenzini esizokhombisa iklayenti ngaphambi kokuba zamukele isabelomali sethu. Iqoqo lezilayida ku-HTML naku-CSS elinokuncane kweJavaScript kuzo zombili izakhiwo eziqondile nezime mpo. Masikwenze ukuze ukwazi ukufinyelela ikhodi ukuyisebenzisa ngokushesha.

Ama-carousel avundlile

Le carousel iqukethe i- izithombe ezinhle ezibabazekayo sengathi sidonsa ikhethini, ukuhlehlisa nje izithombe nezithonjana zamaphrofayili esizozisungula kulesi silayida. I-carousel ephelele yobufakazi obuvela kubasebenzisi abaneliseke kakhulu ngemikhiqizo esiyithengisa kuwebhu.

I-athikili ehlobene:

Izilayida ezingama-27 ze-HTML ne-CSS zokunikeza iwebhusayithi yakho ukuthinta okukhethekile

I-carousel engapheli esabelayo

Lesi silayida njengokukhangisa okungabonakala kwesinye isikhathi ezinkundleni zebhola ezinhlangothini futhi kukhombisa izikhangiso ezahlukahlukene ezihamba ziye phezulu. Ilungele amakhasi okufika adinga ukukhombisa abalingani bomkhiqizo nezinye izinhlobo zama-logo.

React Carousel

Lo mqulu ivelele iReact.js yayo. esizibophezela ekuboniseni izithombe ngosayizi olinganiselayo njengoba sisuka kwesinye isithombe siye kwesinye ngokugqwayiza okuqhubekayo. Kusenokuncane ongakusho ngale CSS elula, kepha kube nomphumela omuhle uma sazi ukuthi singayibeka kanjani kahle kuwebhu.

Isilayida se-Smooth 3D

Ihlanganiswe nge-HTML, CSS neJavaScript, le carousel ye-3D ivelela ukushelela kwayo futhi izithombe ezishayayo ezinomphumela omuhle wokubuka. Ngochungechunge lwezinto ezikhomba ikhadi ngalinye, umsebenzi kanye ne-carousel ebamba iso ukuyifaka kuwebhusayithi yakho.

I-athikili ehlobene:

Ama-Slider nama-Scroller angama-46

I-carousel engenamkhawulo ezenzakalelayo

Isilayida, njengoba kuxwayisa igama laso, sivezwa ngokuzenzakalela ngaphandle kokuthi umsebenzisi ahlanganyele akunasikhathi naye. Izithombe ezahlukahlukene ezakha le carousel ebabazekayo zivela ngenxa yenguquko lapho iphela khona ngomlingo.

Hambisa phezulu Carousel

Ngento yokuhambisa phezulu lokhu isilayida sihamba ukusuka kwesobunxele iye kwesokudla, noma okuphambene nalokho, njengoba sishiya isikhombi segundane phezu kwaso. Ushintsho olubushelelezi lokuhamba phakathi kwezithombe ezahlukahlukene ezingabhala lesi slider sesithombe.

Iselula Carousel

Futhi ebizwa ngeCarousel Material Design, nangomkhuba wamanje nazo zonke izinhlobo zamakhadi, lapha ungathola enye i-athikili enenombolo enkulu yazo ku-CSS / HTML, iyaziqhelelanisa nokunye ngoba yakhiwa ulimi lokuklama olushicilelwe i-Google. Ungahambisa amakhadi ahlukene ngokucindezela isikhathi eside kumakhadi.

Okuphakelayo kwe-Instagram Carousel

Ungawushayisa umqondo ngemuva kwalesi silayida esivelele ngomucu wezithombe ezingakhuliswa ngokuchofoza kwesinye sazo. Ukugqwayiza okunomphumela omuhle, yize kuqondiswe ngohlobo oluthile lwewebhusayithi. Okuthunyelwe kwe-Instagram kuthathwe ku-slick.js carousel.

I-carousel elula evumelanisiwe

Kuhlobene kakhulu nokwedlule, ikakhulukazi emgqeni wezithombe, noma kunjalo ukuxhumana nesilayida kuhluke kakhulu ngokuyihambisa ngokuthinta kwe-lateral ukusuka kwesobunxele uye kwesokudla futhi okuphambene nalokho. Nakulokhu sine-slick.js eyenza into yayo. Ukufuna umphumela wayo omkhulu.

Ama-carousel avundlile e-3D

Enye yama-carousel athakazelisa kakhulu kulo lonke uhlu esilushicilele. Umelele izilayidi zakho ezivundlile ku-CSS naku-HTML ezihamba kahle kakhulu. Kumele ushiye isikhombisi segundane phezu kwamabhokisi ukuthola imiphumela ehlukile engakhiqizwa ngokuhluka okune.

I-CSS Carousel

Umphumela wokubuka olula futhi omuhle nge uchungechunge lwamakhadi ashintshanayo ngaphambili. Umphumela uku-3D, ngakho-ke ungomunye walabo abashelelayo abakhanga ukunakwa okuningi, ikakhulukazi ngenxa yomphumela omncane wokubuyela emuva okhombisa ubuhlakani engxenyeni yomdali ofanayo.

I-Ambilight Bootstrap Carousel

Isilayida esilula esinomphumela omuhle ongagqame kokuningi. Ingabe enye ye- lezo zilayidi ezilula esivame ukukubheka futhi lokho kunikeza lowo muzwa wokuba munye ngaphandle kokuzijabulisa okukhulu, kepha lokho kuwufeza ngokuphelele umsebenzi wawo.

Ithimba leCarousel

Uma ufuna ukwethula iqembu lokuhlela onalo kubhulogi, lesi slider siphelele endimeni yaso. Kuhle kufana nokwedlule ukuthi kulula kangakanani. Kugqame ukusetshenziswa kwedayimane ukufaka isithombe ngasinye seqembu. Inokudlala okuzenzakalelayo.

I-Carousel Cube

Isilayida esivelela ukuba yicube lapho ubuso nobuso bungesinye sezithombe noma izithombe esifuna ukuzibonisa kuwebhusayithi. Kumele uchofoze kulowo nalowo kubo ukuwahambisa bese uthola ukuthi yikuphi okuqukethwe okukulindele.

Izinkinobho zomcibisholo weCarousel

Isilayida lapho ukuxhumana kudlula khona usebenzisa okhiye bomcibisholo. Ilula ngaphandle kokubukwa okuningi okuya ngqo kolunye uhlobo lokuxhumana, okubonakala kusuka eminyakeni edlule. Ukusetshenziswa okuthile.

Ama-carousels aqondile

Isilayida esinomphumela omuhle wokubuka wokuthi idlala ngokuzenzakalela ngokugqwayiza okuqondile okuqondile lokho kuphawuleka ngamakhadi ayo anamakhona ayindilinga. Okwamanje kakhulu futhi okunye kwalokhu okuzivelelayo kusuka kulo lonke lolu hlu.

I-CSS Carousel emsulwa

Le carousel ivelele ngokuba ne- imenyu eseceleni lapho singasuka khona ngokuchofoza kukho konke okukhethwa kukho. Imininingwane ivela ngomphumela obuyiselwe kahle ngaphandle kokuningi okushiwo.

I-carousel eqondile isabela

Okufanayo ne- eyedlule ngokuma kwayo, yize lesi silayida sikwazi ukuthatha ububanzi bekhasi lonke ukukhombisa izithombe zethebhu ngalinye laso. Kuyathakazelisa ifomethi yayo enkulu nokusetshenziswa kwezinguquko ze-CSS ukuslayida phakathi kwamaslayidi.

I-3D Split Carousel

Umphumela omuhle wokubuka ngephethini yezilayida ezungeza nge-3D nge ukugqwayiza okugqame kakhulu. Ungakhetha enye yezinketho kusuka kumenyu yohlangothi lwesobunxele ngamachashazi ngakunye kwazo. Enye yezinto ezinhle kakhulu ohlwini lokuthi idaleke kanjani.