19 liugurit või karusselli CSS ja HTML teie veebisaidile

vabad liugurid

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

Tundlik

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

Enese taastootmine

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

3D-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

3D karussell

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

Lõputu 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

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

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

Instagram

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

Lihtne 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

3D horisontaalne karussell

Ü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

CSS 3D

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

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

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

3d kuup

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

CSS-klahvid

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

Vertikaalne karussell

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

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

Karussell

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

lõhe

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.


Artikli sisu järgib meie põhimõtteid toimetuse eetika. Veast teatamiseks klõpsake nuppu siin.

4 kommentaari, jätke oma

Jäta oma kommentaar

Sinu e-postiaadressi ei avaldata. Kohustuslikud väljad on tähistatud *

*

*

  1. Andmete eest vastutab: Miguel Ángel Gatón
  2. Andmete eesmärk: Rämpsposti kontrollimine, kommentaaride haldamine.
  3. Seadustamine: teie nõusolek
  4. Andmete edastamine: andmeid ei edastata kolmandatele isikutele, välja arvatud juriidilise kohustuse alusel.
  5. Andmete salvestamine: andmebaas, mida haldab Occentus Networks (EL)
  6. Õigused: igal ajal saate oma teavet piirata, taastada ja kustutada.

  1.   Mayra orellana DIJO

    Tere hommikust, tahan oma saidil kasutada puhast CSS-karusselli, kuid see asub ainult ühes positsioonis. Kuidas ma saan selle oma lehel soovitud asendisse panna.

    Palun oma abi selles. Suur aitäh

  2.   Xavier Cañizares DIJO

    Kuidas saan hõljukkarusselli oma veebisaidi mobiiliversioonis hästi kuvada?

  3.   Gabriel DIJO

    Suurepärane, kui head tööd nad tegid!

  4.   tony zambrano DIJO

    Tere, kelgumajad on väga lahedad, kuid kohe, kui selle üles laadin, kopeerin ja kleepin, annab javascrip mulle vea var max = $ ('# c> li) .lenght ... tõttu. Mida soovitate