Cómo crear un control deslizante simple y funcional en JavaScript puro 🔥

Hoy en día es difícil imaginar un sitio web moderno sin un práctico control deslizante. 🔥 Los sliders hacen que la página web sea más dinámica y atractiva, ayudan a mostrar más contenido y ahorran espacio en la pantalla.

En este artículo aprenderás a crear varios tipos populares de sliders utilizando solo JavaScript puro y sin bibliotecas adicionales. Esto ayudará a que su proyecto sea ligero, rápido y fácil de mantener. ¡Vamos!

📌 ¿Por qué JavaScript puro y no una biblioteca?

Por supuesto, las bibliotecas como Swiper, OwlCarousel o SlickJS son muy útiles. Pero el JavaScript puro tiene claras ventajas:

• 🚀 Menor tamaño de página y mayor velocidad de carga;

• 🎯 Control total sobre la funcionalidad;

• 🛠️ Posibilidad de configuración flexible y precisa para tareas específicas.

🔖 Elementos de un control deslizante simple: ¿para qué sirve cada uno?

Antes de empezar a escribir el código, veamos por qué necesitamos elementos en la estructura HTML y CSS para nuestro control deslizante.

• Contenedor de control deslizante (slider): bloque principal que delimita el área visible de las diapositivas.

• Contenedor de diapositivas (slides): bloque interno que contiene las imágenes (diapositivas). Con la ayuda de CSS, este bloque se moverá hacia la izquierda o hacia la derecha, cambiando las diapositivas.

• Botones de control (prev y next): permiten al usuario cambiar entre diapositivas manualmente.

🖥️ Ejemplo n.º 1: Control deslizante horizontal básico con botones

Creemos un marco HTML:

<div class="slider">
  <div class="slides">
    <img src="slide1.jpg" alt="Slide 1">
    <img src="slide2.jpg" alt="Slide 2">
    <img src="slide3.jpg" alt="Slide 3">
  </div>

  <button class="prev">←</button>
  <button class="next">→</button>
</div>

CSS para estilos:

.slider {
  width: 800px;
  overflow: hidden; /* Скрываем лишние слайды */
  position: relative;
  margin: auto;
}

.slides {
  display: flex; /* Располагаем изображения горизонтально */
  transition: transform 0.5s ease; /* Анимация перехода */
}

.slides img {
  width: 800px; /* Ширина каждого слайда равна ширине слайдера */
  flex-shrink: 0; /* Запрещаем сжатие изображений */
}

button {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0,0,0,0.5);
  color: #fff;
  border: none;
  padding: 10px;
  cursor: pointer;
}

.prev { left: 10px; }
.next { right: 10px; }

JavaScript, explicación de la lógica:

// Obteniendo elementos DOM
const slides = document.querySelector('.slides');
const images = document.querySelectorAll('.slides img');
const prevBtn = document.querySelector('.prev');
const nextBtn = document.querySelector('.next');

let currentSlide = 0; // Diapositiva actual

// Función de cambio de diapositivas
function showSlide(index) {
  if (index < 0) {
    currentSlide = images.length - 1; // Si es menor que el primero, vamos al último
  } else if (index >= images.length) {
    currentSlide = 0; // Si es mayor que el último, vaya al primero
  } else {
    currentSlide = index;
  }

  // Mover el contenedor de diapositivas a la posición deseada
  slides.style.transform = `translateX(-${currentSlide * 800}px)`;
}

// Procesamiento de clics
prevBtn.addEventListener('click', () => showSlide(currentSlide - 1));
nextBtn.addEventListener('click', () => showSlide(currentSlide + 1));

🎨 Ejemplo n.º 2: Control deslizante automático sin fin con efecto de desvanecimiento

Esta opción es adecuada para banners o galerías con una transición suave.

Código HTML:

<div class="fade-slider">
  <img class="fade-slide active" src="slide1.jpg">
  <img class="fade-slide" src="slide2.jpg">
  <img class="fade-slide" src="slide3.jpg">
</div>

Estilos CSS:

.fade-slider {
  position: relative;
  width: 800px;
  height: 500px;
  margin: auto;
}

.fade-slide {
  position: absolute;
  opacity: 0;
  transition: opacity 1s ease;
  width: 100%;
  height: 100%;
}

.fade-slide.active {
  opacity: 1;
}

JavaScript para el funcionamiento del control deslizante:

const slidesFade = document.querySelectorAll('.fade-slide');
let currentFade = 0;

function fadeShowSlide() {
  slidesFade.forEach(slide => slide.classList.remove('active')); // Eliminar la clase activa
  currentFade = (currentFade + 1) % slidesFade.length; // Pasamos a la siguiente diapositiva
  slidesFade[currentFade].classList.add('active'); // Mostrando la diapositiva actual
}

// Cambio automático cada 4 segundos
setInterval(fadeShowSlide, 4000);

📱 Ejemplo n.º 3: Control deslizante adaptable con soporte para deslizar en dispositivos móviles

Este control deslizante se puede cambiar deslizando el dedo en dispositivos móviles.

Principio general de JS para la implementación de deslizamientos:

const slider = document.querySelector('.slides');
let startX = 0;
let endX = 0;

slider.addEventListener('touchstart', e => {
  startX = e.touches[0].clientX;
});

slider.addEventListener('touchmove', e => {
  endX = e.touches[0].clientX;
});

slider.addEventListener('touchend', () => {
  if (startX - endX > 50) {
    showSlide(currentSlide + 1); // deslizar a la izquierda
  }
  if (endX - startX > 50) {
    showSlide(currentSlide - 1); // deslizar a la derecha
  }
});

🎯 ¿Quieres mejorar aún más tus habilidades de JavaScript?

Comienza a aprender programación con la aplicación Kodik! 👨‍💻
Kodik es una aplicación práctica que te ayudará a dominar fácilmente JavaScript y otras tecnologías a través de lecciones interactivas y tareas interesantes.