Cómo hacer un slider solo con HTML y CSS

En un artículo anterior ya vimos cómo hacer un menú hamburguesa solo con HTML y CSS. En el artículo de hoy vamos a ver algo un poco más difícil, vamos a ver cómo hacer un slider solo con HTML y CSS; sin necesidad de usar JavaScript.

Un slider, o pase de diapositivas, es simplemente un efecto que consiste en mostrar una serie de imágenes acompañadas de una serie de textos que, por lo general, vienen a ser unos productos o servicios que queremos promocionar en nuestro sitio Web.

Cada imagen tiene que ser muy llamativa y ocupar un tamaño generoso en pantalla, y los textos han de ser grandes. Al cabo de unos segundos, esta imagen ha de dar paso a la siguiente imagen en una animación que resulte atractiva. Como se trata de productos o servicios que queremos promocionar, debemos de intentar llamar la atención del usuario con imágenes vistosas, textos grandes y efectos de animación.

Para poder realizar este efecto vamos a partir del siguiente código HTML:

<div class="wrapper">
  <div class="slider" id="slider">
    <ul class="slides">
      <li class="slide" id="slide1">
        <a href="#">
          <p class="caption">Texto llamativo</p>
          <img src="photo1.jpg" alt="photo 1">
        </a>
      </li>
      <li class="slide" id="slide2">
        <a href="#">
          <p class="caption">Texto llamativo</p>
          <img src="photo2.jpg" alt="photo 2">
        </a>
      </li>
      <li class="slide" id="slide3">
        <a href="#">
          <p class="caption">Texto llamativo</p>
          <img src="photo3.jpg" alt="photo 3">
        </a>
      </li>
      <li class="slide" id="slide4">
        <a href="#">
          <p class="caption">Texto llamativo</p>
          <img src="photo4.jpg" alt="photo 4">
        </a>
      </li>
      <li class="slide" id="slide5">
        <a href="#">
           <p class="caption">Texto llamativo</p>
           <img src="photo5.jpg" alt="photo 5">
        </a>
      </li>
      <li class="slide">
        <a href="#">
          <p class="caption">Texto llamativo</p>
          <img src="photo1.jpg" alt="photo 1">
        </a>
      </li>
    </ul>
    <ul class="slider-controler">
      <li><a href="#slide1">&bullet;</a></li>
      <li><a href="#slide2">&bullet;</a></li>
      <li><a href="#slide3">&bullet;</a></li>
      <li><a href="#slide4">&bullet;</a></li>
      <li><a href="#slide5">&bullet;</a></li>
    </ul>
  </div>
</div>

 

Obviamente puedes cambiar el nombre de los archivos de las imágenes y el texto de ejemplo de cada párrafo. Por limitaciones del diseño de este slider, la primera diapositiva y la última han de ser exactamente iguales. Por lo que asegúrate de colocar el mismo nombre de archivo y el mismo texto en el párrafo. También es importante que no intentes añadir o eliminar diapositivas hasta que entiendas perfectamente el código. Así que deberás de usar 5 imágenes, ya que este slider ha sido diseñado pensando en ese número de diapositivas. Es posible cambiarlo, pero requiere algo de trabajo, así que inicialmente te aconsejo que pruebes el código sin modificar el número de diapositivas.

Dentro del div#slider tenemos dos listas. La primera es una lista de diapositivas/slides cada una de las cuales tiene la imagen y el texto que se mostrará sobre dicha imagen. Ambos se encuentran dentro de un un enlace ya que obviamente cada diapositiva va a llevar al usuario a otra página cuando haga click en ella. La segunda lista, es una lista de enlaces con los clásicos puntitos para poder ir directamente a la diapositiva deseada. Obviamente, esta segunda lista es totalmente opcional.

Si quieres incluir más texto en cada diapositiva, puedes cambiar cada p.caption por un div.caption y colocar dentro de esos elementos div los textos que necesites.

A continuación tenemos el código CSS que necesitaremos para que se produzca la «magia»:

@keyframes slide {
	0% { transform: translateX(0); }
	10% { transform: translateX(0); }

	15% { transform: translateX(-100%); }
	30% { transform: translateX(-100%); }

	35% { transform: translateX(-200%); }
	50% { transform: translateX(-200%); }

	55% { transform: translateX(-300%); }
	70% { transform: translateX(-300%); }

	75% { transform: translateX(-400%); }
	90% { transform: translateX(-400%); }

	95% { transform: translateX(-500%); }
	100% { transform: translateX(-500%); }
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
	font-family: sans-serif;
}

.wrapper {
	max-width: 1200px;
	margin: 0 auto;
}

.slider {
	position: relative;
}

.slides {
	position: relative;
	display: flex;
	overflow: hidden;
}

