¡Hola! 👋 Hoy vamos a ver cómo crear un control deslizante de imágenes sencillo pero funcional en JavaScript puro. No utilizaremos bibliotecas de terceros para que puedas comprender mejor cómo funciona cada elemento del control deslizante y cómo se puede mejorar.
Puedes ver el control deslizante terminado aquí: https://coursme.github.io/02-slider-js/
Paso 1. Preparación de la estructura HTML
En primer lugar, necesitamos crear una estructura HTML para el control deslizante. Usaremos el elemento <div> para envolver las diapositivas y varias imágenes que se alternarán.
Plantilla HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Simple Image Slider</title>
<style>
.slider {
width: 500px;
height: 300px;
overflow: hidden;
position: relative;
}
.slides {
display: flex;
transition: transform 0.5s ease-in-out;
}
.slide {
min-width: 100%;
box-sizing: border-box;
}
img {
width: 100%;
height: 100%;
}
.controls {
position: absolute;
top: 50%;
width: 100%;
display: flex;
justify-content: space-between;
transform: translateY(-50%);
}
.control {
background-color: rgba(0, 0, 0, 0.5);
color: white;
border: none;
font-size: 18px;
cursor: pointer;
padding: 10px;
}
</style>
</head>
<body>
<h1>Слайдер изображений</h1>
<div class="slider">
<div class="slides">
<div class="slide"><img src="https://placehold.co/500x300?text=Slide+1" alt="Slide 1"></div>
<div class="slide"><img src="https://placehold.co/500x300?text=Slide+2" alt="Slide 2"></div>
<div class="slide"><img src="https://placehold.co/500x300?text=Slide+3" alt="Slide 3"></div>
<div class="controls">
<button class="control" id="prevBtn"><</button>
<button class="control" id="nextBtn">></button>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
📋 Explicación:
.slider: Un contenedor de diapositivas que establece dimensiones fijas y oculta todo lo que va más allá de los bordes (overflow: hidden)..slides: Contenedor para todas las diapositivas que se moverá hacia la izquierda o hacia la derecha para cambiar las imágenes..slide: Cada diapositiva individual. Le damos un ancho del 100% para que ocupe toda el área visible.Botones de control: Estos son los botones «adelante» y «atrás» que cambiarán las diapositivas.
Paso 2. Añadir lógica para cambiar las diapositivas
Ahora pasemos a la lógica principal: cambiar las diapositivas al hacer clic en los botones. Necesitamos realizar un seguimiento de la diapositiva actual y mover el contenedor .slides usando la propiedad CSS transform.
Implementación en script.js:
const slides = document.querySelector('.slides');
const slide = document.querySelectorAll('.slide');
const prevBtn = document.getElementById('prevBtn');
const nextBtn = document.getElementById('nextBtn');
let currentIndex = 0;
const totalSlides = slide.length;
function updateSliderPosition() {
slides.style.transform = `translateX(-${currentIndex * 100}%)`;
}
nextBtn.addEventListener('click', () => {
if (currentIndex < totalSlides - 1) {
currentIndex++;
} else {
currentIndex = 0; // Volver a la primera diapositiva
}
updateSliderPosition();
});
prevBtn.addEventListener('click', () => {
if (currentIndex > 0) {
currentIndex--;
} else {
currentIndex = totalSlides - 1; // Ir a la última diapositiva
}
updateSliderPosition();
});
🔨 Cómo funciona:
translateX(): Usamos esta propiedad para desplazar el contenedor de diapositivas hacia la izquierda o hacia la derecha según el índice de la diapositiva actual.Lógica de los botones: Cada botón aumenta o disminuye el índice de la diapositiva, después de lo cual se llama a la función
updateSliderPosition(), que actualiza la posición del contenedor.
Paso 3. Añadir la función de cambio automático de diapositivas
Para que nuestro control deslizante sea más cómodo, añadiremos la función de cambio automático de diapositivas a intervalos regulares. Esto creará el efecto de una galería sin fin.
Añadiremos la conmutación automática:
let autoSlideInterval = setInterval(() => {
if (currentIndex < totalSlides - 1) {
currentIndex++;
} else {
currentIndex = 0;
}
updateSliderPosition();
}, 3000); // Cambio de diapositiva cada 3 segundos
// Detener la conmutación automática al interactuar con los botones
nextBtn.addEventListener('click', () => {
clearInterval(autoSlideInterval);
autoSlideInterval = setInterval(() => {
if (currentIndex < totalSlides - 1) {
currentIndex++;
} else {
currentIndex = 0;
}
updateSliderPosition();
}, 3000);
});
prevBtn.addEventListener('click', () => {
clearInterval(autoSlideInterval);
autoSlideInterval = setInterval(() => {
if (currentIndex < totalSlides - 1) {
currentIndex++;
} else {
currentIndex = 0;
}
updateSliderPosition();
}, 3000);
});
🕒 Descripción:
Usamos la función
setInterval()para cambiar automáticamente la diapositiva cada 3 segundos.La interacción con los botones (adelante/atrás) suspende la conmutación automática, pero luego la reinicia para que el control deslizante continúe funcionando automáticamente.
Paso 4. Finalización y prueba
¡Ahora tu slider es completamente funcional! Puedes cambiar las diapositivas manualmente con los botones o permitir que el control deslizante cambie automáticamente las imágenes cada pocos segundos.
Conclusión
Crear un control deslizante en JavaScript puro es una excelente manera de practicar la manipulación de DOM y trabajar con CSS. Este control deslizante se puede ampliar fácilmente añadiendo, por ejemplo, animaciones, efectos de atenuación o navegación con puntos indicadores. 🚀
Si tienes alguna pregunta o quieres añadir nuevas funciones al control deslizante, ¡estaré encantado de ayudarte! 😄
Repositorio con el código final: https://github.com/Coursme/02-slider-js