27 HTML iyo CSS slider si ay u siiyaan shabakadaada taabashadaas gaarka ah

Koobka Cupcake

Waxaan sii wadaynaa wareegga CSS iyo HTML code ee laga hirgelin karo degelkeenna si loo siiyo taabashadaas gaarka ah ee lagu kala soocayo inta kale. Thanks to + c xakamaynta oo lagu daray + v xakameynta aan awoodno ku hayso koodhkeena gacanta oo diyaarin doona webka in lagu daabaco horumarka ka dib maalmo ama usbuucyo tijaabo ah.

Hadda waa waqtigii 27 slider ee HTML iyo CSS taas oo noo oggolaan doonta inaan ku diyaarinno meeshaas oo sida caadiga ah aan ku dhexgalno waxyaabo badan oo ku jira dhowr pixels laba jibbaaran. Dhajiyeyaashaani waxay u dhexeeyaan kaarka, isbarbardhig, shaashad buuxda, jawaab celin ah iyo kan ugu fudud, laakiin isla markaa sidoo kale aad u qurux badan. Waxaan la soconeynaa 27 sliders oo aan cidna uga hari doonin, gaar ahaan macaamilka ama isticmaalaha soo maraya boggaaga si aad u aqriso waxyaabaha, u iibsato shey ama aad si fudud u isticmaasho isbarbardhiga isbarbardhiga si aad uhesho sawir kahor iyo kadib.

Shaashadda kaararka

dusha saaran

Isbadal aad u macquul ah oo ku saabsan HTML iyo CSS oo wax ka qabta qaado kaararka taxanaha ah ee boggaaga kuwaas oo loo kala qaado midba midka kale animation leh qaab weyn. Xaqiiqdii waa animation iyo gradient asalka ah oo siinaya taabashadan khiyaamadan HTML iyo CSS code kaas oo sidoo kale u taagan xoogaa JavaScript ah. Elegant waa ereyga lagu muujiyo sawirkan tayada leh.

Kaarka macluumaadka

Iskuduwaha macluumaadka

Tilmaamahan kaarka macluumaadka ah sidoo kale waa koodh HTML, CSS iyo JavaScript. Waxay ku saabsan tahay taxane ah oo kaararka taas oo aan soo jiidanayn dareen badan animation-ka, inkasta oo fudeydkeedu yahay qiimaha ugu weyn. Slider kale oo laga fiirsado liiskan.

Sawirka isbarbardhiga

Isbarbardhiga isbarbardhiga

Wareejiyahaani waa Faa'iido weyn waana hubaal inaad ku aragtay degello fara badan oo sawirro ka hor iyo ka dib la barbar dhigayo bar taagan oo si siman u soo boodaya. Waa caawimaad weyn isbarbar dhigyada, sidaa darteed waxaan kadhignay mid kamid ah waxyaabaha lagama maarmaanka ah ee kujira liistadaas.

Isbarbardhiga isbarbardhiga ee aan lahayn JavaScript

Isbarbardhiga isbarbardhiga ee aan lahayn JS

Tayada weyn ee slider-kaani waa taas yimaado iyada oo aan JavaScript, sidaa darteed waxaad u baahan doontaa oo keliya inaad hirgeliso CSS iyo HTML lambarka boggaaga si aad uhesho isbarbardhig kale. Waxaad u baahan doontaa inaad isticmaasho sanduuqa madow ee hoose ee sawirka si aad uga rogto dhinac dhinac dhinaca kale si aad u aragto isbarbardhiga sawirka. Maaha mid dareen leh sida kii hore, laakiin aad ayuu faa'iido u leeyahay la'aanteed JavaScript.

Saddex-lakab isbarbardhigga sawirka sawir

Saddex slider lakabka

Magaceeda ayaa sheegta dhamaantood, sawir qaade taas wuxuu kuu ogolaanayaa inaad isbarbar dhig ku sameyso seddex markiiba. Tusaalaha la bixiyay waa mid lagu arko madaxa astaanta, mid kale si loo muujiyo muruqyada iyo slider kale si loo arko lafaha. Waxay u adeegsataa HTML, CSS iyo JavaScript hawlgalkeeda.

Vanilla JS Sawirka Sawirka

Isbarbardhiga isbarbardhiga

Sawir kale oo isbarbardhig ah leh badhan weyn kaas oo lagu sawirayo sawirka dhinac ilaa dhinaca kale. Minimalist, oo leh JavaScript yar iyo muuqaal muuqaal dhammaystiran. Mid ka mid ah kuwa ugu xiisaha badan ee isbarbar dhiga sawirada.

Kala jajab shaashad muuqaal ahaan

Diagonal isbarbardhiga slider