.slide {
	width: 100vw;
	flex-shrink: 0;
	animation-name: slide;
	animation-duration: 20s;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
}

.slides:hover .slide {
	animation-play-state: paused;
}

.slide img {
	width: 100%;
	vertical-align: top;
}

.slide a {
	width: 100%;
	display: inline-block;
	position: relative;
}

.caption {
	color: white;
	text-shadow: 1px 1px black;
	font-size: 8vw;
	position: absolute;
	bottom: 8vw;
	right: 4vw;
}

.slide:target {
	animation-name: none;
	position: absolute;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	z-index: 50;
}

.slider-controler {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	text-align: center;
	padding: 5px;
	background-color: rgba(0,0,0,0.5);
	z-index: 100;
}

.slider-controler li {
	margin: 0 0.5rem;
	display: inline-block;
	vertical-align: top;
}

.slider-controler a {
	display: inline-block;
	vertical-align: top;
	text-decoration: none;
	color: white;
	font-size: 1.5rem;
}

@media only screen and (min-width: 1200px) {
	.slide {
		width: 1200px;
	}

	.caption {
		font-size: 96px;
		bottom: 96px;
		right: 50px;
	}
}

 

Tal y como se puede ver, la animación «slide» hace que las diapositivas se mueven hacia la izquierda de 100% de ancho en 100%. Como estamos usando 5 diapositivas, tenemos que mover las diapositivas 5 puestos hacia la izquierda. Si queremos añadir o eliminar diapositivas, obviamente tendremos que cambiar esta animación. Si nos fijamos bien en dicha animación, veremos que cada diapositiva permanece en pantalla un 15% del tiempo total de la animación, lo que hace un 75% del tiempo total de la animación. Cada cambio de diapositiva, supone un 5% del tiempo de la animación, lo que hace un 25% del tiempo total de la animación. Añadir o eliminar una diapositiva, implica por lo tanto recalcular estos porcentajes de tiempo asignado para que las transiciones entre diapositivas sean uniformes.

Cada diapositiva ocupa el 100% del ancho del dispositivo (width: 100vw). Esto funcionará perfectamente en dispositivos con pantallas pequeñas o medianas donde querremos que nuestro slider ocupe todo el ancho posible. Sin embargo en dispositivos con pantallas grandes, tendremos que usar una media query para indicar un tamaño máximo (en este caso estamos usando un máximo de 1200px). Para que todo funcione bien, deberemos de asegurarnos de haber eliminado margins y paddings por defecto con un reset.css o similar, o bien quitarlos a mano.

El texto de cada diapositiva está encima de la imagen usando position: absolute. De forma similar, cuando el usuario hace click en un circulito para ver alguna de las diapositivas (:target), dicha diapositiva pasa a colocarse por encima del slider, tapando al resto de diapositivas que en realidad se siguen animando. Esta es otra de las limitaciones de esta forma de hacerlo.

Cuando lo pruebes, ten en cuenta que la animación se detendrá si colocamos el ratón encima (:hover), pero no podemos hacer que se detenga donde queramos y puede suceder que se detenga a mitad cambio de diapositiva. Así que si no te gusta este funcionamiento, puedes eliminar el código CSS del :hover.

Limitaciones de este slider en HTML sin JavaScript

Obviamente, si por lo general se usa JavaScript para hacer los slider es por algo. Y es que con HTML5/CSS3 el resultado probablemente no sea exactamente el que nos gustaría. A modo de resumen, algunas limitaciones del ejemplo que os traigo en este artículo son:

• Las imágenes han de tener el mismo tamaño.
• La primera y la última diapositivas han de ser exactamente iguales.
• El ejemplo está pensado para 5 diapositivas; añadir o eliminar una diapositiva implica no solo modificar el código HTML, también es necesario recalcular los tiempos de la animación CSS.
• Si el usuario hace click en un circulito irá a la diapositiva deseada, pero la animación (aparentemente) se detendrá y no se podrá volver a reanudar (se podría hacer con un enlace a #, pero la diapositiva pausada ya no estará en sincronía con el resto de diapositivas y quedaría bastante mal).
• No tenemos las típicas flechitas de anterior/siguiente diapositiva.
• En los circulitos no queda claro que diapositiva estamos visualizando actualmente.
• Aunque, tal y como se muestra en el ejemplo, se puede implementar que la animación se pause al colocar el ratón encima, se puede pausar en mitad transición dejando visible media diapositiva. Así que si no te gusta puedes omitir está parte y no permitir pausar la animación al colocar el ratón encima.

Por lo demás es un slider bastante llamativo y sencillo de realizar. Con las mejoras que se van introduciendo en CSS es posible que poco a poco sea cada vez más fácil realizar este tipo de efectos sin necesidad de JavaScript. Otra opción, claro, es aprender JavaScript.