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

¿Se ha encontrado alguna vez en una situación en la que desea mostrar varias imágenes/vídeos en una sección de una página web pero no quiere ocupar mucho espacio? ¿Desea añadir interactividad a sus páginas web o hacerlas más atractivas?

Un deslizador de imágenes puede ahorrarle la lucha. En este artículo, definiremos un deslizador de imágenes, los requisitos previos para crear un deslizador de imágenes y cómo crear uno utilizando HTML, JavaScript y CSS.

¿Qué es un deslizador de imágenes?

Los deslizadores son carruseles o presentaciones de diapositivas que muestran textos, imágenes o vídeos. Este artículo se centrará en los deslizadores de imágenes. La mayoría de los desarrolladores web utilizan los sliders en la página de inicio para mostrar 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.

Mejoran 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 pasarán mucho tiempo en una página web simple. Puede mejorar el atractivo visual con deslizadores y animaciones.
Ahorre espacio: Si tiene unas 20 imágenes que quiere mostrar en su página web, pueden ocupar mucho espacio. Crear un deslizador le permitirá ahorrar espacio y seguir permitiendo a los usuarios acceder a todas ellas.
Mostrar contenido dinámico: Puede utilizar los deslizadores para mostrar contenido dinámico, como incrustaciones de redes sociales, blogs y noticias.

Requisitos previos para crear un deslizador de imágenes

Un conocimiento básico de HTML: Aquí describiremos la estructura del deslizador. Debería 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 que los controles deslizantes de imágenes sean sensibles.
Un editor de código: Puede utilizar el editor de código que prefiera. Yo utilizaré Visual Studio Code.
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». Puede crear su proyecto manualmente o utilizar estos comandos para empezar;

mkdir Image-Slider

cd Image-Slider

mkdir Imágenes && touch index.html styles.css script.js

Añada todas sus imágenes a la carpeta «Images» que hemos creado dentro de la carpeta del proyecto y pase al siguiente paso.

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

Tipos de Image Sliders

Podemos tener dos tipos de Image Sliders; un deslizador automático y un deslizador automático de imágenes con botones.

#1. Deslizador automático de imágenes

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

Código HTML

Este es mi código HTML;

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


</head&gt

<body&gt
  <div id="deslizador"&gt
    <div class="slide"&gt
        <h1>África</h1&gt
      <img src="Imágenes/img1.jpg" alt="Imagen 1"&gt
    </div&gt
    <div class="slide"&gt
        <h1>Americanos</h1&gt
      <img src="Images/img2.jpg" alt="Imagen 2"&gt
    </div&gt
    <div class="slide"&gt
        <h1>Asiáticos</h1&gt
      <img src="Images/img3.jpg" alt="Imagen 3"&gt
    </div&gt
    <div class="slide"&gt
        <h1>Árabe</h1&gt
      <img src="Images/img4.jpg" alt="Imagen 4"&gt
    </div&gt
    <div class="slide"&gt
        <h1>Moderno</h1&gt
      <img src="Images/img5.jpg" alt="Imagen 5"&gt
    </div&gt
    <div class="slide"&gt
        <h1>Europeo </h1&gt
      <img src="Images/img6.jpg" alt="Imagen 6"&gt
    </div> <div&gt
  </div&gt

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


</body&gt
</html&gt

De este código, podemos notar lo siguiente;

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

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

He añadido JavaScript a mi código HTML justo antes de la etiqueta de cierre <body>. Utilizaré JavaScript para añadir funcionalidad a los deslizadores.
Cada deslizador tiene una clase de deslizamiento.
He utilizado la etiqueta <img> para importar imágenes de la carpeta Imágenes.

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

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

Añada este código a su archivo CSS;

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

De este código, podemos observar lo siguiente;

Tenemos la anchura y la altura de nuestro deslizador al 80%
Hemos establecido la diapositiva activa en bloque, lo que significa que sólo se mostrará la diapositiva activa mientras que el resto están ocultas.

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

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

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

función nextSlide() {
  diapositivas[diapositivaactual].className = 'diapositiva';
  diapositivaactual = (diapositivaactual1)%longituddiapositivas;
  diapositivas[diapositivaactual].className = 'diapositivaactiva';
}

Este JavaScript hace lo siguiente;

Utilizamos el selector document.querySelectorAll para apuntar a todos los elementos con una clase de diapositiva.
Damos al valor inicial de currentSlide 0.
Establecemos 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 diapositivas[diapositivaactual].className = 'diapositivaactiva ‘; 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 en la que los usuarios puedan pasar a la siguiente diapositiva haciendo clic en un botón o que se desplace automáticamente cada 3 segundos si el usuario no hace clic en los botones.

