Elementor – Automated Lopping Image Scrolls with No Extra Plugin for Free

Add a HTML Widget and place this into the Content:

<div class="container">
  <div class="sliding-background"></div>
</div>



Then in Custom CSS for the HTM Widget add: (make sure that you modify the URL for the Image)

.container {
    overflow: hidden;
    display: flex;
}

.sliding-background {
  background: url("https://URL-for-image.jpg") repeat-x;
}


@keyframes slide {
  0% {
    transform: translate3d(0, 0, 0);
  }
  100% {
    transform: translate3d(-500px, 0, 0);
  }
}

.container div {
  height: 520px;
  min-width: 3000px;
  animation: slide 25s linear infinite;
}

Please Share

Help us to create Amazing Content!