19 sliders ama carousels CSS iyo HTML boggaaga

xayeysiis bilaash ah

By leh boggaga internetka ee qaada dhammaan ballaca shaashadda, Waxaan ogaanay in walxo gaar ah la isku dari karo kuwaas oo gacan ka geysan kara muujinta muunad dhan oo ah alaab iib ah ama safarro aan ku bixin karno xagaaga. Carousels ama sliders waa mid ka mid ah walxaha shabakadda ee noo oggolaanaya inaan ku tusno alaabteenna qaab indho qabasho leh.

ka Gawaarida bilaashka ah, kuwa wax lagu gado ama kuwa wax lagu duubo ee CSS in aad hoosta ka heli doonto, ka sameyso liis wanaagsan dhammaan noocyada ujeeddooyinka shaqada ee aan tusno macmiilka ka hor inta aysan aqbalin miisaaniyaddayada. Waa ururinta isjiidjiidyada HTML iyo CSS oo xoogaa JavaScript ah oo isugu jira qaab qotodheer iyo mid toosanba. Aynu yeelno si aad u heli kartid koodhka si dhaqso ah u fuliya.

Carousels dusha sare

Tixgelinta

Dhaladaani waxay ka kooban tahay a animation dhalaalaya quruxsan sida haddii aan daawaneyno daah, si aan ugu soo dhoweynno sawirrada iyo astaamaha astaamaha aan ku dhisi doonno boggan. Waa carosel qumman oo loogu talagalay markhaatifurka isticmaalayaasha kuwaas oo aad ugu qanacsan alaabada aan ku iibinno shabakadda.

Koobka Cupcake
Maqaalka laxiriira:
27 HTML iyo CSS slider si ay u siiyaan shabakadaada taabashadaas gaarka ah

Carousel aan dhammaad lahayn

Is-dhalasho

Wareejiyahaani waa sida xayeysiinta oo mararka qaar la arki karo goobaha kubbadda cagta ee dhinacyada oo muujinaya xayeysiisyo kala duwan oo si siman u rogrogmaya. Waxay ku habboon tahay degitaanka bogagga u baahan inay muujiyaan la-hawlgalayaasha astaanta iyo noocyada kale ee astaamaha.

Ka fal celi Carousel

3D carousel

Duubkan u taagan yahay React.js. taasi waxay isku dhiibaysaa inay muujiso sawirro cabir ahaan u dhigma marka aan hal sawir uga gudubno mid kale animation joogto ah Wax yar oo dheeraad ah oo laga sheegayo CSS-kan fudud ee fudud, laakiin saameyn weyn leh haddii aan ogaanno sida ugu habboon ee loo dhigo webka.

Slider 3D jilicsan

3D Carousel

Ka kooban HTML, CSS iyo JavaScript, qalfoofka 3D-kan wuxuu u taagan yahay jilicsanaantiisa iyo animation bouncing leh saameyn muuqaal oo weyn. Iyada oo leh walxo taxane ah oo tilmaamaya kaar kasta, shaqo iyo indho-sarcaad indho-qabad leh si loogu daro websaydhkaaga.

Maqaalka laxiriira:
46 Javascript Sliders iyo Scrollers

Carousel otomaatig ah oo aan dhammaad lahayn

Carousel aan xad lahayn

Dhageysi kaas oo, sida magiciisu ka digayo, si otomaatig ah loo soo bandhigo iyada oo aan isticmaaluhu la falgalin waqti aan la joogin Sawirrada kala duwan ee ka kooban carouselkan cajiibka ah ayaa u muuqda sababo la xiriira kala-guurka oo ay sixir ahaan u baaba'ayso.

Horous Carousel

Hover Carousel

Iyada oo walxaha ku xiraya tan slider wuxuu u dhaqaaqaa bidix ilaa midig, ama taa caksigeeda, maadaama aan uga harin tilmaamaha jiirka dushiisa. Kala guur habsami leh oo udhaxeeya inta udhaxeysa sawirada kala duwan ee soo ururin kara sawirkan.

Mobile Carousel

Gawaarida wareega

Sidoo kale loo yaqaan Carousel Material Design, iyo isbeddelka hadda socda oo leh dhammaan noocyada kaararka, halkan waxaad ka heli kartaa maqaal kale oo tiro badan oo ka mid ahi ku jiraan CSS / HTML, ayaa iska fogeeya inta kale maxaa yeelay waxay ka kooban tahay luuqadda naqshadeynta ee ay daabacday Google. Waad dhaqaajin kartaa kaararka kala duwan adoo waqti dheer ku riixaya kaararka.

Quudinta Instagram Carousel

Instagram

Waad burburin kartaa fikradda ka dambeysa boggan soo ifbaxaya iyadoo la adeegsanayo astaamo sawirro lagu weyneyn karo adigoo gujinaya midkood. Animation saameyn weyn leh, in kastoo loogu talagalay nooc gaar ah oo degel ah. Qoraalada Instagram-ka ee loo qaaday slick.js carousel.

Carousel iskudhafan oo fudud

Carousel fudud

Waxay wax badan ku leedahay midkii hore, gaar ahaan qeybta sawirada, in kastoo isdhexgalka leh slider waa mid aad u kala duwan adoo ugu dhaqaaqaya tilmaam dhinaca dambe ah bidix ilaa midig iyo dhinaca kale. Mar labaad waxaan leenahay slick.js waxkeeda. Isagoo ku garaacaya saameynteeda weyn.

3D carousels jiif ah

3D Horizontal Carousel

Mid ka mid ah waxyaabaha ugu xiisaha badan liiska oo dhan ee aan daabacno. U taagan yahay iskudhafyadaada jiifka ah ee CSS iyo HTML in si fantastik ah u socdaan. Kaliya waa inaad ka tagtaa tilmaamaha jiirka sanduuqyada si aad u hesho raadadka kala duwan ee lagu soo saari karo afarta nooc.

