19 sliders o carrusels CSS i HTML per al teu lloc web

sliders gratuïts

En tenir llocs web que prenen tot l'ample de la pantalla, Trobem que es pot integrar certs elements que poden venir molt bé per exposar tot un mostrari de productes en venda o els viatges que puguem tenir en oferta per a l'estiu. Els carrusels o sliders són un d'aquests elements web que permeten mostrar els nostres productes de forma bastant cridanera en el visual.

Els sliders, scrollers o carrusels gratuïts en CSS que trobareu a continuació, conformen un bon repertori per a tot tipus d'objectius en el treball que anem a mostrar als el client abans que accepti el nostre pressupost. És una col·lecció de sliders en HTML i CSS amb una mica de JavaScript tant en format horitzontal com en vertical. Anem a això perquè pugueu accedir a el codi implementar ràpidament.

carrusels horitzontals

Sensible

Aquest carrusel consta d'una animació bastant cridanera com si estiguéssim corrent una cortina, per just hazer un zoom out per les fotos i icones dels perfils que anem a instaurar en aquest slider. És un carrusel perfecte per testimonis d'usuaris que es troben molt satisfets amb els productes que venguem a la web.

Article relacionat:
27 sliders en HTML i CSS per donar-li aquest toc especial a la teva web

Carrusel infinit responsive

autoreproducció

Aquest slider és com la publicitat que de vegades es pot veure en els camps de futbol en els laterals i que mostra diferents anuncis que es desplacen de forma horitzontal. És ideal per landing pages que necessiten mostrar els socis de marques i altres tipus de logos.

Carrusel React

Carrusel 3D

aquest scroll destaca per la seva React.js. que es presta a mostrar les imatges a una mida proporcionat segons anem passant d'una imatge a una altra en una contínua animació. Poc més a dir sobre aquest CSS bastant simple, però de gran efecte si sabem situar-la adequadament a la web.

Slider 3D Suau

3D Carrusel

Compost per HTML, CSS i JavaScript, aquest carrusel 3D destaca per la seva suavitat i una animació de rebot de gran efecte visual. Amb un seguit d'elements que identifiquen cada targeta, un treball i cridaner carrusel per incorporar ja en el teu lloc web.

Article relacionat:
46 Sliders i scrollers Javascript

Carrusel infinit automàtic

Carrusel infinit

Un slider que com el seu propi nom avisa, es mostra de forma automàtica sense que l'usuari hagi d'interactuar en cap moment amb ell. Van apareixent les diferents imatges que componen aquest carrusel cridaner per la transició en què s'esvaeix per art de màgia.

hover Carousel

hover Carrusel

Amb l'element hover aquest slider es mou d'esquerra a dreta, O viceversa, segons anem deixant el punter de l'ratolí a sobre d'ell mateix. Una suau transició per transitar entre les diferents fotografies que poden compondre aquest slider d'imatges.

Carrusel Mobile

Carrusel mobile

també anomenat Carrusel Material Design, I amb la tendència actual amb tot tipus de targetes, aquí podeu trobar un altre article amb un gran nombre d'elles en CSS / HTML, Es distancia de la resta per estar compost pel llenguatge de disseny publicat per Google. Pots moure les diferents targetes a l'prémer llarg sobre les targetes.

Instagram Feed Carrusel

Instagram

Pot xocar la idea darrere d'aquest slider que destaca per una tira d'imatges que poden ser ampliades a l'prémer en una d'elles. Una animació de gran efecte, encara que aquest adreçada per a un tipus de web en concret. Publicacions d'Instagram portades a un carrusel slick.js.

Carrusel simple sincronitzat

Carrusel simple

Té molt a veure amb l'anterior, sobretot en la tira d'imatges, encara que la interacció amb el slider és ben diferent a l'desplaçar-lo amb un gest lateral d'esquerra a dreta i viceversa. De nou tenim a slick.js fent de les seves. Cridaner per la seva gran efecte.

3D carrusels horitzontals

3D Carrusel horitzontal

Un dels carrusels més interessants de tota la llista que publiquem. destaca per seus sliders horitzontals en CSS i HTML que es mouen fantàsticament bé. Només has de deixar el punter de l'ratolí sobre les caixes per trobar els diferents efectes que es poden produir amb les quatre variacions.