Este Sawirka isbarbardhiga Waxaa abuuray Envato Tuts waxayna leedahay kala soocid in slider-ka loo qaabeeyey si jaantus ah si uu u keeno noocyo kale oo dareen ah marka la isbarbar dhigayo laba sawir. Waxay u isticmaashaa JavaScript, CSS iyo HTML inay noqdaan isbarbardhig tayo sare leh.

Wareegtada shaashadda oo buuxa

Kala-guurka ku-meelgaarka

Waxaan gaarnay qeybta shaashadda buuxda si aan ula kulanno Kala-guurka Slider oo lagu garto kala-guur waxaa fuliyay animation saameyn weyn leh. Haddii aad qorsheyneyso inaad ku muujiso sawirrada shaashad buuxda iyo inaad si taxaddar leh u dhaafayso, ku qor lambarka JavaScript, CSS iyo HTML.

Slider Horizontal la parallax

Parallax slider

Wixii ah tageerayaasha parallax waxay saameyn ku yeeshaan isbadalkan leh Swiper.js, HTML iyo CSS. Marka laga reebo inaan awood u leexan karno labada badhan ee ku yaal dhinac kasta, dhinaca midig waxaan ku leenahay dhammaan sawirada carousel dhameystiran. Muuqaal muuqaal oo kala duwan oo tayo sare leh oo aan ka tagi doonin qof kasta oo booqda degelkeenna dan la'aan.

Sifeeyaha 3D muuqaal jilicsan

3D aragti slider siman

Slider A jawaabi in raac dhaqdhaqaaqa tilmaamaha jiir. Waxay awood u leedahay inay keento saameyn aragti weyn oo u horseedi karta dareemo is khilaafsan booqdaha. Haddii aad taqaanid sida habboon ee aad ugu adeegsan karto waxaad ku siin kartaa taabashadaas asalka ah iyo tan qarsoon websaydhkayaga. JavaScript, CSS iyo HTML koodh kama maqna.

Geesi sawir-qaade buuxa

Sawirka geesiga ee sawirka

Sawir geesiyaal shaashad buuxda leh oo HTML ah, CSS iyo JavaScript. Hayso a soo kabashada saameyn animation kasta taasi waxay siineysaa taas guud ahaanna waxaan wajaheynaa shaashad shaashad buuxda leh oo tayo leh sida liiska intiisa kale.

VELO.JS slider leh xuduudo

Cidhifyada xijaabka ah

Mid ka mid ah waxyaabaha muhiimka ah sida isbadal shaashad buuxda leh oo si animation kala guur ah oo fudud si fudud. Waxaan kugula talineynaa inaad u tagto si aad u aragto adigoo shaqeynaya si aad u bilowdo inaad ka fikirto sidii aad uga hirgelin lahayd shabakada. Adeegso saamaynta xawaaraha Si loo hagaajiyo animation-kaas oo adeegsanaya badhannada fallaarta, guji marinka iyo xitaa wareejinta, Si fudud u dhammaystiran.

Jawaab-celin CSS jawaab-celin toos ah leh thumbnails

Jawaabta jawaabta CSS

Waxaan u dhaqaaqeynaa gawaarida Ka jawaab celinta CSS ee mobilada tayo weyn sida tan oo kale. Waxaad ku yeelan doontaa taxane sawirro ah taxane ah dhinaca midig oo markii la riixo bilaabi doona animation dhicitaan toosan. Saameyn weyn oo adeegsaneysa CSS kaliya si looga tago slider kan ugu fiican liiskan.

Sanduuqa siibbada sawirka

Sawirka Flexbox

Kuwa kale Sawirka jawaabta leh ee jawaabta leh ee lagu sameeyay JavaScript iyo in ay ka fududdahay in si qurux badan loo xarragoodo. Gaaban, fudud iyo mid yar oo aan tan ka badnayn. Waxay ku leedahay booskeeda liistada ku dhajiyeyaasha Flexbox.

Motion blur oo leh miirayaasha SVG

Isbeddelka dhaqdhaqaaqa gawaarida

Tijaabo u ekeysiinaysa saameynta dhaqdhaqaaq la'aan marwalba oo isbadal dhaco waa la hawlgeliyaa. Waxay u adeegsaneysaa SVG Gaussian blur filter iyo qaar ka mid ah furayaasha animation CSS. Nambarka loo adeegsaday JavaScript waxaa loogu talagalay kaliya tusaalaha la siiyay iyo shaqeynta slider.

Sawir qaade

Sawir qaade

Slider An animation jawaabta leh JavaScript, HTML iyo CSS. Waxaan leenahay fallaadho dhinaca midig oo noo oggolaanaya inaan dhex marno sawirrada asal ahaan ka soo jeeda animation sharaf leh oo kooban. Saameyn weyn ayaa lagu gaaraa mid kasta oo ka mid ah bogagga iskiis u istaaga. Aad u socda animations.

Sawirqaade sawir leh qaababka SVG

Iskuday kaliya CSS SVG

