Carrusel con desplazamiento vertical

Destaca tu contenido con carruseles verticales en Elementor

Los carruseles son widgets muy útiles para mostrar varios elementos de forma atractiva. Elementor agrega la opción de desplazamiento vertical.

Cómo funciona el carrusel con desplazamiento infinito vertical

Permite desplazarse entre tus contenidos de forma ininterrumpida hacia arriba o abajo sin necesidad de botones. Se adaptará automáticamente al tamaño de pantalla.

para añadir este efecto de carrusel con desplazamiento vertical se tiene que colocar código css que te dejaré debajo, también te dejaré un video explicativo paso a paso como aplicarlo.

Css para dar movimiento hacia arriba al carrusel

				
					.carrusel-vertical-1 {
  animation: looping 10s linear 0s infinite none;
}

.columna-vertical-1 {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(
    transparent,
    black 20%,
    black 80%,
    transparent 100%
  );
  mask-image: linear-gradient(
    transparent,
    black 20%,
    black 80%,
    transparent 100%
  );
}

@keyframes looping {
  0% {
    transform: translateY(0px);
  }
  100% {
    transform: translateY(-100%);
  }
}
@media only screen and (max-width: 767px) {
  .columna-vertical-1 {
    width: 100px;
  }
}

Css para dar movimiento hacia abajo al carrusel

				
					.carrusel-vertical-2 {
  animation: looping 12s linear 0s infinite none reverse;
  animation-direction: reverse;
}

.columna-vertical-2 {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(
    transparent,
    black 20%,
    black 80%,
    transparent 100%
  );
  mask-image: linear-gradient(
    transparent,
    black 20%,
    black 80%,
    transparent 100%
  );
}

@keyframes looping {
  0% {
    transform: translateY(0px);
  }
  100% {
    transform: translateY(-100%);
  }
}

@media only screen and (max-width: 767px) {
  .columna-vertical-2 {
    width: 100px;
  }
}

Color de background animado que se usa en el video

				
					.back-color {
    background: linear-gradient(297deg, #17f2b9, #0a8d6a, #06513d);
    background-size: 600% 600%;

    -webkit-animation: AnimationName 14s ease infinite;
    -moz-animation: AnimationName 14s ease infinite;
    animation: AnimationName 14s ease infinite;
}

@-webkit-keyframes AnimationName {
    0%{background-position:0% 33%}
    50%{background-position:100% 68%}
    100%{background-position:0% 33%}
}
@-moz-keyframes AnimationName {
    0%{background-position:0% 33%}
    50%{background-position:100% 68%}
    100%{background-position:0% 33%}
}
@keyframes AnimationName {
    0%{background-position:0% 33%}
    50%{background-position:100% 68%}
    100%{background-position:0% 33%}
}

Video completo de carrusel con desplazamiento vertical en elemntor

Artículo escrito por:

Hola, soy Kevin Salazar Zarate, especialista en Wordpress.
Soy una persona autodidacta que le gusta aprender y enseñar a los demás mis conocimientos, ya que cuando enseñas aprendes el doble.