27 sliders HTML u CSS biex jagħtu lill-websajt tiegħek dak il-mess speċjali

Aħna nkomplu b'ċiklu ta 'kodiċi CSS u HTML li jista' jiġi implimentat fuq il-websajt tagħna biex nagħtuh dak il-mess speċjali li bih niddistingwuh mill-bqija. Grazzi għall-kontroll + c flimkien mal-kontroll + v li nistgħu għandna f'idejna kodiċi li se jagħmel il-web lest jiġi ppubblikat fl-iżvilupp wara li jqattgħu ġranet jew ġimgħat fl-ittestjar.

Issa huwa ż-żmien għal 27 sliders f'HTML u CSS li jippermettulna nippreparaw dak l-ispazju li fih normalment nintegraw ħafna kontenut fi ftit pixels kwadri. Dawn is-sliders ivarjaw minn fuq il-karta, komparattiv, full screen, li jirrispondi u l-aktar sempliċi, iżda fl-istess ħin ukoll eleganti ħafna. Aħna sejrin b'27 slider li ma jħallu lil ħadd indifferenti, speċjalment il-klijent jew l-utent li jgħaddi mill-websajt tiegħek biex jaqra l-kontenut, jixtri prodott jew sempliċement juża slider komparattiv biex iqabbel immaġni qabel u wara.

Skrins fuq il-karti

Slider intuwittiv ħafna fl-HTML u CSS li jittratta ħu serje ta 'karti fil-websajt tiegħek li jiġu mgħoddija minn waħda għal oħra b'animazzjoni bi stil kbir. Huwa preċiżament l-animazzjoni u l-gradjent fl-isfond li jagħtu dan il-mess sottili lil dan il-kodiċi HTML u CSS li jispikka wkoll għal ftit JavaScript. Eleganti hija l-kelma li tpinġi din is-slider ta 'kwalità.

Slider tal-karta tal-informazzjoni

Dan is-slider tal-karta tal-informazzjoni huwa wkoll kodiċi f'HTML, CSS u JavaScript. Huwa pjuttost dwar serje ta 'karti dak ma jiġbedx ħafna attenzjoni għall-animazzjoni, għalkemm is-sempliċità tagħha hija l-akbar valur tagħha. Slider ieħor li għandek tikkunsidra minn din il-lista.

Slider tal-immaġni komparattiva

Dan is-slider huwa Ta 'utilità kbira u żgur li rajtha fuq numru kbir ta 'websajts fejn ir-ritratti ta' qabel u wara huma mqabbla ma 'bar vertikali li tiżżerżaq orizzontalment. Hija għajnuna kbira għall-paraguni, allura għamilna waħda mill-affarijiet essenzjali fuq din il-lista ta 'sliders.

Slider komparattiv mingħajr JavaScript

Il-kwalità kbira ta 'dan is-slider hija dik jiġi mingħajr JavaScript, allura jkollok timplimenta biss il-kodiċi CSS u HTML fuq il-websajt tiegħek biex ikollok paragun ieħor. Ikollok tuża l-kaxxa s-sewda fil-qiegħ tal-immaġni biex tiżżerżaqha minn naħa għall-oħra biex tara l-paragun tal-immaġni. Mhux intuwittiv daqs dak ta 'qabel, imma utli ħafna mingħajr JavaScript.

Slider ta 'immaġni komparattiva bi tliet saffi

Ismu jgħid kollox, immaġni li tiżżerżaq dik jippermettilek tqabbel sa tlieta kull darba. L-eżempju mogħti huwa wieħed biex tara r-ras fil-profil, ieħor biex juri l-muskoli u slider ieħor biex jara l-għadam. Huwa juża HTML, CSS u JavaScript għat-tħaddim tiegħu.

Vanilla JS Image Slider

Slider ieħor ta 'immaġni komparattiva b’buttuna kbira li biha tiżżerżaq l-immaġni minn naħa għall-oħra. Minimalista, bi ftit JavaScript u finitura viżwali mill-aqwa. Waħda mill-aktar impressjonanti biex tqabbel immaġini.

Aqsam l-iskrin b'mod djagonali

