Destaca tu contenido con carrusel con desplazamiento infinito en elementor
Los carruseles son widgets muy útiles para mostrar varios elementos de forma atractiva. Elementor agrega la opción de desplazamiento horizontal con css.
Cómo funciona el carrusel con desplazamiento automatico horizontal
Permite desplazarse entre tus contenidos de forma ininterrumpida hacia la izquierda o derecha sin necesidad de botones. Se adaptará automáticamente al tamaño de pantalla.
para añadir este efecto de carrusel con desplazamiento horizontal se tiene que colocar código css que te dejaré debajo, también te dejaré un video explicativo paso a paso como aplicarlo.
Html personalizado para colocar las imágenes del carrusel
<img class="alignnone size-full wp-image-1517"
src="" alt="" width="150" height="50" />
Css personalizado para dar el movimiento al carrusel
.elementor-testimonial__name {
margin-top: -30px;
}
selector .swiper-wrapper{
transition-timing-function: linear !important;
}
Css personalizado para el background en movimiento
.back-color {
background: linear-gradient(300deg, #4fd4b1, #71472f, #421e09);
background-size: 600% 600%;
-webkit-animation: AnimationName 13s ease infinite;
-moz-animation: AnimationName 13s ease infinite;
-o-animation: AnimationName 13s ease infinite;
animation: AnimationName 13s ease infinite;
}
@-webkit-keyframes AnimationName {
0%{background-position:0% 43%}
50%{background-position:100% 58%}
100%{background-position:0% 43%}
}
@-moz-keyframes AnimationName {
0%{background-position:0% 43%}
50%{background-position:100% 58%}
100%{background-position:0% 43%}
}
@-o-keyframes AnimationName {
0%{background-position:0% 43%}
50%{background-position:100% 58%}
100%{background-position:0% 43%}
}
@keyframes AnimationName {
0%{background-position:0% 43%}
50%{background-position:100% 58%}
100%{background-position:0% 43%}
}
