Cómo crear una simple presentación de diapositivas con el truco Checkbox de CSS

() translation by (you can also view the original English article)

Final product image — What You'll Be Creating

En este nuevo tutorial, aprenderemos cómo crear, desde cero, una presentación de diapositivas con imágenes totalmente funcional, responsiva y con miniaturas. Para lograrlo, no necesitaremos escribir ni una sola línea de JavaScript. De hecho, una vez más, solo utilizaremos HTML y CSS, ya que aprovechamos el «truco checkbox de CSS».

Nota: Este tutorial asume que estás familiarizado con esa técnica de CSS junto con los selectores avanzados de CSS (por ejemplo, el combinador general «sibling»). Si no has escuchado hablar de ellos antes, o necesitas un repaso, revisa los siguientes tutoriales:

Nuestra presentación de diapositivas con CSS responsiva

Aquí está la presentación de diapositivas que vamos a crear en este tutorial:

1. Empieza con el marcado en HTML

Para los propósitos de este ejercicio, tomaremos tres imágenes de Unsplash.

Luego, crearemos los correspondientes botones de radio que agruparemos bajo la palabra clave image:

1	<input type="radio" id="image1" name="image" checked>
2	<input type="radio" id="image2" name="image">
3	<input type="radio" id="image3" name="image">

A continuación, pondremos dentro de un contenedor los elementos .featured-wrapper y .thumb-list.

El elemento .featured-wrapper contendrá tres listas:

La primera lista tendrá las imágenes de la presentación de diapositivas. Únicamente aparecerá una sola imagen a la vez.
Las otras dos listas, que son idénticas, se usarán para navegar entre las imágenes/diapositivas. Ambas listas contendrán etiquetas cuyos valores for coincidan con los valores id de los botones de radio mencionados.

Sugerencia: En nuestro ejemplo, asociaremos un botón de radio con más de una etiqueta. Es perfectamente válido.

El elemento .thumb-list también incluirá las imágenes de la presentación de diapositivas junto con sus descripciones. No obstante, a diferencia de las imágenes del elemento .featured-list, estas imágenes siempre estarán visibles y se usarán para la navegación con las miniaturas.

En resumen, nuestra presentación de diapositivas ofrecerá a los usuarios la posibilidad de cambiar entre las diapositivas mediante puntos, flechas y miniaturas. ¡Genial!

La estructura HTML final

De forma predeterminada, la primera imagen debería ser visible/activa. Teniendo esto en cuenta, añadiremos el atributo checked al primer botón de radio.

Teniendo todo junto, aquí está la estructura de nuestro contenedor:

<div class="container">
  <div class="featured-wrapper">
    <ul class="featured-list">
      <li>
        <figure>
          <img src="IMG_SRC" alt="">
        </figure>
      </li>
      <!-- other two list items here -->
    </ul>
    <ul class="arrows">
      <li>
        <label for="image1"></label>
      </li>
      <li>
        <label for="image2"></label>
      </li>
      <li>
        <label for="image3"></label>
      </li>
    </ul>
    <ul class="dots">
      <li>
        <label for="image1"></label>
      </li>
      <li>
        <label for="image2"></label>
      </li>
      <li>
        <label for="image3"></label>
      </li>
    </ul>
  </div>
  <ul class="thumb-list">
    <li>
      <label for="image1">
        <img src="IMG_SRC" alt="">
        <span class="outer">
          <span class="inner">...</span>
        </span>
      </label>
    </li>
    <!-- other two list items here -->
  </ul>
</div>

Nota: En cada etiqueta dentro de la lista .thumb-list, no utilizo los elementos figure y figcaption porque el Validador W3C nos arrojará un error. Nos limitaremos a los elementos en línea.

2. Define los estilos

Por lo que respecta a los estilos, primero ocultaremos visualmente los botones de radio moviéndolos fuera de la pantalla:

input[type="radio"] {
  position: absolute;
  bottom: 0;
  left: -9999px;
}

