Cómo hacer un carrusel solo con CSS

Mencionamos una forma de crear un carrusel solo con CSS en una edición reciente del boletín y pensé que sería interesante un artículo más detallado y capturaría algunos de mis pensamientos sobre cómo crear uno.

Entonces, esto es lo que vamos a hacer hoy:

¡Aquí no hay JavaScript en absoluto! Sin complementos de jQuery. Sin engaños. Solo un par de propiedades CSS nuevas con las que he estado experimentando, así como algo de HTML básico.

Bien, para empezar, debemos centrarnos en el marcado. El diseño incluye una navegación izquierda compuesta por imágenes y una gran galería de imágenes a la derecha que nos permite desplazarnos por cada imagen de forma individual. También necesitaremos un contenedor que nos ayude a organizar el diseño:

div  nav/nav  div/div/div

¡A continuación, podemos agregar imágenes! Para este pequeño ejemplo, revisa nuestra lista de sitios con imágenes de alta calidad que puedes usar de forma gratuita y elegante Unsplash.

Después de guardar imágenes con el administrador de activos CodePen, comenzó a agregar las URL al navelemento:

nav  a href="#image-1"    img src="..." alt="Yosemite" /  /a  a href="#image-2"    img src="..." alt="Basketball hoop" /  /a  !-- more images go here -- /nav

¿Ves que hrefcada uno de estos enlaces apunta a una identificación? Esto se debe a que si volvemos a mirar la demostración, queremos poder hacer clic en una imagen y luego queremos saltar a la versión más grande de esa imagen en la galería de la derecha.

Entonces, ahora también podemos comenzar a agregar estas imágenes a la galería grande…

div  img src="..." alt="Yosemite" /  img src="..." alt="Basketball hoop" /  !-- more images go here -- /div

Hábil. Lo siguiente es la parte divertida: diseña a este chico malo. Podemos usar un diseño de cuadrícula como padre .wrappery establecer algunos valores predeterminados inteligentes para el imgelemento:

img {  display: block;  max-width: 100%;}.wrapper {  display: grid;  grid-template-columns: 1fr 5fr;  grid-gap: 20px;}

Hasta ahora, tenemos nuestro diseño ordenado y nuestros enlaces configurados. A continuación, tengamos en cuenta el desbordamiento que podría derramarse fuera de nuestro contenedor y asegurémonos de que la navegación y la galería sean desplazables:

.wrapper {  display: grid;  grid-template-columns: 1fr 5fr;  grid-gap: 10px;  overflow: hidden;  height: 100vh; }.gallery {  overflow: scroll;}.lil-nav {  overflow-y: scroll;  overflow-x: hidden;}  

Ahora podemos desplazarnos por cada imagen en la galería, pero si se trata de un sitio web de producción, probablemente querríamos asegurarnos de que la gente pueda desplazarse por este carrusel con un poco más de facilidad. Trent Walton escribió sobre este mismo problema hace varios años y creo que siempre vale la pena tenerlo en cuenta.

A continuación, centrémonos en la captura de carrusel de cada imagen de la galería. Para hacer eso necesitaremos usar la propiedad scroll-snap-typey scroll-snap-aligncomo esta:

.gallery {  overflow: scroll;  scroll-snap-type: x mandatory;}.gallery__img {  scroll-snap-align: start;  margin-bottom: 10px;}

Ahora intenta desplazarte por la galería del lado derecho nuevamente:

Si desea obtener más información sobre estas propiedades, le recomendamos encarecidamente este artículo sobre el ajuste práctico de desplazamiento de CSS que profundiza en el meollo de estas propiedades.

¡Tenemos un carrusel bastante utilizable! A partir de aquí, todo lo que tenemos que hacer es ordenar el diseño porque la imagen de la galería no ocupa toda la altura de la pantalla. Para hacer eso podemos usar object-fity darle a cada imagen una min-heightunidad vh, así:

.gallery__img {  scroll-snap-align: start;  margin-bottom: 10px;  min-height: 100vh;  object-fit: cover;}

