19 sliders jew karuselli CSS u HTML għall-websajt tiegħek

Wara websajts li jieħdu l-wisa ’kollu tal-iskrinAħna sibna li ċerti elementi jistgħu jiġu integrati li jistgħu jiġu utli biex juru kampjun sħiħ ta 'prodotti għall-bejgħ jew il-vjaġġi li jista' jkollna offruti għas-sajf. Il-karużelli jew is-slajders huma wieħed minn dawk l-elementi tal-web li jippermettulna nuru l-prodotti tagħna b'mod li jiġbed l-għajn ħafna.

Il- Sliders, scrollers jew karużelli b'xejn fis-CSS li ssib hawn taħt, jiffurmaw repertorju tajjeb għal kull tip ta 'objettivi fuq ix-xogħol li se nuru lill-klijent qabel ma jaċċettaw il-baġit tagħna. Hija ġabra ta 'sliders f'HTML u CSS bi ftit JavaScript f'format kemm orizzontali kif ukoll vertikali. Aħna se nagħmluha sabiex tkun tista 'taċċessa l-kodiċi biex timplimentahom malajr.

Karuselli orizzontali

Dan il-karużell jikkonsisti f ' animazzjoni pjuttost flashy bħallikieku konna npinġu purtiera, biex inħaffu biss għar-ritratti u l-ikoni tal-profili li se nistabbilixxu f'dan is-slider. Huwa karużell perfett għal testimonjanzi minn utenti li huma sodisfatti ħafna bil-prodotti li nbiegħu fuq il-web.

Artiklu relatat:

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

Karusell infinit li jirrispondi

Dan is-slider huwa bħar-reklamar li kultant jidher fuq l-għelieqi tal-futbol fuq il-ġnub u li juru reklami differenti li jiskrolljaw orizzontalment. Huwa ideali għall-inżul ta 'paġni li għandhom bżonn juru sħab tad-ditta u tipi oħra ta' logos.

Irreaġixxi Carousel

Dan l-iscroll tispikka għar-React.js tagħha. li jsellef lilu nnifsu biex juri immaġini f'qies proporzjonat hekk kif immorru minn immaġni għal oħra f'animazzjoni kontinwa. Ftit iktar xi ngħidu dwar dan is-CSS pjuttost sempliċi, imma ta 'effett kbir jekk nafu kif inpoġġiwh sewwa fuq il-web.

Slider 3D lixx

Kompost minn HTML, CSS u JavaScript, dan il-karużell 3D jispikka għall-intoppi u animazzjoni bouncing viżiva ħafna. B’serje ta ’elementi li jidentifikaw kull karta, xogħol u karużell li jiġbed l-għajn biex tinkorporaha fil-websajt tiegħek.

Artiklu relatat:

46 Slajds u Skrollers tal-Javascript

Karużell infinit awtomatiku

Slider li, kif iwissi ismu stess, jintwera awtomatikament mingħajr ma l-utent ikollu jinteraġixxi fl-ebda ħin miegħu. L-istampi differenti li jiffurmaw dan il-karużell impressjonanti jidhru minħabba t-tranżizzjoni li fiha tgħib magikament.

Hover Carousel

Bl-element imbagħad jerġa dan slider jimxi mix-xellug għal-lemin, jew viċi versa, hekk kif inħallu l-mouse pointer fuqu. Tranżizzjoni bla xkiel biex timxi bejn ir-ritratti differenti li jistgħu jikkomponu din is-slider tal-immaġni.

Karużell Mobbli

wkoll imsejjaħ Carousel Material Design, u max-xejra attwali ma 'kull tip ta' karti, hawn tista 'ssib artiklu ieħor b'numru kbir minnhom fis-CSS / HTML, tbiegħed mill-bqija għax huwa magħmul mil-lingwa tad-disinn ippubblikata mill-Google. Tista 'tmexxi l-karti differenti billi tagħfas fit-tul fuq il-karti.

Instagram Feed Carousel

Tista 'tiġrifa l-idea wara din is-slider li tenfasizza bi strixxa ta ’immaġini li jistgħu jitkabbru billi tikklikkja fuq waħda minnhom. Animazzjoni ta 'effett kbir, għalkemm hija diretta għal tip speċifiku ta' websajt. Postijiet ta 'Instagram meħuda f'karusell slick.js.

