19 sliders o carruseles CSS y HTML para tu sitio web

Al tener sitios web que toman todo el ancho de la pantalla, encontramos que se puede integrar ciertos elementos que pueden venir muy bien para exponer todo un muestrario de productos en venta o los viajes que podamos tener en oferta para el verano. Los carruseles o sliders son uno de esos elementos web que permiten mostrar nuestros productos de forma bastante llamativa en lo visual.

Los sliders, scrollers o carruseles gratuitos en CSS que encontraréis a continuación, conforman un buen repertorio para todo tipo de objetivos en el trabajo que vayamos a mostrar al cliente antes de que acepte nuestro presupuesto. Es una colección de sliders en HTML y CSS con un poco de JavaScript tanto en formato horizontal como en vertical. Vamos a ello para que podáis acceder al código implementarlos rápidamente.

Carruseles horizontales

Este carrusel consta de una animación bastante llamativa como si estuviéramos corriendo una cortina, para justo hazer un zoom out para las fotos e iconos de los perfiles que vayamos a instaurar en este slider. Es un carrusel perfecto para testimonios de usuarios que se encuentran muy satisfechos con los productos que vendamos en la web.

Carrusel infinito responsive

Este slider es como la publicidad que a veces se puede ver en los campos de futbol en los laterales y que muestra distintos anuncios que se desplazan de forma horizontal. Es ideal para landing pages que necesitan mostrar los socios de marcas y otro tipo de logos.

Carrusel React

Este scroll destaca por su React.js. que se presta a mostrar las imágenes a un tamaño proporcionado según vamos pasando de una imagen a otra en una continua animación. Poco más que decir sobre este CSS bastante simple, pero de gran efecto si sabemos situarla adecuadamente en la web.

Slider 3D Suave

Compuesto por HTML, CSS y JavaScript, este carrusel 3D destaca por su suavidad y una animación de rebote de gran efecto visual. Con una serie de elementos que identifican cada tarjeta, un trabajo y llamativo carrusel para incorporarlo ya en tu sitio web.

Carrusel infinito automático

Un slider que como su propio nombre avisa, se muestra de forma automática sin que el usuario tenga que interactuar en ningún momento con él. Van apareciendo las distintas imágenes que componen este carrusel llamativo por la transición en la que desvanece por arte de magia.

Hover Carousel

Con el elemento hover este slider se mueve de izquierda a derecha, o viceversa, según vamos dejando el puntero del ratón encima del mismo. Una suave transición para transitar entre las distintas fotografías que pueden componer este slider de imágenes.

Carrusel Mobile

También llamado Carrusel Material Design, y con la tendencia actual con todo tipo de tarjetas, aquí podéis encontrar otro artículo con un gran número de ellas en CSS/HTML, se distancia del resto por estar compuesto por el lenguaje de diseño publicado por Google. Puedes mover las distintas tarjetas al pulsar prolongadamente sobre las tarjetas.

Instagram Feed Carrusel

Puede chocar la idea detrás de este slider que destaca por una tira de imágenes que pueden ser ampliadas al pulsar en una de ellas. Una animación de gran efecto, aunque este dirigida para un tipo de web en concreto. Publicaciones de Instagram llevadas a un carrusel slick.js.

Carrusel simple sincronizado

Tiene mucho que ver con el anterior, sobre todo en la tira de imágenes, aunque la interacción con el slider es bien diferente al desplazarlo con un gesto lateral de izquierda a derecha y viceversa. De nuevo tenemos a slick.js haciendo de las suyas. Llamativo por su gran efecto.

3D carruseles horizontales

Uno de los carruseles más interesantes de toda la lista que publicamos. Destaca por sus sliders horizontales en CSS y HTML que se mueven fantasticamente bien. Solamente has de dejar el puntero del ratón sobre las cajas para encontrar los distintos efectos que se pueden producir con las cuatro variaciones.

CSS Carrusel

Simple y de gran efecto visual con una serie de tarjetas que se van turnando en la parte frontal. El efecto es en 3D, así que es uno de esos sliders que llaman mucho la atención, sobre todo por el mínimo efecto de rebote que muestra genio por parte del creador del mismo.

Ambilight Bootstrap Carrusel

Un simple slider con gran efecto que no destaca por mucho. Es uno de esos sliders simples que solemos buscar y que brinda esa sensación de ser uno sin muchos alardes, pero que cumple perfectamente su función.

Equipo Carrusel

Si quieres presentar al equipo editorial que tienes en el blog, este slider es perfecto en su cometido. Bien parecido al anterior por lo simple que es. Destaca por el uso de rombos para albergar cada una de las fotografías del equipo. Tiene reproducción automática.

Carrusel Cubo

Slider que destaca por ser un cubo en el que cada una de las caras es una de las imágenes o fotografías que queremos mostrar en un sitio web. Solamente has de hacer clic en cada una de ellas para desplazarlas y averiguar así el contenido que te espera.

Carrusel teclas de dirección

Un slider en el que la interacción pasa por el uso de las teclas de dirección. Simple sin muchos alardes que va directamente a otro tipo de interacción, una que parece de hace años. Para un uso en determinado.

Carruseles verticales

Un slider de gran efecto visual que se reproduce automáticamente en una continua animación vertical que destaca por sus tarjetas con esquinas redondeadas. Muy actual y uno de los que destaca por si solo de toda esta lista.

Pure CSS Carrusel

Este carrusel destaca por tener un menú lateral desde el que podemos ir pulsando en cada una de sus opciones. La información aparece con un efecto de rebote bien conseguido sin mucho más que lo dicho.

Carrusel vertical react

Similar al anterior por su verticalidad, aunque este slider es capaz de tomar todo el ancho de la página para mostrar las imágenes de cada una de sus pestañas. Interesante por su gran formato y el uso de transiciones CSS para deslizarse entre los slides.

3D Split Carrusel

De un gran efecto en lo visual con un patrón de sliders que va girando en 3D con una animación muy llamativa. Se puede seleccionar cada una de las opciones desde el menú lateral izquierdo con puntos para cada una de ellas. Uno de los mejores de la lista por lo creativo que es.


Un comentario

  1.   Mayra Orellana dijo

    Buenos días, quiero utilizar Pure CSS Carrusel en mi sitio, pero se ubica en una sola posición, cómo puedo hacer para que se ubique en la posición que yo quiero dentro de mi página.

    Por favor su ayuda con esto.Muchas gracias

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

*

*

  1. Responsable de los datos: Miguel Ángel Gatón
  2. Finalidad de los datos: Controlar el SPAM, gestión de comentarios.
  3. Legitimación: Tu consentimiento
  4. Comunicación de los datos: No se comunicarán los datos a terceros salvo por obligación legal.
  5. Almacenamiento de los datos: Base de datos alojada en Occentus Networks (UE)
  6. Derechos: En cualquier momento puedes limitar, recuperar y borrar tu información.