dan slider tal-immaġni komparattiva Hija maħluqa minn Envato Tuts u għandha d-distinzjoni li s-slider huwa pożizzjonat b'mod dijagonali biex jikkawża tipi oħra ta 'sensazzjonijiet meta tqabbel żewġ immaġini. Huwa juża JavaScript, CSS u HTML biex ikun slider komparattiv ta 'kwalità għolja.

Slider tal-iskrin sħiħ

Wasalna għall-parti tal-islajders tal-iskrin sħiħ biex niltaqgħu magħhom Slider Transition ikkaratterizzat minn transizzjoni imwettqa minn animazzjoni ta 'effett kbir. Jekk qed tippjana li turi immaġini bi skrin sħiħ u li qed tgħaddi b'attenzjoni kbira, ikkodifika f'Javascript, CSS u HTML.

Slider orizzontali bil-parallax

Għal fannijiet tal-parallax jaffettwaw din is-slider bi Swiper.js, HTML u CSS. Apparti li nkunu nistgħu niżżerżqu biż-żewġ buttuni li jinsabu fuq kull naħa, fuq in-naħa tal-lemin għandna f’minjatura l-istampi kollha tal-karużell sħiħ. Slider viżwali differenti u ta 'kwalità għolja li ma jħalli lil ħadd li jżur il-websajt tagħna indifferenti.

Slider tal-perspettiva 3D lixx

Slider li jirrispondi li segwi l-movimenti tal-pointer ġurdien. Huwa kapaċi jikkawża effett kbir ta 'perspettiva li jista' jwassal għal sentimenti mħallta fil-viżitatur. Jekk taf tużah kif suppost, tista 'tagħti dak il-mess oriġinali u sottili lill-websajt tagħna. JavaScript, CSS u kodiċi HTML ma jonqsux.

Slider tal-iskrin sħiħ tal-Eroj

Slider tal-immaġni tal-eroj bi skrin sħiħ f'HTML, CSS u JavaScript. Have a effett bounce f'kull animazzjoni li tagħtih dak tiegħu u ġeneralment qed niffaċċjaw slider ta 'skrin sħiħ ta' kwalità bħall-bqija tal-lista.

VELO.JS slider bil-fruntieri

Wieħed mill-isbaħ bħala slider ta 'skrin sħiħ b'animazzjoni ta' tranżizzjoni sempliċement meraviljuża. Nirrakkomandaw li tmur tarah fl-operazzjoni biex tibda taħseb dwar kif timplimentah fuq il-web. Uża l-effetti tal-Veloċità Biex ittejjeb dik l-animazzjoni li tuża buttuni tal-vleġġa, klikk tan-navigazzjoni u anke scrolling, Sempliċement perfetta.

Slider vertikali CSS li jirrispondi bil-minjaturi

Nimxu fuq is-sliders CSS li jirrispondi għall-mowbajl kwalità kbira bħal din. Int ser ikollok serje ta 'minjaturi fuq il-lemin li meta tkun ippressat tibda animazzjoni f'waqgħa vertikali. Effett kbir li juża biss CSS biex iħalli slider tal-aħjar minn din il-lista.

Slider tal-immaġni flexbox

Oħra Slider tal-immaġni li jirrispondi magħmul bil-JavaScript u li huwa iktar minn sempliċi li tkun pjuttost eleganti. Qasir, sempliċi u minimalista b'xejn minn dan. Għandha postha f'din il-lista ta 'sliders tal-Flexbox.

Motion Blur b'filtri SVG

Esperiment li jissimula l-effett ta ' ċċajpar il-moviment kull darba li tiżżerżaq huwa attivat. Juża SVG Gaussian blur filter u xi ċwievet tal-animazzjoni CSS. Il-kodiċi użat fil-JavaScript huwa purament għall-eżempju mogħti u l-funzjonalità tas-slider.

Slider animat

Slider animat jirrispondu bil-JavaScript, HTML u CSS. Għandna vleġeġ fuq in-naħa tal-lemin li jippermettulna ngħaddu mill-immaġini li joriġinaw b'animazzjoni grazzjuża u konċiża. Effett kbir miksub f'kull waħda mill-pjastri biex jagħmel lilu nnifsu jispikka. Kurrenti ħafna fl-animazzjonijiet.

