Mencionamos una forma de hacer un carrusel solo de CSS en un número reciente del boletín y pensé que un artículo más detallado sería interesante y captaría algunos de mis pensamientos sobre cómo hacer uno.
Entonces, esto es lo que estamos haciendo hoy:
¡No hay JavaScript aquí, 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.
Está bien para empezar, tenemos que centrarnos en el marcado. El diseño incluye una navegación a la izquierda compuesta por imágenes y una gran galería de imágenes a la derecha que nos permite desplazarnos por cada imagen individualmente. También necesitaremos un contenedor para ayudarnos a organizar el diseño:
<div class="wrapper">
<nav class="lil-nav"></nav>
<div class="gallery"></div>
</div>A continuación, ¡podemos agregar imágenes! Para este pequeño ejemplo, revisé nuestra lista de sitios con imágenes de alta calidad que puede usar de forma gratuita y opté por Unsplash.
Después de guardar imágenes con el administrador de activos de CodePen, comencé a agregar las URL al nav elemento:
<nav class="lil-nav">
<a href="https://css-tricks.com/how-to-make-a-css-only-carousel/#image-1">
<img class="lil-nav__img" src="https://css-tricks.com/how-to-make-a-css-only-carousel/..." alt="Yosemite" />
</a>
<a href="https://css-tricks.com/how-to-make-a-css-only-carousel/#image-2">
<img class="lil-nav__img" src="https://css-tricks.com/how-to-make-a-css-only-carousel/..." alt="Basketball hoop" />
</a>
<!-- more images go here -->
</nav>Mira que el href a cada uno de estos enlaces apunta a un ID? Eso es porque si miramos la demostración nuevamente, queremos poder hacer clic en una imagen y luego queremos que salte a la versión más grande de esa imagen en la galería de la derecha.
Entonces, ahora podemos comenzar a agregar estas imágenes a la galería grande también …
<div class="gallery">
<img class="gallery__img" id="image-1" src="https://css-tricks.com/how-to-make-a-css-only-carousel/..." alt="Yosemite" />
<img class="gallery__img" id="image-2" src="https://css-tricks.com/how-to-make-a-css-only-carousel/..." alt="Basketball hoop" />
<!-- more images go here -->
</div>Hábil. Lo siguiente es la parte divertida: peinar a este chico malo. Podemos usar un diseño de cuadrícula el padre .wrapper y establezca algunos valores predeterminados inteligentes para img elemento:
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 asegúrese de que el navegador 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 este fuera un sitio web de producción probablemente querríamos asegurarnos de que la gente pueda pasar este carrusel un poco más fácilmente. 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 instantánea del carrusel de cada imagen de la galería. Para hacer eso, necesitaremos usar el scroll-snap-type y scroll-snap-align propiedad como esta:
.gallery {
overflow: scroll;
scroll-snap-type: x mandatory;
}
.gallery__img {
scroll-snap-align: start;
margin-bottom: 10px;
}Ahora intente desplazarse por la galería en el lado derecho nuevamente:
Si desea obtener más información sobre estas propiedades, le recomiendo 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 útil! A partir de aquí, todo lo que tenemos que hacer es ordenar el diseño porque la imagen de la galería no tiene la altura completa de la pantalla. Para hacer eso podemos usar object-fit y dale a cada imagen un min-height con el vh unidad, así:
.gallery__img {
scroll-snap-align: start;
margin-bottom: 10px;
min-height: 100vh;
object-fit: cover;
}Ahora, las imágenes de la galería grande 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 sintió realmente extraño. Solo mantengo el predeterminado scroll comportamiento por ahora. Sin embargo, en esa demostración anterior, intente hacer clic en una imagen. ¿Notas cómo salta a esa imagen en el carrusel de inmediato? Sería bueno si pudiéramos animar un poco esa transición, ¡y podemos!
.gallery {
overflow: scroll;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
}Ese scroll-behavior La propiedad CSS es muy útil para esto y ahora todo se animará si hace 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 funciona bastante bien!
Incluso podríamos agregar un poco 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! Ahora tenemos un carrusel que es bastante bueno para la mejora progresiva y significa que no tenemos que cargar una biblioteca de JavaScript o escribir mucho más código del que realmente necesitamos.
Haciendo que el carrusel responda…
Sin embargo, vayamos un paso más allá y hagamos que este capítulo 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 cambia el diseño entre los dos modos. Esto se hace mediante una consulta de medios única en el .wrapper elemento. 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 en la navegación también. Pero esta vez, necesitamos decirle a la navegación que comience en la segunda fila para que se mueva a la parte inferior 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 tenemos que cambiar el scroll-type para pantallas más grandes e invierta el overflow propiedad 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 preparar esta producción, pensaríamos en la accesibilidad (por ejemplo, probablemente no queremos 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 rendericen cuando sean necesarias.
De cualquier manera, ¡este es un buen comienzo!