Karużell sinkronizzat sempliċi

Għandu ħafna x'jaqsam ma 'dak ta' qabel, speċjalment fl-istrixxa ta 'immaġini, għalkemm l-interazzjoni bis-slider hija differenti ħafna billi ċċaqlaqha b'ġest laterali mix-xellug għal-lemin u viċi versa. Għal darb'oħra għandna slick.js tagħmel ħaġa tagħha. Impressjonanti għall-effett kbir tagħha.

Karuselli orizzontali 3D

Wieħed mill-iktar karuselli interessanti fuq il-lista kollha li nippubblikaw. Jispikka għal is-slajders orizzontali tiegħek fis-CSS u l-HTML li jiċċaqalqu tajjeb ħafna. Trid tħalli biss il-mouse pointer fuq il-kaxxi biex issib l-effetti differenti li jistgħu jiġu prodotti bl-erba 'varjazzjonijiet.

CSS Carousel

Effett viżwali sempliċi u kbir b ' serje ta 'karti li jieħdu dawra fuq quddiem. L-effett huwa fit-3D, allura huwa wieħed minn dawk is-slajders li jiġbdu ħafna attenzjoni, speċjalment minħabba l-effett ta 'rebound minimu li juri ġenju min-naħa tal-kreatur tal-istess.

Ambilight Bootstrap Carousel

Slider sempliċi b'effett kbir li ma jispikkax għal ħafna. Huwa wieħed minn dawk is-sliders sempliċi li ġeneralment infittxu u li jagħti dik is-sensazzjoni li nkunu waħda mingħajr ħafna daqq, imma li tissodisfa perfettament il-funzjoni tagħha.

Tim tal-Karużell

Jekk trid tintroduċi t-tim editorjali li għandek fuq il-blog, din is-slider hija perfetta fir-rwol tagħha. Tajjeb simili għal dak ta 'qabel għal kemm hu sempliċi. Jispikka għall-użu tad-djamanti biex iżomm kull ritratt tat-tim. Għandu daqq awtomatiku.

Carousel Cube

Slider li jispikka minħabba li huwa kubu li fih kull waħda mill-uċuħ hija waħda mill-istampi jew ritratti li rridu nuru fuq websajt. Trid tikklikkja fuq kull waħda minnhom biex tiskrolljahom u ssir taf liema kontenut tistenna int.

Ċwievet tal-vleġġa tal-karużell

Slider li fih tgħaddi l-interazzjoni billi tuża l-vleġġa keys. Sempliċi mingħajr ħafna daqq li jmur direttament għal tip ieħor ta 'interazzjoni, waħda li tidher qisha snin ilu. Għal użu speċifiku.

Karuselli vertikali

Slider b'effett viżwali kbir li awtomatikament jilgħab f'animazzjoni vertikali kontinwa li tispikka għall-karti tagħha bil-kantunieri ttundjati. Kurrenti ħafna u waħda minn dawk li tispikka waħedha minn din il-lista sħiħa.

Karusell CSS pur

Dan il-karużell jispikka talli għandu menu sekondarju li minnu nistgħu mmorru tikklikkja fuq kull waħda mill-għażliet tagħha. L-informazzjoni tidher b'effett ta 'rebound miksub sew mingħajr ħafna iktar minn dak li ntqal.

Il-karużell vertikali jirreaġixxi

Simili għal preċedenti għall-vertikalità tagħha, għalkemm din is-slider hija kapaċi tieħu l-wisa 'kollha tal-paġna biex turi l-istampi ta' kull tabs tagħha. Interessanti għall-format kbir tagħha u l-użu ta 'transizzjonijiet CSS biex tiżżerżaq bejn is-slajds.

3D Split Carousel

Effett viżiv kbir b'disinn ta 'sliders li jduru f'3D bi animazzjoni impressjonanti ħafna. Tista 'tagħżel kull waħda mill-għażliet mill-menu tax-xellug b'punti għal kull waħda minnhom. Wieħed mill-aqwa fil-lista għal kemm hu kreattiv.