Slider tal-immaġni b'disinji SVG

Wieħed ieħor minn dawk l-esperimenti li jipprova iġorru mudelli svg biex toħloq xi immaġini tal-maskra għal slider CSS. Tipproduċi effett ta 'ċċajpar impressjonanti ħafna b'finitura kbira. Ieħor minn dawk is-slajders biex jipprovoka sentimenti tajbin fil-viżitatur tal-websajt tagħna.

Slider ta 'saff sempliċi

Slider b'wieħed aktar minn animazzjoni distinta li joffri dak l-effett tal-mewġ kull darba li nikklikkjaw fuq l-ikona biex tiżżerżaq stampa ġdida. Magħmul fl-HTML, CSS u JavaScript isir slider ieħor tal-immaġni.

Slider CSS pur

Ieħor mill-aktar slajders sempliċi u li huwa CSS pur. Wieħed mill-vantaġġi tiegħu li tpoġġi fl-Internet qiegħ ix-xellug sensiela ta 'tikek li jservu bħala l-buttuni biex jilħqu kull waħda mill-istampi li jgħaddu quddiemna mingħajr ebda animazzjoni speċjali.

Cupcake biss slider CSS

El l-iktar slider ħelu fuq il-lista u li huwa biss fis-CSS u l-HTML. Huwa wieħed mill-aktar speċjali tal-lista kollha li għandu fuq in-naħa tal-lemin il-varjazzjonijiet differenti tal-cupcakes. Ikklikkja fuq waħda u cupcake jidher b'animazzjoni mill-isbaħ li tispiċċa f'effett ta 'bounce kbir. Wieħed mill-aqwa mingħajr dubju.

Effett ta 'animazzjoni slider

Waħda mill-aktar slajders eleganti fl-animazzjoni u xiex jirnexxielu jgħaġġibna bl-ewwel bidla. Mill-ewwel mument li tqum l-animazzjoni, il-kodiċi HTML, CSS u JavaScript tagħha jħallina sorpriż. Ieħor mill-aqwa fil-mess minimalista li jagħti.

Slice slice

Un slider ta 'transizzjoni li juża klassi add sempliċi u li hija kkaratterizzata minn animazzjonijiet lixxi ħafna biex issir waħda mill-favoriti f'din il-lista. Jekk trid tiddistingwi ruħek fil-verżjoni mobbli tal-web, hija waħda mill-elementi essenzjali. Ħafna viżwalment.

Slider Parallax New York

Wieħed mill-akbar vantaġġi ta 'dan slider parallax fis-CSS hija li tista 'tiġi personalizzata ħafna. Dan ifisser li tista 'tbiddel it-tipa, id-daqs tagħha, il-kulur tagħha u l-veloċità tal-animazzjoni. L-ewwel ittra ta 'kull belt f'sensiela ġdida ta' matriċi JavaScript tidher fuq slide ġdida. Ieħor mill-islajders ta 'valur ta' din il-kariga.

popout slider

Bil- stil minimalista dan is-slider huwa ppreżentat li fiha kull parti tal-immaġni toħroġ ma 'kull slide. Kreattiv ħafna u differenti minn dak li jidher fil-lista ta 'sliders u li jinsab fil-post tiegħu stess.

Slider b'effett immewweġ

Un slider full-screen b'effett għoli b’kuluri ċatti biex tieħu l-meraq kollu tagħha. JavaScript, HTML u CSS għal slider ieħor b'effett li jiġbed l-għajn.

Slider bi preview tal-immaġni

Slider GSAP bi preview tal-pjastri li jmiss li se jiġi ppreżentat lill-utent. Perfetta għall-immudellar fuq websajt tal-moda jew tad-disinn.

Tranżizzjonijiet ta 'sliders

Nispiċċaw il-lista b ' slider ta 'kwalità għolja b'effett bombastiku u sensiela ta 'animazzjonijiet li jiksbu dak il-mess speċjali fuq il-websajt tagħna. L-effett parallax jista 'jiġi attivat.

Titlifx dan lista oħra tal-kodiċi CSS għall-buttuni.