¿Cómo se puede hacer un control deslizante de imagen de JavaScript desde cero? ¿Cómo funcionan realmente las presentaciones de imágenes de JavaScript? ¿Realmente necesitamos JavaScript para carruseles hoy en día? CSS ha recorrido un largo camino, y en realidad es posible hacer un control deslizante bastante decente con CSS puro.
Sin embargo, todavía está muy limitado en lo que puede hacer solo con CSS, por lo que si desea algo más complejo, deberá crear su control deslizante de imagen usando JavaScript.
Pero entonces su siguiente pregunta es, ¿cómo construir uno? Bueno, no temas, amigo mío, porque al final de esta publicación, sabrá cómo crear un control deslizante de imagen en JavaScript (¡se proporciona el código fuente!), incluidos los botones de navegación y las migas de pan.
¡Vamos a hacerlo!
Cree la estructura para el control deslizante de imágenes con HTML
Primero, tendremos que crear la estructura básica para el deslizador de imágenes. El html para nuestro control deslizante de imagen se verá así:
<div class="container">
<div class="slider">
<div class="slider__slides">
<div class="slider__slide active"></div>
<div class="slider__slide"></div>
<div class="slider__slide"></div>
<div class="slider__slide"></div>
</div>
</div>
</div>
Entonces, el contenedor es solo el elemento que contiene la futura presentación de diapositivas de imágenes de JavaScript. Esto puede ser absolutamente cualquier parte de su sitio, pero solo opté por un flexbox simple:
.container {
display: flex;
align-items: center;
justify-content: center;
}El siguiente es el elemento deslizante principal. Esto mantendrá las diapositivas de imágenes y los elementos de navegación:
.slider {
display: block;
position: relative;
width: 100%;
max-width: 900px;
margin: 10px;
background-color: white;
overflow: hidden;
}Puede ajustar el tamaño de cualquier manera que haga flotar su bote, solo asegúrese de que se le haya aplicado una propiedad de posición.
También tenemos un contenedor div para las diapositivas, slider__slides y cuatro elementos slider__slide, que he diseñado así:
.slider__slides {
width: 100%;
padding-top: 66%;
}.slider__slide {
display: flex;
align-items: center;
justify-content: center;
font-size: 50px;
font-weight: bold;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: lemonchiffon;
transition: 1s;
opacity: 0;
}.slider__slide.active {
opacity: 1;
}
Ahora, aquí es donde se pone un poco interesante. Establecer padding-top en un porcentaje en slider__slides mantendrá su relación de aspecto.
Las diapositivas en sí mismas están posicionadas absolutamente, arriba y a la izquierda son 0, mientras que el ancho y la altura son 100%.
Esto significa que cada diapositiva llenará completamente el primer elemento principal que tiene una propiedad de posición aplicada (es por eso que dije que se asegure de hacerlo con el elemento deslizante).
Esto también significa que las cuatro diapositivas se apilan directamente una encima de la otra. Tenga en cuenta que he establecido la opacidad de cada diapositiva en 0; esto las hace transparentes. Pero la parte .slider__slide.active significa que cualquier elemento que tenga las clases slider__slide y active tendrá una opacidad de 1, lo que hará visible la diapositiva activa.
Esto es lo que nos da:
Como era de esperar, solo podemos ver la diapositiva 1 en este momento, con su fondo amarillo pálido (lemonchiffon, para ser precisos). Ahora agreguemos las imágenes…
Poner imágenes en las presentaciones de diapositivas de imágenes de JavaScript
Hay algunas formas de hacer un control deslizante de imagen en JavaScript.
Una es agregar las imágenes usando la propiedad de fondo css y tener una clase separada para cada imagen. Otra forma es tener solo una diapositiva y cambiar su imagen de fondo directamente con JS.
Sin embargo, el enfoque que tomaremos aquí es usar un elemento img dentro de cada diapositiva, como este:
<div class="slider__slide active">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/56/Shakuzoji_Kuginuki_Jizo-3586.jpg/800px-Shakuzoji_Kuginuki_Jizo-3586.jpg" alt="A rooftop in Japan" />
</div>
Agregué una imagen para cada diapositiva, pero solo podemos ver la primera imagen, la que tiene la clase activa:
Así que ahora agreguemos los elementos de navegación para que las personas puedan recorrer las imágenes en el control deslizante.
Agregar botones de avance y retroceso al control deslizante de imágenes de JavaScript
Los usuarios buscan los botones de navegación en los extremos izquierdo y derecho de los controles deslizantes, ¡así que ahí es donde los colocaremos!
Primero agreguemos estos elementos al marcado, dentro del control deslizante, pero debajo de slider__slides:
<div class="container">
<div class="slider">
<div class="slider__slides">
</div>
<div id="nav-button--prev" class="slider__nav-button"></div>
<div id="nav-button--next" class="slider__nav-button"></div>
</div>
</div>
Además de la clase slider__nav-button, cada botón tiene una identificación única: mientras creamos nuestro control deslizante de imagen con JavaScript, necesitaremos estas identificaciones para poder seleccionar estos elementos dentro de nuestro código JS.
Puedes diseñar tus botones como quieras, por supuesto. Personalmente, lo mantendré simple con un cuadro gris. Oye, a veces la opción simple es la mejor:
.slider__nav-button {
position: absolute;
height: 70px;
width: 70px;
background-color: #333;
opacity: .8;
cursor: pointer;
}Establecí la opacidad en .8, por lo que los botones serán un poco transparentes y no bloquearán por completo lo que haya detrás de ellos. Y como queremos que se pueda hacer clic en ellos, necesitamos cursor: puntero para que el usuario sepa que puede hacer clic en él.
Ahora, debido a que estos dos botones están en lados diferentes del control deslizante, necesitaremos usar CSS ligeramente diferente para colocar cada uno. Podemos usar los ids para eso:
#nav-button--prev {
top: 50%;
left: 0;
transform: translateY(-50%);
}#nav-button--next {
top: 50%;
right: 0;
transform: translateY(-50%);
}
Establecer la parte superior en 50% colocará la parte superior del elemento a la mitad del padre. Por lo tanto, no estará perfectamente centrado verticalmente, estará un poco más abajo de lo que debería estar.
La solución es agregar también transform: translateY(-50%);. Cuando traduce por un porcentaje, mueve el elemento por una proporción de su propio tamaño. Entonces, -50% centrará perfectamente el botón, sin importar cuál sea su altura. ¡Buen truco!
Agregar flechas a los botones de navegación con CSS
Por el momento, nuestros botones de navegación son solo cuadros grises; debemos indicar que estos son botones de alguna manera. Hay muchas maneras de hacer esto: puede usar una imagen de una flecha, un SVG o simplemente escribir “Anterior” y “Siguiente”. Pero aquí hay otra manera:
#nav-button--prev::after,
#nav-button--next::after {
content: "";
position: absolute;
border: solid white;
border-width: 0 4px 4px 0;
display: inline-block;
padding: 3px;
width: 40%;
height: 40%;
}
Esto usa el pseudoelemento after, lo que significa que podemos agregarlo a la presentación de diapositivas de imágenes de JavaScript sin tener que agregar más html. Crea un cuadro con un borde blanco sólido solo a lo largo de sus bordes derecho e inferior.
Todo lo que tenemos que hacer ahora es rotar los cuadros para que los bordes se vean como flechas y usar ‘traducir’ para asegurarnos de que estén centrados dentro del botón:
#nav-button--next::after{
top: 50%;
right: 50%;
transform: translate(25%, -50%) rotate(-45deg);
}#nav-button--prev::after {
top: 50%;
right: 50%;
transform: translate(75%, -50%) rotate(135deg);
}
Y también agreguemos una consulta de medios para reducir un poco estos botones en pantallas más pequeñas:
@media screen and (max-width: 640px) {
.slider__nav-button {
height: 40px;
width: 40px;
}
}Si juntamos todo esto, esto es lo que obtenemos:
Bien, ¡está empezando a parecerse a un control deslizante! Hacia adelante…
Agregue migas de pan a la presentación de diapositivas de imágenes de JavaScript
Las migas de pan (o puntos de navegación, viñetas o cualquier otra cosa que quieras llamarlos) son bastante fáciles de agregar. Primero actualicemos nuestro HTML una vez más:
<div class="container">
<div class="slider">
<div class="slider__slides">
</div>
<div id="nav-button--prev" class="slider__nav-button"></div>
<div id="nav-button--next" class="slider__nav-button"></div>
<div class="slider__nav">
<div class="slider__navlink active"></div>
<div class="slider__navlink"></div>
<div class="slider__navlink"></div>
<div class="slider__navlink"></div>
</div>
</div>
</div>
</div>
Ahora tenemos un elemento slider__nav, que contiene cuatro divs slider__navlink, uno para cada diapositiva. El primero también tiene una clase activa agregada, que podemos usar para hacer que la ruta de navegación activa se destaque del resto.
Tradicionalmente, las migas de pan como estas van en la parte inferior de un control deslizante:
.slider__nav {
position: absolute;
bottom: 3%;
left: 50%;
transform: translateX(-50%);
text-align: center;
}Colocamos el contenedor para las migas de pan a un 3 % de la parte inferior del control deslizante de la imagen y usamos el mismo truco de centrado que usamos con los botones, solo que esta vez horizontalmente. Ahora para las migas de pan en sí:
.slider__navlink {
display: inline-block;
height: 20px;
width: 20px;
border-radius: 50%;
border: 1px #fff solid;
background-color: #333;
opacity: .8;
margin: 0 10px 0 10px;
cursor: pointer;
}.slider__navlink.active {
background-color: #fff;
border: 1px #333 solid;
}
Cosas bastante simples aquí: simplemente use el radio del borde para convertirlos en círculos y establezca el color de fondo en blanco en la diapositiva activa. El resto se rellena con el mismo gris utilizado en los botones.
Esto es lo que obtenemos:
Ya casi llegamos, ¡solo tenemos que hacer que estos botones realmente hagan algo! Usaremos JavaScript para eso.
Poner el JavaScript en las presentaciones de imágenes
Primero, simplifiquemos el manejo de nuestras diapositivas y migas de pan usando JS:
let slides = document.getElementsByClassName("slider__slide");
let navlinks = document.getElementsByClassName("slider__navlink");La primera línea pasa por nuestro marcado, encuentra cada elemento llamado slider__slide y almacena un puntero en una matriz llamada slides. La siguiente línea hace lo mismo con nuestros elementos de migas de pan, esta vez colocándolos en una matriz llamada enlaces de navegación.
También necesitamos realizar un seguimiento de qué diapositiva está actualmente activa, así que hagamos una variable para eso:
let currentSlide = 0;
Establecí esto en 0 porque, como sabrá, en JavaScript, las matrices se indexan desde 0, no desde 1. Entonces, nuestra primera diapositiva está en diapositivas[0]el segundo está en diapositivas[1]etcétera.
Ahora necesitamos agregar detectores de eventos a cada uno de nuestros botones:
document.getElementById("nav-button--next").addEventListener("click", () => {
changeSlide(currentSlide + 1)
});
document.getElementById("nav-button--prev").addEventListener("click", () => {
changeSlide(currentSlide - 1)
});Cuando un usuario hace clic en uno de estos botones, nuestro código fuente JavaScript del control deslizante de imágenes llamará a una función llamada changeSlide (que crearemos en un minuto) y pasará un argumento: currentSlide + 1 para el botón de avance y currentSlide – 1 para el del revés. Eso nos permite saber a qué diapositiva está tratando de moverse el usuario, para que podamos poner la clase activa en esa diapositiva y sacarla de la diapositiva actual.
Como puede ver aquí, envolví la llamada de función dentro de una función anónima; esto es necesario cuando desea pasar un argumento usando un detector de eventos. Por ejemplo, esto no funciona:
document.getElementById("nav-button--next").addEventListener("click", changeSlide(currentSlide + 1));Por eso es que tienes que poner la llamada de función dentro del bloque () => { }.
Crear la función de JavaScript que cambiará la diapositiva
Así es como se ve la función changeSlide():
function changeSlide(moveTo) {
if (moveTo >= slides.length) {moveTo = 0;}
if (moveTo < 0) {moveTo = slides.length - 1;}slides[currentSlide].classList.toggle("active");
navlinks[currentSlide].classList.toggle("active");
slides[moveTo].classList.toggle("active");
navlinks[moveTo].classList.toggle("active");
currentSlide = moveTo;
}
Desglosemos esto paso a paso:
- changeSlide toma un argumento, moveTo, que es el número de la diapositiva a la que desea cambiar.
- La primera línea verifica si moveTo es igual o mayor que slides.length; eso significaría que estamos en la diapositiva final e intentando avanzar. En este caso, estableceremos moveTo en 0, lo que nos llevará de vuelta a la primera diapositiva.
- La siguiente línea hace lo mismo si el usuario intenta retroceder desde la primera diapositiva; simplemente lo llevaremos a la última diapositiva.
- Las siguientes cuatro líneas usan las diapositivas y las matrices de enlaces de navegación que creamos anteriormente. Al usar classList.toggle(“active”), nuestro código eliminará la clase activa de la diapositiva actual y la agregará a la que estamos tratando de mover.
- Finalmente, configuramos currentSlide para que sea igual a moveTo, ya que esa es la diapositiva activa ahora.
Como recordará de antes, agregamos transición: 1s a nuestro elemento slider__slides. Esto significa que el cambio en la opacidad que se activa cuando agregamos o eliminamos la clase activa tarda 1 segundo en completarse, lo que brinda un agradable efecto de aparición gradual.
Pero antes de ver el resultado final, solo hay una cosa más que debemos hacer…
Hacer que se pueda hacer clic en las migas de pan
¿Alguna vez trató de hacer clic en algo que pensó que se podía hacer clic, pero resultó que no se podía hacer clic? ¿Recuerdas ese sentimiento de decepción que se hinchó en tus entrañas? ¡No le hagamos eso a nuestros usuarios! Hagamos que sea fácil para ellos saltar de una diapositiva a otra haciendo clic en las migas de pan:
document.querySelectorAll('.slider__navlink').forEach((bullet, bulletIndex) => {
bullet.addEventListener('click', () => {
if (currentSlide !== bulletIndex) {
changeSlide(bulletIndex);
}
})
})Aquí hemos usado querySelectorAll para tomar todos los elementos slider__navlink, y luego estamos usando forEach para recorrerlos.
Entonces, en el primer bucle, la viñeta apuntará a la primera diapositiva y el índice de viñetas será igual a 0.
En el siguiente bucle, la viñeta apuntará a la segunda diapositiva y el índice de viñetas será igual a 1.
Etcétera.
La idea es que, si hacen clic en un botón, sabemos que quieren cambiar a deslizar bulletIndex, por lo que podemos pasar ese valor a nuestra función con changeSlide(bulletIndex).
Sin embargo, será mejor que primero verifiquemos si ya están en la diapositiva bulletIndex. No tiene sentido desvanecerse y luego volver a la misma diapositiva. Entonces, la declaración if garantiza que solo llamaremos a changeSlide, si currentSlide no es igual a bulletIndex.
El producto final
¡Está bien, hemos terminado! A continuación puedes ver con qué terminamos.
¿Puedes adivinar a qué famosa serie de videojuegos se deben estas imágenes?
- 100 puntos si puedes adivinar solo desde la primera imagen
- 75 puntos si aciertas en la segunda imagen
- 30 puntos si lo consigues en la tercera imagen
- 10 puntos si necesitas las cuatro imágenes para resolverlo
- 0 puntos si no sabes
Por supuesto, solo hemos arañado la superficie de lo que es posible al crear un control deslizante de imagen usando JavaScript. Tienes un buen marco aquí con el que puedes experimentar. Puede cambiar la forma, el estilo y la posición de estos elementos como lo necesite y, por supuesto, puede jugar con diferentes transiciones cuando se mueve entre diapositivas.
Pero si quieres hacer algo que no solo sea visualmente elegante sino también de gran rendimiento, ¿por qué reinventar la rueda? Eche un vistazo a fullPage.js y vea si es la herramienta para usted.
Como su nombre lo indica, fullPage.js lo ayuda a crear sitios web de desplazamiento a pantalla completa. Obtiene una variedad de efectos diferentes que impresionarán a sus visitantes, es realmente fácil de configurar y funciona con otros marcos y CMS, incluidos React y WordPress.
¡Échale un vistazo!
Artículos relacionados
Sobre el Autor:
warren davies es un desarrollador front-end con sede en el Reino Unido.
Puedes encontrar más de él en https://warrendavies.net
