A la hora de mostrar imágenes o logos dentro de una página web, existen numerosas opciones. Una de ellas es mediante un carrusel infinito y por ello te enseñamos cómo hacerlo con HTML y CSS.
En el siguiente vídeo, nuestro profesor del bootcamp, Sergio Jiménez, explica cómo hacer un carrusel infinito con estas tecnologías. Sigue la explicación con atención para entender cada paso.
Aceptar el consentimiento para ver esto
En el ejemplo que utiliza Sergio, pretende mostrar en un carrusel infinito una series de logos de tecnologías que se enseñan en nuestro Bootcamp Full Stack Web Developer. Para no utilizar nada de JavaScript, lo primero que hace es crear el siguiente código HTML, en el que se recogen los distintos logos mediante enlaces:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0"
/>
<link
rel="stylesheet"
href="./style.css"
/>
<title>Carrusel Infinito</title>
</head>
<body>
<section class="carousel">
<div class="logos">
<img decoding="async"
src="./logos/bootstrap-logo.png"
alt="Logo Bootstrap"
/>
<img decoding="async"
src="./logos/css-logo.png"
alt="Logo CSS"
/>
<img decoding="async"
src="./logos/html-logo.png"
alt="Logo HTML"
/>
<img decoding="async"
src="./logos/javascript-logo.png"
alt="Logo JavaScript"
/>
<img decoding="async"
src="./logos/logo-github.png"
alt="Logo GitHub"
/>
<img decoding="async"
src="./logos/logo-mysql.png"
alt="Logo MySQL"
/>
<img decoding="async"
src="./logos/logo-react-router.png"
alt="Logo React Router"
/>
<img decoding="async"
src="./logos/react-logo.png"
alt="Logo React"
/>
<img decoding="async"
src="./logos/logo-jwt.png"
alt="Logo JWT"
/>
</div>
<div
class="logos"
aria-hidden
>
<img decoding="async"
src="./logos/bootstrap-logo.png"
alt="Logo Bootstrap"
/>
<img decoding="async"
src="./logos/css-logo.png"
alt="Logo CSS"
/>
<img decoding="async"
src="./logos/html-logo.png"
alt="Logo HTML"
/>
<img decoding="async"
src="./logos/javascript-logo.png"
alt="Logo JavaScript"
/>
<img decoding="async"
src="./logos/logo-github.png"
alt="Logo GitHub"
/>
<img decoding="async"
src="./logos/logo-mysql.png"
alt="Logo MySQL"
/>
<img decoding="async"
src="./logos/logo-react-router.png"
alt="Logo React Router"
/>
<img decoding="async"
src="./logos/react-logo.png"
alt="Logo React"
/>
<img decoding="async"
src="./logos/logo-jwt.png"
alt="Logo JWT"
/>
</div>
</section>
</body>
</html>
En este código se repite la etiqueta div con el mismo contenido para poder conseguir el carrusel infinito. No obstante, se introduce aria-hidden para que ningún lector de pantalla repita las imágenes y sus textos alternativos.
En el archivo CSS partimos del siguiente código, donde se establecen algunas propiedades y medidas:
:root {
--carousel-speed: 15s;
--carousel-gap: 4rem;
--carousel-padding: 3.75rem;
--logo-width: 9rem;
--gradient-width: 15%;
@media (max-width: 768px) {
--carousel-padding: 2rem;
--carousel-gap: 2rem;
--logo-width: 6rem;
}
}
* {
box-sizing: border-box;
}
body {
margin: 0;
background: lightgray;
}
En este archivo CSS hay que editar las dos clases que hay en el archivo HTML, carousel y logos. De esta forma, podrás empezar a aplicar los estilos necesarios a cada una de las clases, así como a crear el carrusel infinito de logos. Para ello, puedes añadir el siguiente fragmento de código al archivo CSS:
.carousel {
position: relative;
background-color: white;
padding-block: var(--carousel-padding);
display: flex;
column-gap: var(--carousel-gap);
overflow-x: hidden;
box-shadow: 0 4px 10px rgb(0 0 0 / 15%);
.logos {
display: flex;
column-gap: var(--carousel-gap);
animation: scroll var(--carousel-speed) linear infinite;
will-change: transform;
img {
width: var(--logo-width);
object-fit: contain;
transition: scale 0.3s;
user-select: none;
&:hover {
scale: 1.10;
}
}
}
&:hover .logos {
animation-play-state: paused;
}
&::after,
&::before {
content: '';
position: absolute;
top: 0;
bottom: 0;
width: var(--gradient-width);
z-index: 1;
pointer-events: none;
}
&::before {
left: 0;
background-image: linear-gradient(to right, white, transparent);
}
&::after {
right: 0;
background-image: linear-gradient(to left, white, transparent);
}
}
@keyframes scroll {
0% {
transform: translateX(0);
}
100% {
transform: translateX(calc(-100% - var(--carousel-gap)));
}
}
Si quieres aprender cómo hacer más cosas con estas tecnologías y convertirte en un profesional para entrar a trabajar en el sector de la programación, apúntate a nuestro Bootcamp Full Stack Web Developer y empieza en este mundo sin necesidad de experiencia previa. ¡Te esperamos!
