I-19 isilayida okanye i-carousels CSS kunye ne-HTML kwiwebhusayithi yakho

izilayidi zasimahla

Ukuba iiwebhusayithi ezithatha bonke ububanzi besikriniSifumanise ukuba izinto ezithile zinokudityaniswa ezinokuthi zingene ngokufanelekileyo ukubonisa isampulu yonke yeemveliso ezithengiswayo okanye iihambo esinokuzinikela ehlotyeni. Iicarousels okanye izilayida zezinye zezinto zewebhu ezisivumela ukuba sibonise iimveliso zethu ngendlela ebambekayo.

Los Izilayida zasimahla, iscroller okanye iicarousels kwiCSS ukuba uyakufumana apha ngezantsi, zenza ireferensi elungileyo yazo zonke iintlobo zeenjongo emsebenzini esizakubonisa umthengi phambi kokuba alwamkele uhlahlo-lwabiwo mali. Yingqokelela yezilayida kwi-HTML kunye ne-CSS enesuntswana leJavaScript kuzo zombini ifomathi ethe tye kwaye emi nkqo. Masenze ukuze ufikelele kwikhowudi ukuze uyenze ngokukhawuleza.

Carousels ethe tye

noluphendulayo

Le carousel iqulathe oopopayi abahle ngokungathi besizobela ikhethini, ukusondeza nje iifoto kunye neempawu zeeprofayili esiza kuziseka kwesi silayida. I-carousel egqibeleleyo yobungqina obuvela kubasebenzisi abonelisekileyo kakhulu ziimveliso esizithengisayo kwiwebhu.

Inqaku elidibeneyo:
Iisilayidi ezingama-27 ze-HTML kunye ne-CSS ukunika iwebhusayithi yakho olo chukumiso lukhethekileyo

Ukuphendula i-carousel engenasiphelo

Ukuzenzela ngokwakho

Esi sisilayidi njengentengiso enokuthi ngamanye amaxesha ibonakale kumabala ebhola ekhatywayo emacaleni kwaye abonisa iintengiso ezahlukeneyo ezihamba ngokuthe tye. Kukulungele ukufika kwamaphepha ekufuneka abonise amaqabane ophawu kunye nezinye iintlobo zeelogo.

Phendula iCarousel

I-carousel ye-3D

Lo msongo ime ngeReact yayo. ezibolekisa ekuboniseni imifanekiso ngobukhulu ngokulingana njengoko sisuka kumfanekiso omnye sisiya komnye kwimifanekiso eshukumayo eqhubekayo. Akukho nto ingako sinokuyithetha ngale CSS ilula, kodwa sisiphumo esihle ukuba siyayazi ukuba siyibeka njani ngokufanelekileyo kwiwebhu.

Isilayidi se-3D esigudileyo

I-3D Carousel

Idityaniswe nge-HTML, i-CSS kunye neJavaScript, le carousel ye-3D ibonakala ngokuguda kwayo kunye oopopayi abangqwabayo abanesiphumo esihle sokubonakalayo. Ngothotho lwezinto ezichonga ikhadi ngalinye, umsebenzi kunye ne-carousel yokutsala amehlo ukuyifaka kwiwebhusayithi yakho.

Inqaku elidibeneyo:
Izilayidi zeJavascript ezingama-46 kunye nabaScroller

I-carousel engenasiphelo ngokuzenzekelayo

Carousel engenasiphelo

Isilayida esithi, njengoko igama laso lilumkisa, siboniswe ngokuzenzekelayo ngaphandle komsebenzisi kufuneka asebenzisane akukho xesha naye. Imifanekiso eyahlukeneyo eyenza le carousel ibonakalayo ivela ngenxa yotshintsho apho iphela ngomlingo.

Ukuhamba ngeCarousel

Hover Carousel

Ngento yokuhambisa phezulu oku isilayida sihamba ukusuka ekhohlo ukuya ekunene, okanye ngokuchaseneyo, njengoko sishiya isikhombisi semouse ngaphezulu kwayo. Utshintsho olugudileyo lokuhamba phakathi kweefoto ezahlukeneyo ezinokwenza lo mfanekiso wesilayidi.

Iselfowuni yeCarousel

Carousel yeselfowuni

Kwakhona ebizwa ngokuba yiCarousel Material Design, kunye nentsingiselo yangoku nazo zonke iintlobo zamakhadi, apha unokufumana elinye inqaku elinenani elikhulu labo kwi-CSS / HTML, iyazihlukanisa nabanye ngokwenziwa kolwimi loyilo olupapashwe nguGoogle. Ungahambisa amakhadi ahlukeneyo ngokucinezela ixesha elide kumakhadi.

Ukutya kwe-Instagram Carousel

Instagram

Ungaluphazamisa uluvo olungemva kwesilayidi esiqaqambileyo ngemizobo yemifanekiso enokwandiswa ngokunqakraza kwenye yazo. Oopopayi besiphumo esihle, nangona senzelwe uhlobo oluthile lwewebhusayithi. Izithuba ze-Instagram zisiwe kwi-slick.js carousel.

I-carousel elula ehambelanayo

I-carousel elula

Inokwenza okuninzi kunye neyangaphambili, ngakumbi kwimigca yemifanekiso, nangona Ukusebenzisana nesilayidi kwahluke kakhulu ngokuyihambisa ngakwicala lesandla elisecaleni ukusuka ekhohlo ukuya ekunene nangokuchaseneyo. Kwakhona sine-slick.js esenza into yayo. Ukutsala umphumo wayo omkhulu.

I-3D carousels ethe tyaba

3D oxwesileyo Carousel

