19 liukusäädintä tai karusellia CSS ja HTML verkkosivustollesi

ottaa verkkosivustot, jotka vievät koko näytön leveydenHuomasimme, että tietyt elementit voidaan integroida, jotka voivat olla hyödyllisiä näyttääksesi koko näytteen myytävistä tuotteista tai matkoista, joita meillä saattaa olla kesällä. Karusellit tai liukusäätimet ovat yksi niistä verkkoelementeistä, joiden avulla voimme näyttää tuotteitamme erittäin huomiota herättävällä tavalla.

Los Ilmaiset liukusäätimet, vierittimet tai karusellit CSS: ssä jonka löydät alla, ne muodostavat hyvän ohjelmiston kaikenlaisille työssä oleville tavoitteille, jotka näytämme asiakkaalle ennen kuin he hyväksyvät budjettimme. Se on kokoelma liukusäätimiä HTML- ja CSS-tiedostoina, joissa on hieman JavaScriptiä sekä vaaka- että pystysuunnassa. Aiomme tehdä sen, jotta voit käyttää koodia ja toteuttaa ne nopeasti.

Vaakasuorat karusellit

Tämä karuselli koostuu a melko räikeä animaatio ikään kuin olisimme piirtäneet verhoa vain loitontamaan valokuvia ja kuvakkeita profiileista, jotka aiomme luoda tässä liukusäätimessä. Se on täydellinen karuselli käyttäjien suosittelijoille, jotka ovat erittäin tyytyväisiä verkossa myymiimme tuotteisiin.

Aiheeseen liittyvä artikkeli:

27 HTML- ja CSS-liukusäädintä antamaan verkkosivustollesi erityisen kosketuksen

Reagoiva ääretön karuselli

Tämä liukusäädin on kuten joskus näkyvä mainonta sivuilla olevilla jalkapallokentillä ja näytetään erilaisia ​​vaakasuuntaisesti vierittäviä mainoksia. Se on ihanteellinen laskeutumissivuille, joissa on esitettävä tuotemerkkikumppaneita ja muun tyyppisiä logoja.

Reagoi karuselli

Tämä vieritys erottuu React.js: stä. joka on omiaan näyttämään kuvia suhteellisessa koossa, kun siirrymme kuvasta toiseen jatkuvassa animaatiossa. Hieman enemmän sanottavaa tästä melko yksinkertaisesta CSS: stä, mutta sillä on suuri vaikutus, jos osaamme sijoittaa sen oikein verkkoon.

Sileä 3D-liukusäädin

Tämä 3D-karuselli koostuu HTML: stä, CSS: stä ja JavaScriptistä, ja se erottuu tasaisuudestaan ​​ja erittäin visuaalinen pomppiva animaatio. Sarjalla elementtejä, jotka tunnistavat kunkin kortin, työn ja huomiota herättävän karusellin, jotta voit sisällyttää sen verkkosivustoosi.

Aiheeseen liittyvä artikkeli:

46 Javascript-liukusäädintä

Automaattinen ääretön karuselli

Liukusäädin, joka, kuten sen oma nimi varoittaa, näytetään automaattisesti ilman käyttäjän tarvitse olla vuorovaikutuksessa ei ole aikaa hänen kanssaan. Eri kuvat, jotka muodostavat tämän silmiinpistävän karusellin, näkyvät siirtymän vuoksi, jossa se maagisesti haalistuu.

Vie karuselli

Hover-elementillä tämä liukusäädin liikkuu vasemmalta oikealletai päinvastoin, kun jätämme hiiren osoittimen sen päälle. Sujuva siirtyminen eri valokuvien välillä, jotka voivat sommitella tämän kuvan liukusäätimen.

Liikkuva karuselli

myös nimeltään Carousel Material Designja nykyisen trendin kanssa kaikenlaisilla korteilla, Täältä löydät toisen artikkelin, jossa on paljon CSS / HTML-tiedostoja, etääntyy muusta, koska se koostuu Googlen julkaisemasta suunnittelukielestä. Voit siirtää eri kortteja painamalla niitä pitkään.

Instagram-syötekaruselli

