Carrusel de imágenes con HTML, CSS y JavaScript

Los carruseles de imágenes son una forma efectiva y atractiva de mostrar múltiples imágenes en un espacio reducido. En este artículo, aprenderemos cómo crear un carrusel de imágenes utilizando HTML, CSS y JavaScript.

HTML

Comencemos creando la estructura básica del carrusel. Utilizaremos una lista no ordenada (<ul>) para contener las imágenes y los controles del carrusel.

<div class="carousel">
  <ul class="slides">
    <li><img src="imagen1.jpg" alt="Imagen 1"></li>
    <li><img src="imagen2.jpg" alt="Imagen 2"></li>
    <li><img src="imagen3.jpg" alt="Imagen 3"></li>
  </ul>
  
  <div class="controls">
    <button class="prev">Anterior</button>
    <button class="next">Siguiente</button>
  </div>
</div>

En el código anterior, hemos creado una estructura básica con tres imágenes y dos botones para navegar entre ellas. Asegúrate de reemplazar “imagen1.jpg”, “imagen2.jpg” y “imagen3.jpg” con las rutas correctas de tus imágenes.

CSS

Ahora vamos a darle estilo a nuestro carrusel utilizando CSS. A continuación se muestra un ejemplo básico de cómo podríamos hacerlo:

.carousel {
  width: 500px;
  height: 300px;
  overflow: hidden;
  position: relative;
}

.slides {
  width: 300%;
  height: 100%;
  display: flex;
  transition: transform 0.3s ease-in-out;
}

.slides li {
  width: 33.33%;
  height: 100%;
}

.controls {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
}

.controls button {
  margin: 0 10px;
}

.prev,
.next {
  background-color: #333;
  color: #fff;
  border: none;
  padding: 10px 20px;
  cursor: pointer;
}

.prev:hover,
.next:hover {
  background-color: #555;
}

En el código anterior, hemos utilizado estilos CSS para darle dimensiones al carrusel, establecer la transición de deslizamiento entre imágenes y posicionar los botones de navegación.

JavaScript

Finalmente, utilizaremos JavaScript para agregar la funcionalidad de desplazamiento a nuestro carrusel. A continuación se muestra un ejemplo básico de cómo podríamos hacerlo:

const carousel = document.querySelector('.carousel');
const slides = carousel.querySelector('.slides');
const prevButton = carousel.querySelector('.prev');
const nextButton = carousel.querySelector('.next');
const slideWidth = carousel.offsetWidth;

let currentIndex = 0;

prevButton.addEventListener('click', () => {
  currentIndex = (currentIndex - 1 + slides.children.length) % slides.children.length;
  slides.style.transform = `translateX(-${currentIndex * slideWidth}px)`;
});

nextButton.addEventListener('click', () => {
  currentIndex = (currentIndex + 1) % slides.children.length;
  slides.style.transform = `translateX(-${currentIndex * slideWidth}px)`;
});

En el código anterior, hemos utilizado JavaScript para agregar eventos de clic a los botones de navegación y cambiar la posición del carrusel en función del índice actual y el ancho de cada diapositiva.

Conclusión

¡Enhorabuena! Ahora has aprendido cómo crear un carrusel de imágenes utilizando HTML, CSS y JavaScript. Puedes personalizar y mejorar aún más este carrusel según tus necesidades.

Si deseas seguir mejorando tus habilidades de programación, te recomendamos consultar cursos en línea o asistir a talleres y conferencias sobre desarrollo web. ¡La práctica constante y el aprendizaje continuo te ayudarán a convertirte en un experto en programación!