19 liugurit või karusselli CSS ja HTML teie veebisaidile

Võttes veebisaidid, mis hõlmavad kogu ekraani laiustLeidsime, et saab integreerida teatud elemente, mis võivad olla kasulikud, et kuvada terve näidis müüdavaid tooteid või reise, mida meil võib olla suveks pakkuda. Karussellid või liugurid on üks neist veebielementidest, mis võimaldavad meil oma tooteid visuaalselt väga pilkupüüdvalt näidata.

osa Tasuta liugurid, kerijad või karussellid CSS-is mille leiate allpool, koostage hea repertuaar igasuguste tööl olevate eesmärkide jaoks, mida me näitame kliendile enne, kui nad meie eelarvet aktsepteerivad. See on liugurite kogu HTML-is ja CSS-is, millel on natuke JavaScripti nii horisontaalses kui ka vertikaalses vormingus. Teeme seda, et pääseksite koodile juurde, et neid kiiresti rakendada.

Horisontaalsed karussellid

See karussell koosneb a päris toretsev animatsioon justkui tõmbaksime kardinat, et lihtsalt suumida välja nende profiilide fotod ja ikoonid, mille me selles liuguris püstitame. See on ideaalne karussell nende kasutajate iseloomustuste jaoks, kes on veebis meie müüdavate toodetega väga rahul.

Seotud artikkel:

27 HTML- ja CSS-liugurit, et anda teie veebisaidile eriline puudutus

Reageeriv lõpmatu karussell

See liugur on nagu reklaam, mida mõnikord võib näha külgmistel jalgpalliväljakutel ja kuvades erinevaid horisontaalselt kerivaid reklaame. See sobib ideaalselt maandumislehtede jaoks, kus tuleb näidata brändipartnereid ja muud tüüpi logosid.

Reageeri karussell

See kerimine paistab silma oma React.js. mis sobib piltide kuvamiseks proportsionaalse suurusega, kui liigume ühelt pildilt teisele pideva animatsiooni ajal. Selle üsna lihtsa CSS-i kohta pole veel midagi öelda, kuid sellel on suur mõju, kui teame, kuidas seda veebis õigesti paigutada.

Sile 3D-liugur

Koosneb HTML-ist, CSS-ist ja JavaScripti ning see 3D-karussell paistab silma oma sileduse ja suurepärase visuaalse efektiga hüplev animatsioon. Rida elemente, mis identifitseerivad iga kaardi, töö ja pilkupüüdva karusselli, et see oma veebisaidile lisada.

Seotud artikkel:

46 Javascripti liugurid ja kerijad

Automaatne lõpmatu karussell

Liugur, mis kuvatakse automaatselt, nagu tema enda nimi hoiatab ilma et kasutaja peaks suhtlema pole temaga aega. Erinevad pildid, mis moodustavad selle silmatorkava karusselli, ilmuvad tänu üleminekule, mille käigus see võluväel tuhmub.

Hõljutav karussell

Selle hõljukelemendiga liugur liigub vasakult paremalevõi vastupidi, kui jätame hiirekursori selle kohale. Sujuv üleminek selle pildi liugurit komponeerivate fotode vahel liikumiseks.

Mobiilne karussell

ka nimega Karussellmaterjalide disainja praeguse trendiga igat tüüpi kaartide puhul siit leiate veel ühe artikli, kus neid on palju CSS / HTML-is, eemaldub see muust, moodustades Google'i avaldatud kujunduskeele. Eri kaarte saate teisaldada, vajutades kaartidele pikka aega.

Instagrami voogukarussell

Selle väljapaistva liuguri taga oleva idee saate kokku lüüa pildiriba abil, mida saab suurendada klõpsates ühel neist. Suure mõjuga animatsioon, ehkki see on mõeldud teatud tüüpi veebisaitidele. Instagrami postitused viidi slick.js karussellile.

Lihtne sünkroniseeritud karussell

See on eelmisega palju seotud, eriti piltide ribas, kuigi liuguriga suhtlemine on väga erinev liigutades seda külgmise liigutusega vasakult paremale ja vastupidi. Jällegi on meil slick.js oma asja ajamas. Silmatorkav selle suurepärase efekti poolest.

3D horisontaalsed karussellid

Üks huvitavamaid karusselle kogu meie avaldatud nimekirjas. Torkab silma oma horisontaalsed liugurid CSS-is ja HTML-is mis liiguvad fantastiliselt hästi. Nelja variatsiooniga saadavate erinevate efektide leidmiseks peate hiirekursori ainult kastide kohale jätma.

CSS-karussell

Lihtne ja suurepärane visuaalne efekt a-ga kordamööda kaartide seeria esiküljel. Efekt on 3D-s, seega on see üks nendest liuguritest, mis äratab palju tähelepanu, eriti selle minimaalse tagasilöögiefekti tõttu, mis näitab sama looja geniaalsust.

Ambilight Bootstrapi karussell

Suurepärase efektiga lihtne liugur, mis eriti silma ei paista. On üks need lihtsad liugurid mida me tavaliselt otsime ja mis annab selle tunde, et oleme üks, ilma suurema kärata, kuid see täidab suurepäraselt oma funktsiooni.

Karussellimeeskond

Kui soovite tutvustada ajaveebis olevat toimetuse meeskonda, see liugur on oma rollis täiuslik. Hea, nagu eelmine, kui lihtne see on. See paistab silma teemantide kasutamisega meeskonna kõigi fotode paigutamiseks. Sellel on automaatne taasesitus.

Karussellikuubik

Liugur, mis paistab silma kuubi kujul iga nägu on üks piltidest või fotod, mida soovime veebisaidil kuvada. Nende sirvimiseks ja saate teada, milline sisu teid ootab, peate klõpsama kõigil neist.

Karusselli nooleklahvid

Liugur, milles interaktsioon toimub nooleklahvide abil. Lihtne ilma suurema kärata, mis läheb otse teist tüüpi suhtlusesse, mis näib olevat aastaid tagasi. Spetsiifiliseks kasutamiseks.

Vertikaalsed karussellid

Selle suurepärase visuaalse efektiga liugur mängib automaatselt pidevas vertikaalses animatsioonis mis paistab silma ümarate nurkadega kaartide poolest. Väga ajakohane ja üks neist, mis kogu sellest nimekirjast eraldi välja paistab.

Puhas CSS-karussell

See karussell paistab silma selle poolest, et tal on a kõrvalmenüü, kust saame minna klõpsates selle valikut. Informatsioon ilmub hästi saavutatud tagasilöögiefektiga, ilma palju enamat kui öeldu.

Vertikaalne karussell reageerib

Sarnane eelmine oma vertikaalsuse poolest, kuigi see liugur on võimeline võtma kogu lehe laiuse, et kuvada selle vahelehtede pilte. Huvitav oma suure formaadi ja CSS-i üleminekute kasutamise eest slaidide vahel libisemiseks.

3D jagatud karussell

Suurepärane visuaalne efekt koos 3D-ga pööratava liugurite mustriga väga silmatorkav animatsioon. Vasakpoolsest menüüst saate valida kõik võimalused koos punktidega. Üks loendi parimatest, kui loominguline see on.