¿Cómo construir un carrusel o deslizador de JavaScript ligero?

La construcción de un deslizador o carrusel ligero en JavaScript implica varios pasos, incluyendo el diseño de la estructura HTML, la creación de estilos CSS, y la escritura de código JavaScript para controlar las funcionalidades.

Paso 1: Estructura HTML:
La siguiente estructura HTML configura un carrusel de imágenes.

<div id="carousel">
  <div id="slider">
    <div class="slide"><img src="ruta_a_la_imagen/imagen1.jpg"></div>
    <div class="slide"><img src="ruta_a_la_imagen/imagen2.jpg"></div>
    <div class="slide"><img src="ruta_a_la_imagen/imagen3.jpg"></div>
    // Añade más si es necesario
  </div>
</div>
<button id="prev">Prev</button>
<button id="next">Next</button>

Paso 2: Estilos CSS:
Para ocultar las imágenes que no se están visualizando actualmente, establecemos la propiedad overflow del #carousel a hidden. El #slider debería tener un width que sea el ancho total de todas las imágenes. Establece la presentación de .slide en inline-block para hacer que aparezcan en una línea. Supongamos que cada imagen tiene 500px de ancho y hay 3 imágenes:

#carousel {
  width: 500px; 
  overflow: hidden;
}
#slider {
  width: 1500px; 
  white-space: nowrap;
}
.slide {
  width: 500px; 
  display: inline-block;
}

Paso 3: Código JavaScript:
Primero, selecciona los elementos DOM e inicializa una variable para el índice de la imagen:

var slider = document.getElementById("slider");
var next = document.getElementById("next");
var prev = document.getElementById("prev");

var slideIndex = 0;

Añade oyentes de eventos de clic para los botones next y prev. Cuando se hace clic en el botón next, slideIndex se incrementa en 1. Pero si slideIndex ya ha llegado a la última imagen, se establece en 0. Cuando se hace clic en el botón prev, slideIndex se decrementa en 1. Pero si slideIndex ya está en la primera imagen, se establece a la última imagen. Después de cambiar slideIndex, se llama a la función showSlide().

next.onclick = function() {
  slideIndex = slideIndex < slider.children.length - 1 ? slideIndex + 1 : 0;
  showSlide();
};

prev.onclick = function() {
  slideIndex = slideIndex > 0 ? slideIndex - 1 : slider.children.length - 1;
  showSlide();
};

Define la función showSlide(). Ajusta la propiedad scrollLeft del #slider a la imagen deseada:

function showSlide() {
  slider.scrollLeft = slider.children[slideIndex].offsetLeft;
}

Paso 4: ¡Eso es todo! Con la estructura HTML especificada, los estilos CSS, y JavaScript, has creado un deslizador o carrusel JavaScript ligero. Cuando hagas clic en el botón Prev o Next, el deslizador se desplazará a la imagen anterior o siguiente.