Carrusel con HTML y CSS

En este artículo, aprenderemos cómo crear un carrusel utilizando HTML y CSS. Un carrusel es una excelente manera de mostrar múltiples imágenes o contenido de manera interactiva en tu sitio web.

Creando la estructura básica

Primero, necesitamos crear la estructura básica del carrusel. Utilizaremos una lista desordenada (ul) para contener las imágenes y un contenedor para mostrar las imágenes una a la vez.


<ul class="carousel">
  <li>Imagen 1
  <li>Imagen 2
  <li>Imagen 3


<div class="carousel-container">
  <img src="imagen1.jpg" alt="Imagen 1">

Estilizando el carrusel con CSS

Ahora, vamos a aplicar estilos CSS al carrusel para hacerlo funcional y atractivo visualmente.

css
.carousel {
list-style: none;
padding: 0;
margin: 0;
display: flex;
}

.carousel li {
flex: 1;
}

.carousel-container {
width: 100%;
overflow: hidden;
}

.carousel-container img {
width: 100%;
height: auto;
transition: transform 0.5s ease;
}

Creando la funcionalidad del carrusel

Ahora, necesitamos agregar un poco de JavaScript para que nuestro carrusel funcione correctamente. Utilizaremos JavaScript para cambiar la imagen que se muestra en el contenedor cada vez que se hace clic en una imagen de la lista.

javascript
const carouselItems = document.querySelectorAll(‘.carousel li’);
const carouselContainer = document.querySelector(‘.carousel-container’);

carouselItems.forEach(item => {
item.addEventListener(‘click’, () => {
carouselContainer.innerHTML = item.innerHTML;
});
});

Conclusiones

En este artículo, hemos aprendido cómo crear un carrusel utilizando HTML, CSS y JavaScript. Ahora puedes agregar un carrusel interactivo a tu sitio web para mostrar imágenes o contenido de manera atractiva.

Recuerda que la programación es un campo en constante evolución, por lo que te animamos a seguir aprendiendo y mejorando tus habilidades. Consulta cursos de programación en línea o asiste a talleres locales para continuar tu desarrollo como programador.

¡No te detengas aquí y sigue explorando el fascinante mundo de la programación!