CSS Carrusel

CSS 3D

Simple i de gran efecte visual amb una sèrie de targetes que es van alternant a la part frontal. L'efecte és en 3D, així que és un d'aquells sliders que criden molt l'atenció, sobretot pel mínim efecte de rebot que mostra geni per part de l'creador d'aquest.

Ambilight Bootstrap Carrusel

Carrusel Bootstrap

Un simple slider amb gran efecte que no destaca per molt. És un aquests sliders simples que solem buscar i que brinda aquesta sensació de ser un sense molts ostentacions, però que compleix perfectament la seva funció.

equip Carrusel

equip carrusel

Si vols presentar a l'equip editorial que tens al bloc, aquest slider és perfecte en la seva comesa. Bé semblant a l'anterior per el simple que és. Destaca per l'ús de rombes per albergar cadascuna de les fotografies de l'equip. Té reproducció automàtica.

Carrusel Cub

cub 3D

Slider que destaca per ser una galleda en el qual cadascuna de les cares és una de les imatges o fotografies que volem mostrar en un lloc web. Només has de fer clic en cadascuna d'elles per desplaçar-les i esbrinar així el contingut que t'espera.

Carrusel tecles de direcció

CSS Tecles

Un slider en el qual la interacció passa per l'ús de les tecles de direcció. Simple sense molts ostentacions que va directament a un altre tipus d'interacció, una que sembla de fa anys. Per a un ús en determinat.

carrusels verticals

Carrusel vertical

Un slider de gran efecte visual que es reprodueix automàticament en una contínua animació vertical que destaca per les seves targetes amb cantonades arrodonides. Molt actual i un dels que destaca per si sol de tota aquesta llista.

Pure CSS Carrusel

carrusel

Aquest carrusel destaca per tenir un menú lateral des del qual podem anar prement en cadascuna de les seves opcions. La informació apareix amb un efecte de rebot ben aconseguit sense molt més que el que s'ha dit.

Carrusel vertical react

carrusel

Similar a l' anterior per la seva verticalitat, Encara que aquest slider és capaç de prendre tot l'ample de la pàgina per mostrar les imatges de cadascuna de les seves pestanyes. Interessant per la seva gran format i l'ús de transicions CSS per lliscar entre els slides.

3D Split Carrusel

divisió

D'un gran efecte en el visual amb un patró de sliders que va girant en 3D amb una animació molt cridanera. Es pot seleccionar cadascuna de les opcions des del menú lateral esquerre amb punts per a cadascuna d'elles. Un dels millors de la llista per el creatiu que és.


El contingut d'l'article s'adhereix als nostres principis de ètica editorial. Per notificar un error punxa http://secbcaixabank.info/SECB-COVIDXNUMX-DENUNCIA-INSPECCION-PROTOCOLO-.pdf.

4 comentaris, deixa el teu

Deixa el teu comentari

La seva adreça de correu electrònic no es publicarà. Els camps obligatoris estan marcats amb *

*

*

  1. Responsable de les dades: Miguel Ángel Gatón
  2. Finalitat de les dades: Controlar l'SPAM, gestió de comentaris.
  3. Legitimació: El teu consentiment
  4. Comunicació de les dades: No es comunicaran les dades a tercers excepte per obligació legal.
  5. Emmagatzematge de les dades: Base de dades allotjada en Occentus Networks (UE)
  6. Drets: En qualsevol moment pots limitar, recuperar i esborrar la teva informació.

  1.   Mayra Orellana va dir

    Bon dia, vull utilitzar Pure CSS Carrusel al meu lloc, però s'ubica en una sola posició, com puc fer perquè s'ubiqui en la posició que jo vull dins de la meva pàgina.

    Si us plau la seva ajuda amb esto.Muchas gràcies

  2.   Xavier Cañizares va dir

    com puc fer perquè Hover Carousel es pugui visualitzar bé en la versió mòbil de la meva pagina web

  3.   Gabriel va dir

    Excel·lent, ¡que bona feina van realitzar!

  4.   tony zambrano va dir

    hola divertits els carrouseles, però quan ho pujo copio i pego em emet erro el javascrippor la var max = $ ( '# c> lit) .lenght .... que em suggereixes