Nota: Añadí la propiedad botton: 0 para evitar que el navegador salte a la parte superior de la página cada vez que se haga clic en una etiqueta. No es el enfoque ideal, pero al parecer cumple con el trabajo. Como alternativa, siendo una solución más estable, podría haber establecido display: none, pero esto no es recomendable debido a las restricciones de accesibilidad del teclado. De manera específica, ese estilo evita que las teclas de flecha cambien el botón de radio seleccionado.

Como siempre, nuestro contenedor tendrá un ancho máximo con el contenido centrado de manera horizontal.

.container {
  max-width: 700px;
  padding: 0 20px;
  margin: 0 auto;
}

Imágenes grandes

De forma predeterminada, todas las imágenes destacadas se apilarán una encima de otra. Todas estarán ocultas, excepto la imagen asociada al botón de radio marcado.

Para apilar las imágenes, por sorprendente que parezca, no utilizaremos la propiedad común position. Normalmente, lo que esperarías es que convirtamos las imágenes en elementos posicionados de manera absoluta. Pero ese método tiene una gran desventaja: los elementos absolutos se eliminan del flujo normal del documento, por lo que tendríamos que encontrar una manera de preservar la relación de aspecto de las imágenes. Por ejemplo, una solución rústica y poco elegante podría ser añadir una altura fija al contenedor de las imágenes.

Aquí es donde las nuevas adiciones de CSS como las rejillas (CSS Grid) vienen al rescate, especialmente si solo estás interesado en los navegadores modernos. Así que primero, haremos que la lista se comporte como un contenedor de rejilla, luego posicionaremos sus elementos en la misma celda dándoles grid-row: 1 y grid-column: 1.

Aquí está el CSS correspondiente:

.featured-wrapper .featured-list {
  display: grid;
}

.featured-wrapper .featured-list li {
  grid-column: 1;
  grid-row: 1;
  opacity: 0;
  transition: opacity 0.25s;
}

Los puntos

La navegación con los puntos estará absolutamente posicionada y situada en la parte inferior del elemento .feature-wrapper. Cada una de sus etiquetas tendrá la apariencia de un círculo, de esta forma:

Aquí están los estilos relacionados:

/*CUSTOM VARIABLES HERE*/

.featured-wrapper {
  position: relative;
}

.featured-wrapper .dots {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
}

.featured-wrapper .dots li:not(:last-child) {
  margin-right: 8px;
}

.featured-wrapper .dots label {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 1px solid var(--white);
  transition: background 0.25s;
}

.featured-wrapper .dots label:hover {
  background: currentColor;
}

Las flechas

Las flechas de navegación estarán posicionadas de forma absoluta en el interior del elemento .feature-wrapper:

Ten en cuenta que solo aparecerán las flechas de la etiqueta asociada al botón de radio marcado. Para crearlas, utilizaremos los pseudoelementos ::before y ::after de la etiqueta objetivo.

Aquí están los estilos requeridos:

/*CUSTOM VARIABLES HERE*/

.featured-wrapper .arrows label::before,
.featured-wrapper .arrows label::after {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  color: var(--black);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 24px 24px;
  background-color: var(--white);
  opacity: 0.5;
  transition: opacity 0.25s;
}

.featured-wrapper .arrows label::before {
  left: 10px;
}

.featured-wrapper .arrows label::after {
  right: 10px;
}

Las miniaturas

Cada miniatura cubrirá un tercio del ancho del elemento principal, de esta manera:

Para posicionar el texto arriba de su imagen, en lugar de utilizar el posicionamiento tradicional de CSS, aprovecharemos el truco de la rejillas de CSS (CSS Grid) que aprendimos anteriormente.

Convertiremos la etiqueta en un elemento de rejillas y obligaremos a los elementos secundarios a cubrir sus dimensiones completas. Por defecto, únicamente aparecerá el título asociado con el botón de opción marcado. Además, su contenido será centrado de manera horizontal y vertical gracias a las rejillas de CSS nuevamente.

Aquí están los estilos objetivo:

/*CUSTOM VARIABLES HERE*/

.thumb-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-column-gap: 20px;
  margin-top: 20px;
}

