Un slider de logos es una excelente manera de mostrar múltiples marcas o imágenes en un espacio limitado. El código HTML y CSS te permitirá implementar un slider de logos de forma sencilla y efectiva en tu sitio web de Elementor.
Cómo Funciona
Vamos a utilizar HTML para estructurar el slider y las imágenes de los logos. Además, emplearemos CSS para el diseño y la animación del slider. El código incluye:
- Un contenedor principal llamado
.slider
. - Dos subcontenedores
.logos
que contienen las imágenes. - Estilos CSS para controlar el desbordamiento, la animación y otros aspectos visuales.
Casos de Uso
Este snippet es especialmente útil para:
- Mostrar logos de clientes en páginas de inicio o páginas de cartera.
- Crear una galería de imágenes de productos.
- Presentar logos de patrocinadores en eventos o blogs.
Instrucciones de Implementación
Crea un contenedor de ancho completo (Disposición > Contenedor > Ancho completo). Y añade la clase ‘contenedor-slider‘ al contenedor (Avanzado > Disposición > Clases CSS):
Añadimos Widget HTML en el contenedor
En el campo HTML añade la siguiente estructura de clases:
- slider
- logos
- imagen
- imagen
- imagen
- logos
- imagen
- imagen
- imagen
- logos
Ejemplo:
Este es un ejemplo para 5 imágenes, debes repetir el div .logos exactamente igual.
<div class="slider"> <div class="logos"> <img decoding="async" src="https://www.generacionweb.es/wp-content/uploads/2023/03/presentacion-despedidas.jpg" alt="logo-abc" width="150"> <img decoding="async" src="https://www.generacionweb.es/wp-content/uploads/2021/11/presentacion-brokenwand.jpg" alt="logo-abc" width="150"> <img decoding="async" src="https://www.generacionweb.es/wp-content/uploads/2023/03/farmamut-presentacion.jpg" alt="logo-abc" width="150"> <img decoding="async" src="https://www.generacionweb.es/wp-content/uploads/2021/11/diseno-web-tutonerytinta.png" alt="logo-abc" width="150"> <img decoding="async" src="https://www.generacionweb.es/wp-content/uploads/2023/03/cucocan-presentacion.jpg" alt="logo-abc" width="150"> </div> <div class="logos"> <img decoding="async" src="https://www.generacionweb.es/wp-content/uploads/2023/03/presentacion-despedidas.jpg" alt="logo-abc" width="150"> <img decoding="async" src="https://www.generacionweb.es/wp-content/uploads/2021/11/presentacion-brokenwand.jpg" alt="logo-abc" width="150"> <img decoding="async" src="https://www.generacionweb.es/wp-content/uploads/2023/03/farmamut-presentacion.jpg" alt="logo-abc" width="150"> <img decoding="async" src="https://www.generacionweb.es/wp-content/uploads/2021/11/diseno-web-tutonerytinta.png" alt="logo-abc" width="150"> <img decoding="async" src="https://www.generacionweb.es/wp-content/uploads/2023/03/cucocan-presentacion.jpg" alt="logo-abc" width="150"> </div> </div>
Añadimos los CSS para hacer la magia.
En este ejemplo, como hay 5 imagenes, el ancho de la imagen se divide entre 5, lo verás en width: calc(100% / 5), en el caso de tener 10 fotos tienes que cambiar el 5 por el 10.
.contenedor-slider { overflow: hidden; } .contenedor-slider .slider { animation: slidein 30s linear infinite; white-space: nowrap; } .contenedor-slider .slider .logos { width: 100%; display: inline-block; margin: 0px 0; } .contenedor-slider .slider .logos img{ width: calc(100% / 5); animation: fade-in 0.5s cubic-bezier(1.455, 0.03, 0.515, 0.955) forwards; } .contenedor-slider .slider .logos img { padding: 0 75px; } @media (max-width: 769px) { .contenedor-slider .slider .logos img { padding: 0px!important; } } @keyframes slidein { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-100%, 0, 0); } } @keyframes fade-in { 0% { opacity: 0; } 100% { opacity: 1; } }
Optimización y Mejores Prácticas
- Asegúrate de que las imágenes de los logos estén optimizadas para la web para mejorar la velocidad de carga.
- Utiliza atributos
alt
descriptivos para mejorar la accesibilidad. - Puedes ajustar la velocidad y el tiempo de la animación modificando los valores en el código CSS.