Código HTML

Puede cambiar el contenido de su archivo index. html de la siguiente manera;

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

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

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

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 onClick, que permiten 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ñada esto a su código

* {
  box-sizing: border-box;
}

.container {
  posición: relativa;
}

.mySlides {
  justify-content: center;
}

.cursor {
  cursor: puntero;
}

.prev,
.next {
  cursor: puntero;
  posición: absoluta;
  superior: 40%;
  anchura: auto;
  relleno: 16px
  margen superior: -50px;
  color: rgb(34, 143, 85);
  font-weight: bold;
  tamaño de fuente: 20px;
  border-radius: 0 3px 3px 0;
  user-select: ninguno;
  -webkit-user-select: none;
}

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

.prev:hover
.next:hover {
  color de fondo: rgba(0, 0, 0, 0.8);
}

.caption-container {
  text-align: center;
  color de fondo: naranja;
  acolchado: 2px 16px;
  color: blanco;
}

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

.columna {
  float: left;
  anchura: 16.66%;
}

.demo {
  opacidad: 0,6;
}

.active
.demo:hover {
  opacidad: 1;
}

El código CSS funciona como sigue;

Hemos establecido la propiedad display de la clase . mySlides como none, lo que significa que todas las diapositivas están ocultas por defecto.
Hemos establecido la opacidad de las miniaturas sobre las que se pasa el cursor como 1 a través de la regla active, .demo:hover {opacity: 1;}.

Código JavaScript

let slideIndex = 1;
showSlides(slideIndex);

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

function diapositivaactual(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);
});

función showSlides(n) {
  let i
  let diapositivas = document.getElementsByClassName("misDiapositivas");
  let puntos = document.getElementsByClassName("demo");
  let captionText = document.getElementById("caption");
  if (n > slides.length) {slideIndex = 1}
  if (n < 1) {slideIndex = slides.length}
  for (i = 0; i < longitud.diapositivas; i ) {
    slides<x><x>[i]</x></x>.style.display = "none";
  }
  for (i = 0; i < dots.length; i ) {
    dots<x><x>[i</x></x>].className = dots<x><x>[i]</x></x>.className.replace(" active", "");
  }
  diapositivas[slideIndex-1].style.display = "block";
  puntos[slideIndex-1].className = " activo";
  captionText.innerHTML = puntos[slideIndex-1].alt;
}

Puede obtener el código fuente final aquí.

Nuestro código JavaScript hace lo siguiente;

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

Si el 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 después de cada 3 segundos de la siguiente manera;

Probar y depurar el deslizador de imágenes

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

Depure cada archivo por separado: Nuestro código tiene tres archivos, HTML, CSS y JavaScript. Los tres lenguajes tienen reglas diferentes. Puede comprobar si sus códigos HTML, CSS y JavaScript son válidos utilizando herramientas como W3C Markup Validation Service para HTML, CSS Validator para su código CSS y Chrome DevTools para probar su código JavaScript.
Realice 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 diferentes 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 Selenium 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 tenga que seguir mejorando sus pruebas hasta que su código funcione como se espera. Documente este proceso para que su código sea legible y fácil de consultar.

Deslizadores de imágenes: Mejores prácticas

Manténgalo simple: Los deslizadores son atractivos. Sin embargo, mantenga bajo el número de imágenes en un deslizador. Algo así como 4-7 imágenes por diapositiva es lo ideal.
Pruebe sus deslizadores: Pruebe su funcionalidad antes de publicarlos en línea.
Cree sliders responsivos: Asegúrese de que los deslizadores creados responden a diferentes tamaños de pantalla.
Utilice imágenes de alta calidad: Tome/descargue imágenes de alta calidad para sus deslizadores. Guardar sus imágenes en formato SVG es un método excelente, ya que no pierden su calidad cuando las redimensiona.
Cambie el tamaño de sus imágenes: Es posible que tenga diferentes tamaños y formatos de imágenes. Asegúrese siempre de que las imágenes de un deslizador tengan el mismo tamaño. Puede conseguirlo mediante CSS.

Para terminar

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. Puede utilizar el mismo enfoque para crear deslizadores de vídeo en páginas web.

Titus Kamunya
Colaborador
- LinkedIn
Titus es ingeniero de software y escritor técnico. Desarrolla aplicaciones web y escribe sobre SaaS, React, HTML, CSS, JavaScript, Ruby y Ruby on Rails.