Mid kale oo ka mid ah tijaabooyinkaas oo isku dayaya inay qaado qaababka svg si loo abuuro qaar ka mid ah sawirrada maaskaro ee loo yaqaan 'CSS slider'. Waxay soo saartaa saameyn ba'an oo aad u xun oo leh dhammaystir weyn. Mid kale oo ka mid ah kuwa isdabajooga ah si ay ugu kiciyaan dareenka wanaagsan booqdaha degelkeena.

Wareegtada lakabka fudud

Slider lakab

Slider leh mid ka badan animation kala duwan Taasi waxay bixisaa saameynta mawjadaha markasta oo aan gujino astaanta si aan u sifeyno sawir cusub. Lagu sameeyay HTML, CSS iyo JavaScript waxay noqoneysaa sawir qaade kale.

Saafi daahir CSS

Saafi daahir CSS

Mid kale oo ka mid ah taraafikada ugu fudud oo nadiif ah CSS. Mid ka mid ah faa'iidooyinkeeda in lagu rido hoose bidix taxane ah dhibco Taasi waxay u adeegi doontaa sida badhannada si loo gaaro mid kasta oo ka mid ah sawirrada ina hor mari doona iyada oo aan wax animation gaar ah lahayn.

Cupcakes kaliya CSS slider

Koob koob ah

El slider ugu macaan liiska iyo in kaliya ay ku jirto CSS iyo HTML. Waa mid ka mid ah kuwa ugu khaaska ah liiska oo dhan inuu ku yeesho dhinaca midig kala duwanaanshaha kaladuwan ee keega. Dhagsii mid ka mid ah iyo koob keega ayaa u muuqda animation cajiib ah oo ku dhammaada saameyn weyn oo soo kabasho ah. Mid ka mid ah kuwa ugu fiican shaki la'aan.

Saamaynta animation Slider

Siidaaye Animation

Mid ka mid ah jilayaasha ugu quruxda badan ee animation iyo waxa waxay maamushaa inay naga yaabiso isbedelka ugu horeeya. Laga soo bilaabo daqiiqadda ugu horreysa ee animation-ka soo baxo, HTML, CSS iyo lambarka JavaScript ayaa naga yaabinaya. Mid kale oo ugu fiican taabashada ugu yar ee ay siiso.

Jeex jeex

Xawaaraha slider

Un wareejinta wareejinta ee adeegsata fasal ku dar fudud taasna waxaa lagu gartaa animations aad u siman si ay u noqdaan mid ka mid ah kuwa ugu cadcad liiskan. Haddii aad rabto inaad ku kala soocdo nooca mobilada ee shabakadda, waa mid ka mid ah waxyaabaha lagama maarmaanka ah. Aragti weyn.

Parallax New York Slider

slider new york

Mid ka mid ah faa'iidooyinka ugu weyn ee tan parallax slider ee CSS waa in wax badan laga beddeli karo. Tani waxay ka dhigan tahay inaad beddeli karto font, cabirkiisa, midabkiisa iyo xawaaraha animation-ka. Xarafka ugu horreeya ee magaalo kasta oo ku yaal xarig cusub oo JavaScript ah ayaa ka muuqda isbadal cusub. Mid kale oo ka mid ah taraafikada qiimaha leh ee qoraalkan.

Soo bixitaanka

Soo bixitaanka

Iyadoo a Habka ugu yar ee loo yaqaan 'slider' ayaa lagu soo bandhigayaa taas oo qayb kasta oo sawirka ka mid ah ay kula soo baxeyso isbarbar dhig kasta. Hal abuur badan oo ka duwan waxa ka muuqda liiska sliders oo taagan meesheeda.

Slider leh saameyn fiiqan

Xaraashka slider

Un saamayn weyn slider shaashad buuxda leh midabyo fidsan si loo helo dhammaan casiirkeeda. JavaScript, HTML iyo CSS oo loogu talagalay boggeeye kale oo leh saameyn soo jiidasho leh.

Slider leh muuqaalka muuqaalka

Slider hore

Slider GSAP oo leh horudhac ah bogagga soo socda taas ayaa loo soo bandhigi doonaa isticmaalaha. Ku habboon ku habboonaynta moodel ama degel websaydh ah.

Kala wareejinta Sliders

Kala guurka Slider

Waxaan liiska ku dhamaynaynaa a slider tayo sare leh oo leh saameyn bambooyin ah iyo animations taxane ah oo taabashadaas gaarka ah kahelaya degelkeena. Saamaynta parallax waa la hawl gelin karaa.

Ha moogaan tan liis kale oo CSS ah badhamada.


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.

      Santiago dijo

    Aad buu u fiican yahay qoraalkan, aad baad ugu mahadsan tahay wadaagida. Si toos ah u aadaya kuwa ugu cadcad.
    Salaan saaxiib.