Slider de Logos o Imágenes con desplazamiento infinito en Elementor

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: En este tutorial utilizamos widgets personalizados de HTML dentro de Elementor, la plataforma de diseño visual más utilizada en WordPress.

• 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

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.