¿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
deslide
. - 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
yheight
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 deslide
. - 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
onClick
que 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 deslideIndex
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.