CSS Carousel

3D CSS

Saamayn muuqaal fudud oo weyn oo leh a taxane kaararka ah oo kolba dhinac u wareegaya dhinaca hore. Saameyntu waxay ku jirtaa 3D, sidaas darteed waa mid ka mid ah kuwa soojiidayaasha ah ee soo jiito fiiro badan, gaar ahaan sababtoo ah saameynta ugu yar ee dib-u-celinta ee muujineysa hanadka qaybta abuure isku mid ah

Ambilight Bootstrap Carousel

Bootstrap Carousel

Barxad fudud oo saameyn weyn leh oo aan wax badan u muuqan. Ka mid yahay kuwa isjiidka fudud taas badiyaa waan raadineynaa taasna waxay siineysaa dareenkaas mid ahaanshaha iyada oo aan faan badan, laakiin taasi waxay si buuxda u buuxisaa shaqadeeda.

Kooxda Carousel

Kooxda Carousel

Haddii aad rabto inaad soo bandhigto kooxda tifaftirka ee aad ku leedahay bogga, slider-kan ayaa kufiican doorkiisa. Wanaagsan oo la mid ah kii hore sida ay u fududahay. Waxay u taagan tahay adeegsiga dheeman si loo xareeyo mid kasta oo ka mid ah sawirrada kooxda. Waxay leedahay loo maqli toos ah.

Carousel Cube

3d cube

Slider oo u taagan inuu ahaado kubeel uu ku jiro mid kasta oo ka mid ah wejiyada waa mid ka mid ah sawirrada ama sawirro aan dooneyno inaan ku soo bandhigno degel. Kaliya waa inaad gujisaa mid kasta oo ka mid ah si aad u rogto oo aad u ogaato waxa ku khuseeya adiga.

Furayaasha fallaaraha Carousel

Furayaasha CSS

Slider ah kaas oo isdhexgalka maraya adoo adeegsanaya furayaasha fallaarta. Fudud oo aan lahayn faan badan oo si toos ah ugu socota nooc kale oo isdhexgal ah, mid u muuqda sanado ka hor. Isticmaal gaar ah.

Carousels taagan

Carousel taagan

Slider leh saameyn muuqaal oo weyn taas wuxuu si toos ah ugu ciyaaraa animation toosan oo toos ah taas oo u taagan kaararka ay la geesaha wareegsan. Mid aad u xasaasi ah oo ka mid ah kuwa iskiis ugu taagan liiskan oo dhan.

Saafi CSS Carousel

Caare

Dhaladaani waxay u taagan tahay yeelasho menu-ka aan ka bixi karno adigoo gujinaya mid kasta oo ka mid ah xulashadeeda. Macluumaadka ayaa u muuqda mid leh natiijo wax ku ool ah oo soo kabasho ah iyada oo aan wax badan laga badinin wixii la sheegay.

Carousel taagan ayaa falcelinaya

Caare

Lamid ah hore ee ay verticality, inkasta oo slider-kani awood u leeyahay inuu qaado dhamaan balaca bogga si uu u muujiyo sawirada mid kasta oo ka mid ah tabkiisa. Xiiseyneysa qaabkeeda weyn iyo isticmaalka kala-guurka CSS si loogu dhex-jiido bogagga dhexdooda.

3D Kala jab Carousel

Split

Saamayn weyn oo muuqaal ah oo leh qaab jilayaal ku wareegaya 3D leh animation aad u layaab leh. Mid kasta oo ka mid ah xulashooyinka waxaa laga soo xulan karaa dhinaca bidix oo leh dhibco mid kasta oo ka mid ah. Mid ka mid ah kuwa ugu fiican liiska sida hal-abuurnimadu u tahay.


4 faallooyin, ka tag taada

Ka tag faalladaada

cinwaanka email aan la daabacin doonaa. Beeraha loo baahan yahay waxaa lagu calaamadeeyay la *

*

*

  1. Masuul ka ah xogta: Miguel Ángel Gatón
  2. Ujeedada xogta: Xakamaynta SPAM, maaraynta faallooyinka.
  3. Sharci: Oggolaanshahaaga
  4. Isgaarsiinta xogta: Xogta looma gudbin doono dhinacyada saddexaad marka laga reebo waajibaadka sharciga ah.
  5. Kaydinta xogta: Macluumaadka ay martigelisay Shabakadaha Occentus (EU)
  6. Xuquuqda: Waqti kasta oo aad xadidi karto, soo ceshan karto oo tirtiri karto macluumaadkaaga.

  1.   Mayra orellana dijo

    Subax wanaagsan, waxaan rabaa inaan ku isticmaalo Pure CSS Carousel goobtayda, laakiin waxay ku taalaa hal boos oo keliya, sidee baan uga dhigi karaa inay ahaato meesha aan doonayo boggeyga dhexdiisa.

    Fadlan ku caawi tan tan Aad baad u mahadsan tahay

  2.   Xavier Canizares dijo

    Sideen uga dhigi karaa Hover Carousel inuu sifiican ugu muujiyo nooca mobilada degelkeyga?

  3.   Gabriel dijo

    Wanaagsan, maxay shaqo fiican qabteen!

  4.   Tony Zambrano dijo

    Waad salaaman tihiin, guryaha gawaarida waa kuwo aad u qabow, laakiin isla marka aan soo galiyo, ayaan nuqul ka sameeyaa oo dhajiyaa, javascriptp ayaa i siiya qalad sababta oo ah var max = $ ('# c> li) .lenght…. Maxaad soo jeedinaysaa