.thumb-list label {
  display: grid;
}

.thumb-list img,
.thumb-list .outer {
  grid-column: 1;
  grid-row: 1;
}

.thumb-list .outer {
  display: grid;
  place-items: center;
  transition: background 0.25s;
}

.thumb-list .inner {
  font-size: 18px;
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.25s;
}

3. El truco de Checkbox: Cambiar entre diapositivas

¡Ahora vamos a divertirnos! Empujaremos los límites de CSS gracias al truco de checkbox e imitaremos el evento click de JavaScript.

Por tanto, cada vez que hagamos clic en una imagen en miniatura, en un punto o en una flecha (es decir, cuando se active), va a ocurrir lo siguiente:

La diapositiva activa se hará visible.
El punto activo recibirá un color blanco de fondo.
Aparecerá el título de la imagen en miniatura activa.
Se mostrarán las flechas anterior y siguiente de la diapositiva activa. Estas se enlazarán con su diapositiva anterior y su siguiente diapositiva, respectivamente.

Aquí están los estilos que manejan esta funcionalidad:

/*CUSTOM VARIABLES HERE*/

[id="image1"]:checked ~ .container .featured-list li:nth-child(1),
[id="image2"]:checked ~ .container .featured-list li:nth-child(2),
[id="image3"]:checked ~ .container .featured-list li:nth-child(3),
[id^="image"]:checked ~ .container .arrows [for^="image"]:hover::before,
[id^="image"]:checked ~ .container .arrows [for^="image"]:hover::after {
  opacity: 1;
}

[id="image1"]:checked ~ .container .arrows [for="image3"]::before,
[id="image2"]:checked ~ .container .arrows [for="image1"]::before,
[id="image3"]:checked ~ .container .arrows [for="image2"]::before {
  content: ’’; 
  background-image: url(arrow-prev-slideshow.svg);
}

[id="image1"]:checked ~ .container .arrows [for="image2"]::after,
[id="image2"]:checked ~ .container .arrows [for="image3"]::after,
[id="image3"]:checked ~ .container .arrows [for="image1"]::after {
  content: ’’; 
  background-image: url(arrow-next-slideshow.svg);
}

[id="image1"]:checked ~ .container .dots [for="image1"],
[id="image2"]:checked ~ .container .dots [for="image2"],
[id="image3"]:checked ~ .container .dots [for="image3"] {
  background: currentColor;
}

[id="image1"]:checked ~ .container [for="image1"] .outer,
[id="image2"]:checked ~ .container [for="image2"] .outer,
[id="image3"]:checked ~ .container [for="image3"] .outer {
  background: var(--overlay);
}

[id="image1"]:checked ~ .container [for="image1"] .inner,
[id="image2"]:checked ~ .container [for="image2"] .inner,
[id="image3"]:checked ~ .container [for="image3"] .inner {
  opacity: 1;
  transform: none;
}

Quizá te lleve algún tiempo entender cómo funcionan los estilos mencionados anteriormente. Si este es el caso, ¡el inspector de los navegadores es tu mejor amigo!

Conclusión

¡Eso es todo, amigos! En este tutorial, hemos logrado crear una presentación de diapositivas con miniaturas responsiva, usando únicamente CSS y aprovechando el «truco checkbox de CSS». Esperamos que hayas disfrutado de este ejercicio y que lo incorpores en un próximo proyecto.

Aquí tienes un recordatorio de lo que hemos creado:

Como una última reflexión, diría que sin duda, la técnica del truco checkbox de CSS es una gran forma para mejorar tu conocimiento de CSS. Por otro lado, en un proyecto real, debemos ser conscientes de sus limitaciones (accesibilidad, marcado) y de cuándo vale la pena usarlo en lugar de las alternativas de JavaScript.

¿Alguna vez has creado algo interesante con el truco de checkbox? ¡Haznos saber!

Lecturas adicionales

Revisa estos tutoriales para inspirarte con las poderosas presentaciones de diapositivas que puedes crear, personalizando los populares plugins de jQuery: