Cómo crear un deslizador de imágenes con JavaScript para mejorar su sitio web

¿Te has encontrado alguna vez en la situación de querer mostrar varias imágenes/vídeos en una sección de una página web pero no quieres ocupar mucho espacio? ¿Quiere añadir interactividad a sus páginas web o hacerlas más atractivas?

Un deslizador de imágenes puede ahorrarte la lucha. En este artículo, vamos a definir un control deslizante de imagen, los requisitos previos de la creación de un control deslizante de imagen, y cómo crear uno usando HTML, JavaScript y CSS.

¿Qué es un deslizador de imágenes?

Los sliders son carruseles o pases de diapositivas que muestran textos, imágenes o vídeos. Este artículo se centrará en los sliders de imágenes. La mayoría de los desarrolladores web utilizan sliders en la página de inicio para promocionar ofertas o la información más importante.

Estas son algunas de las razones por las que debería utilizar sliders en sus páginas web.

Mejorar la experiencia del usuario: Una página web ideal debe ser compacta para que los usuarios finales no tengan que desplazarse y desplazarse para obtener datos importantes. Si tiene varias imágenes, puede ahorrar a los usuarios la molestia de desplazarse mostrándolas en un deslizador.
Atractivo visual: La mayoría de los usuarios de un sitio web no pasan mucho tiempo en una página sencilla. Puede mejorar el atractivo visual con sliders y animaciones.
Ahorra espacio: Si tienes unas 20 imágenes que quieres mostrar en tu página web, pueden ocupar mucho espacio. Crear un slider te permitirá ahorrar espacio y que los usuarios puedan acceder a todas ellas.
Mostrar contenido dinámico: Puede utilizar deslizadores para mostrar contenido dinámico, como incrustaciones de redes sociales, blogs y noticias.

Requisitos previos para crear un deslizador de imágenes

Conocimientos básicos de HTML: Describiremos aquí la estructura del deslizador. Usted debe sentirse cómodo trabajando con varias etiquetas HTML, clases y divs.
Conocimientos básicos de CSS: Utilizaremos CSS para dar estilo a nuestros deslizadores de imágenes y botones.
Conocimientos básicos de JavaScript: Utilizaremos JavaScript para hacer que los deslizadores de imágenes sean responsivos.
Un editor de código: Puede utilizar el editor de código que prefiera. Yo utilizaré Código de Visual Studio.
Una colección de imágenes.

Configurar la carpeta del proyecto

Necesitamos una carpeta de proyecto, una carpeta de imágenes dentro de ella, y archivos HTML, CSS y JavaScript. Llamaré a mi proyecto "Image-Slider". Puedes crear tu proyecto manualmente o usar estos comandos para empezar;

mkdir Image-Slider

cd Image-Slider

mkdir Images && touch index.html styles.css script.js

Añade todas tus imágenes a la carpeta "Imágenes" que hemos creado dentro de la carpeta del proyecto y pasa al siguiente paso.

Esta es mi carpeta de proyecto, donde he añadido seis imágenes que voy a utilizar para crear un slider. Todo nuestro código HTML estará en la carpeta index.html archivo.

Tipos de deslizadores de imágenes

Podemos tener dos tipos de Image Sliders; un slider automático y un slider de imagen automático con botones.

#1. Deslizador automático de imágenes

Un deslizador automático se desplaza automáticamente a la siguiente imagen después de un tiempo determinado, digamos, por ejemplo, 3 segundos.

Código HTML

Este es mi código HTML;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documento</title>
    <link rel="stylesheet" href="styles.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" />


</head>

<body>
  <div id="slider">
    <div class="slide">
        <h1>Africano</h1>
      <img src="Images/img1.jpg" alt="Imagen 1">
    </div>
    <div class="slide">
        <h1>Americana</h1>
      <img src="Images/img2.jpg" alt="Imagen 2">
    </div>
    <div class="slide">
        <h1>Asiático</h1>
      <img src="Images/img3.jpg" alt="Imagen 3">
    </div>
    <div class="slide">
        <h1>Árabe</h1>
      <img src="Images/img4.jpg" alt="Imagen 4">
    </div>
    <div class="slide">
        <h1>Moderno </h1>
      <img src="Images/img5.jpg" alt="Imagen 5">
    </div>
    <div class="slide">
        <h1> Europea </h1>
      <img src="Images/img6.jpg" alt="Imagen 6">
    </div>
  </div>

  <script src="script.js"></script>


</body>
</html>

A partir de este código, podemos observar lo siguiente;

He importado mi archivo CSS a index.html en la carpeta <head> sección. Se utilizará en pasos posteriores.

<link rel="stylesheet" href="styles.css">

He añadido JavaScript a mi código HTML justo antes del cierre <body> etiqueta. Utilizaré JavaScript para añadir funcionalidad a los deslizadores.
Cada diapositiva tiene un class de slide.
He utilizado el <img> para importar imágenes de la carpeta Imágenes.

Estilizar el deslizador automático de imágenes mediante CSS

Ahora podemos dar estilo a nuestras imágenes, puesto que ya hemos enlazado los archivos CSS y HTML.

Añade este código a tu archivo CSS;

#slider {
    width: 80%;
  }
  
  .slide {
    width: 80%;
    display: none;
    position: relative;
  }
  
  .slide img {
    width: 80%;
    height: 80%;
  }
  
  .slide.active {
    display: block;
  }

A partir de este código, podemos observar lo siguiente;

Tenemos la width y height de nuestro deslizador a 80%
Hemos fijado la diapositiva activa en block, lo que significa que sólo se mostrará la diapositiva activa mientras que el resto se ocultan.

Cómo añadir JavaScript para que el deslizador de imágenes sea responsivo

Añada este código a su script.js archivo;

var slides = document.querySelectorAll('.slide');
var currentSlide = 0;
var slideInterval = setInterval(nextSlide,2000);

function nextSlide() {
  slides[currentSlide].className = 'slide';
  currentSlide = (currentSlide+1)%slides.length;
  slides[currentSlide].className = 'slide active';
}

Este JavaScript hace lo siguiente;

Utilizamos document.querySelectorAll selector para apuntar a todos los elementos con una clase de slide.
Damos la currentSlide 0 valor inicial.
Fijamos el slideInterval como 2000 (2 segundos), lo que significa que las imágenes del deslizador cambian cada 2 segundos.
Este código slides[currentSlide].className = 'slide'; elimina la clase activa de la diapositiva actual
Este código currentSlide = (currentSlide + 1) % slides.length; incrementa el índice de la diapositiva actual.
Este código slides[currentSlide].className = 'slide active'; añade la clase activa a la diapositiva actual.

El deslizador automático funciona de la siguiente manera;

#2. Deslizador automático con botones

El deslizador de imágenes que hemos creado se desplaza automáticamente cada 2 segundos. Ahora podemos crear una imagen donde los usuarios pueden pasar a la siguiente diapositiva haciendo clic en un botón o auto-desplaza después de cada 3 segundos si el usuario no hace clic en los botones.

Código HTML

Puede cambiar el contenido de su index.html como sigue;

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Deslizador de imágenes</title>
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"
    />
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <div class="container">

        <div class="mySlides">
            <img src="Images/img1.jpg" style="width:100% ; height:50vh" >
        </div>
      
        <div class="mySlides">
            <img src="Images/img2.jpg" style="width:100% ; height:50vh">
        </div>
      
        <div class="mySlides">
            <img src="Images/img3.jpg" style="width:100% ; height:50vh">
        </div>
      
        <div class="mySlides">
            <img src="Images/img4.jpg" style="width:100% ; height:50vh">
        </div>
      
        <div class="mySlides">
            <img src="Images/img5.jpg" style="width:100% ; height:50vh">
        </div>
      
      
        <a class="prev" onclick="plusSlides(-1)">❮</a>
        <a class="next" onclick="plusSlides(1)">❯</a>
      
        <div class="caption-container">
          <p id="caption"></p>
        </div>
      
        <div class="row">
          <div class="column">
            <img class="demo cursor" src="Images/img1.jpg" style="width:100%" onclick="currentSlide(1)" alt="Europea">
          </div>
          <div class="column">
            <img class="demo cursor" src="Images/img2.jpg" style="width:100%" onclick="currentSlide(2)" alt="Africano">
          </div>
          <div class="column">
            <img class="demo cursor" src="Images/img3.jpg" style="width:100%" onclick="currentSlide(3)" alt="Americana">
          </div>
          <div class="column">
            <img class="demo cursor" src="Images/img4.jpg" style="width:100%" onclick="currentSlide(4)" alt="Asiático">
          </div>
          <div class="column">
            <img class="demo cursor" src="Images/img5.jpg" style="width:100%" onclick="currentSlide(5)" alt="Moderno">
          </div>
          
        </div>
      </div>

    <script src="script.js"></script>
  </body>
</html>

Este código HTML funciona de la siguiente manera;

Tenemos una clase llamada mySlides que lleva nuestras cinco imágenes.
Tenemos dos botones, "prev" y "next" con un onClickque permite a los usuarios desplazarse por las diapositivas.
Tenemos una miniatura que muestra las imágenes en la parte inferior de la página web.

Código CSS

Añade esto a tu código;

* {
  box-sizing: border-box;
}

.container {
  position: relative;
}

.mySlides {
  justify-content: center;
}

.cursor {
  cursor: pointer;
}

.prev,
.next {
  cursor: pointer;
  position: absolute;
  top: 40%;
  width: auto;
  padding: 16px;
  margin-top: -50px;
  color: rgb(34, 143, 85);
  font-weight: bold;
  font-size: 20px;
  border-radius: 0 3px 3px 0;
  user-select: none;
  -webkit-user-select: none;
}

.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

.prev:hover,
.next:hover {
  background-color: rgba(0, 0, 0, 0.8);
}

.caption-container {
  text-align: center;
  background-color: orangered;
  padding: 2px 16px;
  color: white;
}

.row:after {
  content: "";
  display: table;
  clear: both;
}

.column {
  float: left;
  width: 16.66%;
}

.demo {
  opacity: 0.6;
}

.active,
.demo:hover {
  opacity: 1;
}

El código CSS funciona de la siguiente manera;

Hemos fijado el .mySlides como none, lo que significa que todas las diapositivas están ocultas por defecto.
Hemos configurado la opacidad de las miniaturas sobre las que se pasa el ratón como 1 a través del activo, .demo:hover {opacity: 1;} regla.

Código JavaScript

let slideIndex = 1;
showSlides(slideIndex);

function plusSlides(n) {
  showSlides(slideIndex += n);
}

function currentSlide(n) {
  showSlides(slideIndex = n);
}

let slideInterval = setInterval(() => {
  plusSlides(1);
}, 3000);

let slideshowContainer = document.getElementsByClassName('slideshow-container')[0];
slideshowContainer.addEventListener('mouseenter', () => {
  clearInterval(slideInterval);
});

slideshowContainer.addEventListener('mouseleave', () => {
  slideInterval = setInterval(() => {
    plusSlides(1);
  }, 3000);
});

function showSlides(n) {
  let i;
  let slides = document.getElementsByClassName("mySlides");
  let dots = document.getElementsByClassName("demo");
  let captionText = document.getElementById("caption");
  if (n > slides.length) {slideIndex = 1}
  if (n < 1) {slideIndex = slides.length}
  for (i = 0; i < slides.length; i++) {
    slides[i].style.display = "none";
  }
  for (i = 0; i < dots.length; i++) {
    dots[i].className = dots[i].className.replace(" active", "");
  }
  slides[slideIndex-1].style.display = "block";
  dots[slideIndex-1].className += " active";
  captionText.innerHTML = dots[slideIndex-1].alt;
}

Puede obtener el código fuente final aquí.

Nuestro código JavaScript hace lo siguiente;

Tenemos un currentSlide con un valor de visualización establecido como ninguno. Esta regla permite que nuestra página web muestre sólo la diapositiva actual.
Tenemos un plusSlides que suma/resta el valor dado de slideIndex para determinar qué diapositiva mostrar.
Si el usuario no pulsa los botones, las diapositivas se desplazarán automáticamente cada 3000 milisegundos.

Si un usuario utiliza la pestaña de navegación, nuestro deslizador de imágenes funcionará de la siguiente manera;

Si el usuario no utiliza los botones de navegación, el deslizador de imágenes se desplazará automáticamente cada 3 segundos de la siguiente manera;

Prueba y depuración de Image Slider

Los errores y fallos forman parte del camino de un desarrollador, y tenerlos en tu código no significa que seas un mal desarrollador. Si tu código no funciona incluso después de seguir los pasos mencionados anteriormente, puedes probar estas opciones de prueba y depuración para solucionar errores:

Depura cada archivo por separado: Nuestro código tiene tres archivos: HTML, CSS y JavaScript. Los tres lenguajes tienen reglas diferentes. Puedes comprobar si tus códigos HTML, CSS y JavaScript son válidos utilizando herramientas como Servicio de validación de marcado del W3C para HTML, Validador de CSS para el código CSS, y Chrome DevTools para probar su código JavaScript.
Realizar diferentes tipos de pruebas: Puede realizar pruebas visuales para asegurarse de que las imágenes se muestran correctamente, pruebas de rendimiento para comprobar si las imágenes son receptivas y pruebas funcionales para asegurarse de que las imágenes son navegables.
Pruebe su código con distintos formatos y tamaños de imagen: Un buen deslizador de imágenes debe funcionar con diferentes formatos y tamaños de imagen.
Automatice sus pruebas: La automatización está en todas partes, y usted también puede beneficiarse de ella en las pruebas. Puede utilizar herramientas como Selenio o LoadRunner para escribir y ejecutar scripts de automatización de pruebas. Estas herramientas también le permiten reutilizar algunas de sus pruebas.
Documente sus pruebas: Las pruebas son un proceso continuo. Puede que tengas que seguir mejorando tus pruebas hasta que tu código funcione como se espera. Documenta este proceso para que tu código sea legible y fácil de consultar.

Deslizadores de imágenes: Buenas prácticas

Hazlo sencillo: Los sliders son atractivos. Sin embargo, mantenga bajo el número de imágenes en un slider. Algo así como 4-7 imágenes por diapositiva es lo ideal.
Prueba tus deslizadores: Pruebe su funcionalidad antes de publicarlos en línea.
Crear sliders responsivos: Asegúrese de que los deslizadores que cree sean adaptables a distintos tamaños de pantalla.
Utilice imágenes de alta calidad: Toma/descarga imágenes de alta calidad para tus deslizadores. Guardar las imágenes en formato SVG es una buena idea, ya que no pierden calidad al cambiar su tamaño.
Cambia el tamaño de tus imágenes: Puede tener diferentes tamaños y formatos de imagen. Asegúrese siempre de que las imágenes de un deslizador tengan el mismo tamaño. Puedes conseguirlo mediante CSS.

Conclusión

Esperamos que ahora pueda crear un deslizador de imágenes totalmente funcional para mostrar datos importantes en su sitio web sin utilizar Marcos de interfaz de usuario. Puedes utilizar el mismo método para crear deslizadores de vídeo en páginas web.

Tito Kamunya

Autor