Voit kaataa tämän erotettavan liukusäätimen idean kuvanauhalla, jota voidaan suurentaa napsauttamalla yhtä niistä. Animaatio, jolla on suuri vaikutus, vaikka se on suunnattu tietyntyyppiselle verkkosivustolle. Instagram-viestit viedään slick.js-karuselliin.

Yksinkertainen synkronoitu karuselli

Sillä on paljon tekemistä edellisen kanssa, varsinkin kuvanauhoissa vuorovaikutus liukusäätimen kanssa on hyvin erilainen siirtämällä sitä sivuttaisliikkeellä vasemmalta oikealle ja päinvastoin. Jälleen meillä on slick.js tekemässä asiaansa. Silmiinpistävä sen erinomaisesta vaikutuksesta.

3D vaakasuorat karusellit

Yksi mielenkiintoisimmista karuselleista julkaisemassamme luettelossa. Erottuu vaakasuuntaiset liukusäätimesi CSS: ssä ja HTML: ssä jotka liikkuvat uskomattoman hyvin. Sinun tarvitsee vain jättää hiiren osoitin ruutujen päälle löytääksesi eri tehosteet, jotka voidaan tuottaa neljällä muunnelmalla.

CSS-karuselli

Yksinkertainen ja loistava visuaalinen tehoste a sarja kortteja, jotka vuorottelevat edessä. Vaikutus on 3D-muodossa, joten se on yksi niistä liukusäätimistä, joka houkuttelee paljon huomiota, varsinkin sen minimaalisen rebound-vaikutuksen vuoksi, joka osoittaa neroa saman luojan puolelta.

Ambilight Bootstrap -karuselli

Yksinkertainen liukusäädin, jolla on suuri vaikutus, joka ei erotu paljon. On yksi nuo yksinkertaiset liukusäätimet jota yleensä etsimme ja joka antaa sellaisen tunteen olla yksi ilman suuria fanfaareja, mutta se täyttää tehtävänsä täydellisesti.

Karusellitiimi

Jos haluat esitellä blogissasi olevan toimitusryhmän, tämä liukusäädin on täydellinen roolissaan. Hyvä, samanlainen kuin edellinen, kuinka yksinkertaista se on. Se erottuu timanttien käytöstä kaikkien joukkueen valokuvien sijoittamiseen. Se on automaattinen toisto.

Karusellikuutio

Liukusäädin, joka erottuu kuutiosta kukin kasvoista on yksi kuvista tai valokuvia, jotka haluamme näyttää verkkosivustolla. Sinun tarvitsee vain napsauttaa kutakin niistä selataksesi niitä ja saadaksesi selville, mikä sisältö sinua odottaa.

Karusellinuolinäppäimet

Liukusäädin, jossa vuorovaikutus käy läpi nuolinäppäimillä. Yksinkertainen ilman paljon fanfareja, jotka menevät suoraan toiseen vuorovaikutustyyppiin, joka tuntuu vuosia sitten. Erityiseen käyttöön.

Pystysuuntaiset karusellit

Liukusäädin, jolla on suuri visuaalinen vaikutus toistaa automaattisesti jatkuvassa pystysuorassa animaatiossa joka erottuu pyöristetyillä kulmilla korteistaan. Erittäin ajankohtainen ja yksi niistä, joka erottuu itsestään tästä koko luettelosta.

Puhdas CSS-karuselli

Tämä karuselli erottuu siitä, että sillä on sivuvalikko, josta voimme mennä napsauttamalla kutakin sen vaihtoehtoa. Informaatio näyttää hyvin saavutetulta rebound-vaikutukselta ilman paljon muuta kuin sanottu.

Pystysuuntainen karuselli reagoi

Samanlainen edellinen sen vertikaalisuuden vuoksi, vaikka tämä liukusäädin pystyy ottamaan sivun koko leveyden näyttämään kunkin välilehden kuvat. Mielenkiintoinen sen suuresta muodosta ja CSS-siirtymien käytöstä dioiden välillä liukumiseen.

3D jaettu karuselli

Upea visuaalinen tehoste liukusäätimillä, joka pyörii 3D-tilassa erittäin silmiinpistävä animaatio. Kukin vaihtoehdoista voidaan valita vasemmanpuoleisesta valikosta, jossa on pisteet kullekin. Yksi parhaista luettelossa siitä, kuinka luova se on.