Enye yezona carousels zinomdla kulo lonke uluhlu esilupapashayo. Ukuma ngaphandle kwe- izilayida zakho ezithe tyaba kwi-CSS nakwi-HTML ezihamba kakuhle. Kuya kufuneka ushiye isikhombisi semouse ngaphezulu kweebhokisi ukufumana iziphumo ezahlukeneyo ezinokuthi ziveliswe ngeendlela ezine ezahlukeneyo.

I-CSS Carousel

ICSS 3D

Ilula kwaye inkulu imbonakalo ebonakalayo nge uthotho lwamakhadi atshintshanayo ngaphambili. Iziphumo zikwi-3D, ke yenye yezi zityibilikisi ezitsala umdla omkhulu, ngakumbi ngenxa yesiphumo esincinci sesiphambeko esibonisa ubuhlakani kwinxalenye yomdali ofanayo.

I-Ambilight Bootstrap Carousel

I-Bootstrap Carousel

Isilayida esilula esinempembelelo enkulu esingabonakali kakhulu kuninzi. Ngaba yenye ye ezo zityibilika zilula esihlala sijonge kwaye esinika imvakalelo yokuba yinto enye ngaphandle kovuyo olukhulu, kodwa oko kuwufezekisa ngokugqibeleleyo umsebenzi wawo.

Iqela leCarousel

Iqela leCarousel

Ukuba ufuna ukwazisa iqela lokuhlela onalo kwibhlog, isilayida sigqibelele kwindima yaso. Kulungile kufana naleya yangaphambili ngendlela elula ngayo. Kuyacaca ukuba kusetyenziswa iidayimani ukugcina imifanekiso yeqela ngalinye. Inokudlala ngokuzenzekelayo.

ICarousel Cube

3d ityhubhu

Isilayida esime ngaphandle ukuba sityhubhu apho ubuso bobuso bobunye bomfanekiso okanye iifoto esifuna ukuzibonisa kwiwebhusayithi. Kuya kufuneka ucofe nganye nganye ukuhambisa kwaye ufumanise ukuba yeyiphi na into ekulindeleyo.

Izitshixo zeCarousel

Iimpawu zeCSS

Isilayidi apho unxibelelwano luhamba khona usebenzisa izitshixo zotolo. Ilula ngaphandle kwempumelelo enkulu eya ngqo kolunye uhlobo lonxibelelwano, enye ebonakala ngathi yiminyaka edlulileyo. Ukusetyenziswa okuthile.

Carousels nkqo

I-carousel ethe nkqo

Isilayidi esinefuthe lokubonwayo ngokuzenzekelayo udlala oopopayi nkqo ngokuqhubekayo omele amakhadi ayo aneekona ezijikeleziweyo. Okwangoku kunye nenye yezo zinto zizimeleyo zolu luhlu.

I-CSS Carousel ecocekileyo

I-Carousel

Le carousel ime ngokuba ne imenyu esecaleni esinokuya kuyo ukunqakraza kukhetho ngalunye. Ulwazi lubonakala ngesiphumo esiphumeleleyo sokufumana ngaphandle kokungaphezulu koko bekutshiwo.

I-carousel ebonakalayo isabela

I-Carousel

Ifana ne yangaphambili yokuma nkqo kwayo, nangona esi silayida sikwazi ukuthatha ububanzi bephepha lonke ukubonisa imifanekiso yetab nganye. Inomdla kwifomathi yayo enkulu kunye nokusetyenziswa kweenguqu zeCSS kwisilayidi phakathi kwezilayidi.

I-3D yahlula iCarousel

Umehlulelwano

Iziphumo ezibonakalayo ezintle zinepateni yesilayida esijikeleza kwi3D nge oopopayi abaqaqambe kakhulu. Unokukhetha ukhetho ngalunye kwimenyu yecala lasekhohlo ngamachaphaza nganye nganye. Enye yezona zinto zibalaseleyo kuluhlu lwendlela yokuyila.


Umxholo wenqaku uyabambelela kwimigaqo yethu imigaqo yokuziphatha yokuhlela. Ukuxela impazamo cofa apha.

Izimvo ezi-4, shiya ezakho

Shiya uluvo lwakho

Idilesi yakho ye email aziyi kupapashwa. ezidingekayo ziphawulwe *

*

*

  1. Uxanduva lwedatha: UMiguel Ángel Gatón
  2. Injongo yedatha: Ulawulo lwe-SPAM, ulawulo lwezimvo.
  3. Umthetho: Imvume yakho
  4. Unxibelelwano lwedatha: Idatha ayizukuhanjiswa kubantu besithathu ngaphandle koxanduva lomthetho.
  5. Ukugcinwa kweenkcukacha
  6. Amalungelo: Ngalo naliphi na ixesha unganciphisa, uphinde uphinde ucime ulwazi lwakho.

  1.   Mayra orellana sitsho

    Molo, ndifuna ukusebenzisa i-CSS yeCarousel eyiyo kwindawo yam, kodwa ikwindawo enye kuphela, ndingayenza njani ukuba ibekwe kwindawo endifuna kuyo kwiphepha lam.

    Nceda uncede ngale nto Enkosi kakhulu

  2.   Xavier Cañizares sitsho

    Ndingayenza njani iHover Carousel bonise kakuhle kuhlobo lweselfowuni lwewebhusayithi yam?

  3.   UGabriel sitsho

    Ukugqwesa, mhle kangakanani umsebenzi abawenzileyo!

  4.   Tony zambrano sitsho

    Molo, izindlu zenqwelomoya zipholile kakhulu, kodwa nje ukuba ndiyilayishe, ndiyikope kwaye ndiyincamathisele, ijavascrip indinika impazamo ngenxa ye-var max = $ ('# c> li) .lenght…. Ucebisa ntoni