Autoscroll slider in Bricks

How To
1

Hi,

I created an autoscroll slider on this page: Blending Vocals

I added this code to create the auto scroll effect:

<script>
  document.addEventListener("DOMContentLoaded", function(event) { 
   new Splide( '#splide',{
   autoScroll:{
     speed: 0.25,
     pauseOnHover: false,
     pauseOnFocus: false,
     drag: false,
     
   },
   } ).mount( window.splide.Extensions );

    //end doc ready
});
 
</script>

However it doesn’t loop all the images when it reaches the end:
image

After deleting my own code the issue still persists.

I have several questions about this:

  • What is causing this break in the loop?
    • Even on mobile when I’m only showing 5 pictures the break appears.
    • Does the slider need to be bigger than the viewport or something?
  • Could my own code be interfering with the slider? If so, is there a better way to implement an autoscroll slider in Bricks?
1 Like
2

I kinda got it to work with a hacky solution: I made the slider have a min-width of 120vw and a margin of -30%> put in a div with overflow:hidden.

It’s still not perfect. Is there a better way to achieve this?

3

SOLVED: If anyone else is wondering. You have to put the images to eager load instead of lazy load.

1 Like