Making Slides Slider Move Smoothly or like Marquee, Bricks Builder

Sinan IslerJanuary 6, 20240 comments Bricks Builder, WordPress

%root% * {
transition-timing-function: linear;
}

/* or */

%root%  .splide__list {
transition-timing-function: linear !important;
}

to make slide moving like marquee;

what is linear?

this is linear and it means constant speed.
why are we making linear ?

because default setting is ease and this is ease as you can see it slows down/stops when animating

UPDATE: METHOD 2

this is bit better because it is more native to bricks slide splide library

this uses the auto scroll extension for marquee style infinite loop and no need to set any css …etc works fine one or multiple slide same tim just multiply the Splide line as many as you want and change the slide ID thats it.

keep it in mind this script needs to laod on footer as last script or it will not overwrite the native slide settings

<script src="https://cdn.jsdelivr.net/npm/@splidejs/splide-extension-auto-scroll/dist/js/splide-extension-auto-scroll.min.js"></script>

<script>
    document.addEventListener("DOMContentLoaded", function () {
      var options = {
        autoScroll: {
          speed: 0.5,
        },
      };

      new Splide('#brxe-ttnwwi', options).mount({ AutoScroll: window.splide.Extensions.AutoScroll });
      new Splide('#brxe-mdtqxx', options).mount({ AutoScroll: window.splide.Extensions.AutoScroll });
    });
</script>