Para darle un mayor atractivo a la apariencia de una página web y ofrecer una mejor experiencia de usuario en la navegación, existen funcionalidades que podemos añadir. En este caso, nos enfocamos en cómo hacer un carrusel o slider de imágenes utilizando solo HTML y CSS.
Si quieres saber cómo llevarlo a cabo, échale un vistazo al siguiente vídeo de nuestro profesor del bootcamp, Sergio Jiménez, e impleméntalo en tu proyecto de forma sencilla.
Aceptar el consentimiento para ver esto
Para empezar, Sergio indica como hay que tener un div para el slider de imágenes y dentro dos div en el archivo HTML, uno para las imágenes y otro para los botones. Es importante que las imágenes tengan un id cada una para poder vincularlas utilizando href.
Una vez tienes el archivo HTML preparado, es el momento de entrar en CSS. Para empezar, Sergio le da estilos al body utilizando el siguiente código:
body {
margin: 2vw;
display: flex;
justify-content: center;
background-color: blanchedalmond;
}
Con esto se le empieza a dar un poco de estilo al diseño de la página, aunque todavía no se entra en el slider. A la hora de comenzar a trabajar en el slider, Sergio llama al contenedor principal, «slider», y utiliza el siguiente código:
.slider {
max-width: 800px;
width: 100%;
position: relative;
}
Posteriormente, se llama al contenedor de imágenes para estilarlo con CSS, tal y como se lleva a cabo en el código siguiente:
.images {
display: flex;
aspect-ratio: 16/9;
border-radius: 15px;
box-shadow: 0 0 5px rgb(54, 54, 54);
overflow-x: scroll;
scroll-snap-type: x mandatory;
scroll-behaviour: smooth;
}
Una vez ya se le han dado los estilos y añadido el scroll, es el momento de que las imágenes queden centradas y ocultar la barra de abajo del slider de imágenes. Para ello, añadimos el siguiente código a todas las imágenes y así obtener un mejor resultado:
.images :: -webkit-scrollbar {
display: none;
}
.images img {
flex: 0 0 100%;
scroll-snap-align: center;
}
Finalmente, hay que añadir los botones para que el slider de imágenes se pueda pasar también pulsando los botones:
.buttons {
display: flex;
gap: 10px;
position: absolute;
left: 50%;
bottom: 5%;
transform: translateX(-50%);
}
.buttons a {
width: 1rem;
height: 1rem;
background-color: white;
border-radius: 50%;
}
Con todo esto, serás capaz de conseguir un slider de imágenes para un sitio web hecho solamente con HTML y CSS.
Si quieres aprender más sobre HTML, CSS y otras muchas tecnologías que permitirán que te conviertas en profesional de la programación, apúntate a nuestro Bootcamp Full Stack Web Developer y empieza tu carrera en el desarrollo web.
