Carrusel en CSS: Crear Deslizador de Imágenes sin JavaScript

Clase 26 de 34 • Curso de CSS Avanzado y Responsive Design

Clase anteriorSiguiente clase

Resumen

¿Sabías que puedes crear un carrusel sin JavaScript?

¡Así es! Utilizando únicamente CSS, específicamente la propiedad Scroll Snap, puedes lograr un carrusel elegante y funcional sin recurrir a JavaScript. Esto hace tu página más ligera y mejora la experiencia del usuario.

¿Qué estructura necesitas para tu carrusel?

Primero, prepara un div contenedor con la clase carrusel y dentro, coloca tus imágenes sin necesidad de clases adicionales en ellas. Esto simplificará nuestra estructura HTML y mantendrá el enfoque en CSS.

Ejemplo en HTML:

<div class="carrusel">
    <img src="imagen1.jpg" />
    <img src="imagen2.jpg" />
    <img src="imagen3.jpg" />
    <!-- Añade más imágenes según necesites -->
</div>

¿Cómo aplicar CSS para hacer funcionar el carrusel?

La magia ocurre cuando introduces las siguientes propiedades CSS al contenedor carrusel:

.carrusel {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 15px;
    scroll-behavior: smooth;
}

.carrusel img {
    width: 600px;
    height: 400px;
    object-fit: cover;
    scroll-snap-align: center;
    border-radius: 10px; /* Hace que las imágenes sean ligeramente redondeadas */
}

¿Qué hace cada propiedad?

  • display flex permite que las imágenes se coloquen horizontalmente.
  • overflow-x auto habilita el desplazamiento lateral por las imágenes.
  • scroll-snap-type x mandatory asegura que el desplazamiento siempre se detenga alineado en el eje horizontal.
  • gap introduce una separación uniforme entre las imágenes.
  • scroll-behavior smooth hace que el desplazamiento sea fluido y agradable para la vista.
  • object-fit cover evita la deformación de las imágenes ajustándolas al tamaño establecido.
  • scroll-snap-align center hace que las imágenes siempre queden alineadas al centro al desplazarse.

¿Cuáles son los resultados esperados?

Con esto obtienes un carrusel atractivo y funcional:

  • Un desplazamiento horizontal suave y fluido.
  • Cada imagen posicionada perfectamente en el centro.
  • Ninguna deformación visual en las imágenes.

Anímate a experimentar con diferentes tamaños, espacios y detalles visuales para enriquecer más tu carrusel. ¿Te gustaría probar otras variaciones? ¡Comparte tus resultados o dudas en los comentarios!