Una vez más aquí. Hoy vengo a dejar un pequeño artículo sobre el que me ha llegado un email esta misma semana. El caso es que el usuario (o usuaria) quiere poner un slider de imágenes en una web. No sé si lo quiere para un CMS o para que tipo de página, pero utilizando un poco de HTML, CSS y JavaScript, se puede crear un slide de imágenes básico para añadir a una web.
El caso es que conociendo pocos requisitos de lo que se me pedía en el correo, creo que el resultado final de lo que vamos a ver a continuación, puede ser bueno para todo el que lo necesite.
¿Cómo crear un slide de imágenes básico con JavaScript, HTML y CSS?
Para crear todo esto, tan solo necesitaremos tres simples archivos. Un HTML, otro CSS y el JavaScript. Cada uno servirá la su proposito. El HTML lo utilizaremos para dar la estructura al slide, el JavaScript lo usaremos para la lógica y el CSS para que todo se vea de forma correcta.
El archivo index.html
Para crear este ejemplo básico de un slide de imágenes, solo necesitaremos abrir nuestro editor favorito, y dentro pegar el siguiente código:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Slider de imágenes con JavaScript</title>
<link rel="icon" type="image/jpg" href="images/favicon.ico">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css">
</head>
<body>
<section class="wrapper">
<div class="titulo" title="made in entreunosyceros.net">Slider Imágenes</div>
<div class="image-container"><!--contenedor imágenes-->
<i class="fa-solid fa-arrow-left button" id="prev"></i> <!--flecha izquierda-->
<div class="carousel"><!--carrusel de imágenes-->
<img src="images/image1.jpg" alt="Imagen 1">
<img src="images/image2.jpg" alt="Imagen 2">
<img src="images/image3.jpg" alt="Imagen 3">
<img src="images/image4.jpg" alt="Imagen 4">
</div>
<i class="fa-solid fa-arrow-right button" id="next"></i><!--flecha derecha-->
</div>
</section>
<script src="script.js" defer></script>
</body>
</html>
Una vez pegado el código, solo queda guardar este archivo como index.html. Dentro de este código, podemos destacar:
- La etiqueta
<body>nos va a servir para meter en ella el contenido visible del sitio web. En este caso, se define una sección con la clase «wrapper» que contiene el título del slider y el contenedor de imágenes. - La etiqueta
<section>es una etiqueta semántica que se utiliza para definir secciones de contenido en una página web. - La etiqueta
<div>se utiliza para crear una sección o contenedor genérico. - La clase «titulo» se utiliza para dar estilo al título del slider.
- La clase «image-container» se utiliza para crear un contenedor para el slider de imágenes.
- La clase «carousel» se utiliza para crear un carrusel de imágenes.
- La etiqueta
<img>se utiliza para insertar las imágenes del slide en la página web. En este caso, se incluyen cuatro imágenes con la etiqueta «src» que especifica la ruta de cada imagen y el atributo «alt» que especifica un texto alternativo para cada imagen. Estas imágenes deben ser sustituidas por el usuario. - Las etiquetas
<i>se utilizan para crear íconos en la página web. En este caso, se utilizan dos íconos de Font Awesome para las flechas izquierda y derecha del slider. - El atributo «defer» en la etiqueta
<script>indica que el archivo de script se descargará en segundo plano mientras se carga la página y se ejecutará una vez que la página esté completamente cargada. - El archivo «script.js» contiene el código JavaScript que se ejecutará en el sitio web para crear el slider de imágenes.
Archivo script.js
El código que vamos a guardar dentro de este archivo, es un script en JavaScript que permite crear un carrusel de imágenes. Este se va a desplazar automáticamente, pero también se podrá mover las imágenes de forma manual utilizando botones.
Dentro de este archivo, vamos a guardar el siguiente código:
// Obtener los elementos DOM para el carrusel de imágenes
const wrapper = document.querySelector(".wrapper");
const carousel = document.querySelector(".carousel");
const images = document.querySelectorAll("img");
const buttons = document.querySelectorAll(".button");
let imageIndex = 1;
let intervalId;
// Definir función para iniciar el deslizador de imágenes automático
const autoSlide = () => {
// Iniciar la presentación de diapositivas llamando a slideImage() cada 4 segundos
intervalId = setInterval(() => slideImage(++imageIndex), 4000);
};
// Llamar a la función autoSlide al cargar la página
autoSlide();
// Una función que actualiza la visualización del carrusel para mostrar la imagen especificada
const slideImage = () => {
// Calcular el índice de imagen actualizado
imageIndex = imageIndex === images.length ? 0 : imageIndex < 0 ? images.length - 1 : imageIndex;
// Actualizar la visualización del carrusel para mostrar la imagen especificada
carousel.style.transform = `translate(-${imageIndex * 100}%)`;
};
// Una función que actualiza la visualización del carrusel para mostrar la imagen siguiente o anterior
const updateClick = (e) => {
// Detener la presentación de diapositivas automática
clearInterval(intervalId);
// Calcular el índice de imagen actualizado en función del botón pulsado
imageIndex += e.target.id === "next" ? 1 : -1;
slideImage(imageIndex);
// Reiniciar la presentación de diapositivas automática
autoSlide();
};
// Agregar event listeners a los botones de navegación
buttons.forEach((button) => button.addEventListener("click", updateClick));
// Agregar event listener mouseover al elemento wrapper para detener la presentación de diapositivas automática
wrapper.addEventListener("mouseover", () => clearInterval(intervalId));
// Agregar event listener mouseleave al elemento wrapper para reiniciar la presentación de diapositivas automática
wrapper.addEventListener("mouseleave", autoSlide);
Una vez pegado el contenido dentro del archivo script.js, solo queda guardarlo.
Dentro de este código podemos destacar los siguientes puntos:
- Para empezar se seleccionan los elementos del DOM que se usarán en el carrusel, como el contenedor principal, el carrusel de imágenes, las imágenes en sí mismas y los botones de navegación.
- También se crea una variable
imageIndexque lleva un registro de la imagen actual que se está mostrando. Además se creará unintervalIdque se usa para detener y reiniciar la presentación de diapositivas automática. - Definimos una función
autoSlide()que inicia la presentación de diapositivas llamando aslideImage()cada 4 segundos. Luego, llama aautoSlide()para que se ejecute cuando se carga la página. - Definiremos una función llamada
slideImage(), la cual actualiza la visualización del carrusel para mostrar la imagen especificada en base al índice actualizado. La función se llama tanto en la funciónautoSlide()como en la funciónupdateClick(). - Además se crea una función llamada
updateClick(),que detiene la presentación de diapositivas automática, calcula el índice de imagen actualizado en función del botón pulsado y actualiza la visualización del carrusel para mostrar la imagen especificada. Luego, reinicia la presentación de diapositivas automática. - Se añaden event listeners a los botones de navegación para que la función
updateClick()se llame cada vez que se hace clic en uno de los botones. - Agregamos event listeners al contenedor principal para detener la presentación de diapositivas automática cuando el cursor del ratón se encuentra sobre el carrusel y para reiniciar la presentación de diapositivas automática cuando el cursor sale del carrusel.
Archivo style.css
Para que todo este se vea de forma correcta, dentro del archivo style.css vamos a guardar algunas reglas de estilo para definir la apariencia y el diseño de la web y del slide.
/* Establecer los márgenes y rellenos de todos los elementos en 0 y utilizar el modelo de caja "border-box" para incluir el ancho del borde y el padding dentro del ancho total */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Establecer el alto mínimo del cuerpo a 100% del alto visible de la ventana y centrar vertical y horizontalmente los elementos internos */
body {
min-height: 100vh;
display: grid;
align-items: center;
justify-content: center;
background: #260040;
}
/* Contenedor principal que tendrá un ancho máximo de 650px y ocupará el 100% del ancho disponible, además de tener una altura fija de 430px, fondo blanco, sombra y bordes redondeados y rojos*/
.wrapper {
display: grid;
max-width: 650px;
width: 100%;
height: 430px;
background: #fff;
align-items: center;
justify-content: center;
position: relative;
border-radius: 12px;
box-shadow: 0 7px 14px rgba(0, 0, 0, 0.1);
border: 10px solid red;
}
/* Establecer las propiedades del botón de navegación (anterior y siguiente), incluyendo su posición absoluta en relación al contenedor principal, su estilo de círculo con texto centrado, el color de fondo y el tamaño de la fuente, entre otras */
.wrapper i.button {
position: absolute;
top: 19%;
transform: translateY(-50%);
height: 35px;
width: 35px;
background-color: #343f4f;
border-radius: 50%;
text-align: center;
line-height: 36px;
color: #fff;
font-size: 15px;
transition: all 0.3s linear;
z-index: 100;
cursor: pointer;
}
/* Reducir la escala del botón activo (presionado) y ajustar su posición verticalmente */
i.button:active {
transform: scale(0.94) translateY(-50%);
}
/* Establecer la posición del botón "anterior" y "siguiente" en relación al contenedor principal */
i#prev {
left: 10px;
}
i#next {
right: 10px;
}
/* Establecer la altura del contenedor de la imagen, su ancho máximo y ancho total, y hacer que el desbordamiento sea oculto para que no haya desbordamiento de imagen */
.image-container {
height: 320px;
max-width: 500px;
width: 100%;
overflow: hidden;
}
/* Establecer el estilo del carrusel, que será un contenedor flexible de imágenes que cambiará su posición para mostrar la imagen actual, todo esto con una transición suave */
.image-container .carousel {
display: flex;
height: 100%;
width: 100%;
transition: all 0.4s ease;
flex-wrap: nowrap;
}
/* Establecer el estilo de la imagen en el carrusel, incluyendo el tamaño de la imagen, el borde redondeado, el tamaño del borde, el ajuste de objeto y el hecho de que cubrirá el contenedor de imagen */
.carousel img {
height: 100%;
width: 100%;
border-radius: 25px;
border: 15px solid #fff;
object-fit: cover;
flex-shrink: 0;
transition: all 0.4s ease;
}
/*Título*/
.titulo {
box-sizing: border-box;
padding: 10px;
border: none;
font: normal 38px / normal "Warnes", Helvetica, sans-serif;
color: rgba(255, 255, 255, 1);
text-align: center;
white-space: pre;
text-shadow: 0 0 10px rgb(255, 0, 0), 0 0 20px rgba(255, 0, 0),
0 0 30px rgba(255, 0, 0), 0 0 40px #727272, 0 0 70px #727272,
0 0 80px #4e4e4e, 0 0 100px #2b2b2b;
-webkit-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1);
-moz-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1);
-o-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1);
transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1);
width: 100%;
margin-top: 10px;
margin-bottom: 10px;
}
.titulo:hover {
text-shadow: 0 0 10px rgb(69, 0, 109), 0 0 20px rgb(73, 0, 95),
0 0 30px rgb(57, 0, 68), 0 0 40px #580054, 0 0 70px #000000,
0 0 80px #000000, 0 0 100px #000000;
}
Y tras pegar este código, y guardar el contenido del archivo, ya podemos iniciar el slider ejecutando el archivo index.html. Este pequeño ejemplo creo que se puede adaptar bien a cualquier sitio web y a la vista desde dispositivos móviles.
Si quieres ver funcionando este ejemplo puedes seguir el siguiente link a la sección de ejemplos de esta web. Además, si quieres descargar el código y las imágenes que utilizo en el ejemplo, puedes hacerlo desde el repositorio de GitHub en el que alojé este ejemplo.