Ahora las imágenes de la gran galería siempre tendrán el tamaño completo de la pantalla y se escalarán para ocupar el ancho y el alto. Sigamos adelante y abordemos el estilo de las pequeñas imágenes de navegación:

.lil-nav {  overflow-y: scroll;  overflow-x: hidden;}.lil-nav a {  height: 200px;  display: flex;  margin-bottom: 10px;}.lil-nav__img {  object-fit: cover;}

Al principio, hice que este pequeño navegador también actuara como un carrusel, pero se sentía muy extraño. Por ahora mantendré el scrollcomportamiento predeterminado. Sin embargo, en la demostración anterior, intente hacer clic en una imagen. ¿Observas cómo salta inmediatamente a esa imagen en el carrusel? Sería bueno si pudiéramos animar un poco esa transición, ¡y podemos hacerlo!

.gallery {  overflow: scroll;  scroll-snap-type: x mandatory;  scroll-behavior: smooth;} 

Esa scroll-behaviorpropiedad CSS es muy útil para esto y ahora todo se animará si haces clic en uno de los elementos de navegación:

Genial, ¿eh? Una pequeña cosa más que podríamos hacer aquí es colocar un filtro en los elementos de navegación para hacerlos en blanco y negro y luego animarlos al pasar el mouse:

.lil-nav__img {  object-fit: cover;  filter: saturate(0);  transition: 0.3s ease all;}.lil-nav__img:hover {  transform: scale(1.05);  filter: saturate(1);}

Estoy seguro de que podríamos hacer mucho más aquí, ¡pero creo que esto funciona bastante bien!

Incluso podríamos agregar un poquito de JavaScript a la mezcla para mostrar qué imagen está activa, pero creo que la gente lo sabe con solo mirar la galería.

¡Eso es todo! Ahora tenemos un carrusel que es bastante bueno para la mejora progresiva y significa que no tenemos que cargar una biblioteca de JavaScript ni escribir mucho más código del que realmente necesitamos.

Hacer que el carrusel responda...

Sin embargo, vayamos un paso más allá y hagamos que este tipo responda. Lo que queremos hacer es invertir el orden de nuestra cuadrícula moviendo todos nuestros estilos actuales a una consulta de medios que solo se activa en pantallas más grandes.

Es posible que desee abrir esta demostración en una nueva pestaña y disminuir/aumentar el tamaño del navegador para ver los cambios:

Si carga esta demostración en un dispositivo móvil, debería ver cómo el diseño cambia entre los dos modos. Esto se hace mediante el uso de una única consulta de medios sobre el .wrapperelemento. Tenga en cuenta que estamos usando Sass:

$large: 1200px;.wrapper {  overflow: hidden;  height: 100vh;  display: grid;  grid-template-rows: 2fr 1fr;  grid-gap: 10px;  @media screen and (min-width: $large) {    grid-template-columns: 1fr 5fr;    grid-template-rows: auto;  }}

Agreguemos uno también en la navegación. Pero esta vez, necesitamos decirle a la navegación que comience en la segunda fila para que se mueva al final de la pantalla:

.lil-nav {  overflow-x: scroll;  overflow-y: hidden;  display: flex;  grid-row-start: 2;  @media screen and (min-width: $large) {    overflow-y: scroll;    overflow-x: hidden;    display: block;    grid-row-start: auto;  }}

Con la galería necesitamos cambiar para scroll-typepantallas más grandes e invertir la overflowpropiedad también:

.gallery {  overflow-x: scroll;  overflow-y: hidden;  scroll-snap-type: x mandatory;  scroll-behavior: smooth;  display: flex;  @media screen and (min-width: $large) {    display: block;    overflow-y: scroll;    overflow-x: hidden;    scroll-snap-type: y mandatory;  }}

¡Esa es la mayor parte de los cambios que hemos tenido que hacer y me gusta bastante! Si quisiéramos que esto estuviera listo para producción, pensaríamos en la accesibilidad (por ejemplo, probablemente no queramos que los lectores de pantalla lean todas las imágenes tanto en el navegador como en la galería). Luego está el rendimiento: podríamos considerar la carga diferida para que las imágenes solo se representen cuando sean necesarias.

De cualquier manera, ¡este es un buen comienzo!