Auto scroll glitching at end of loop

[ZeroRWV]

Hi,

Such a bummer the author isn't active anymore, so I hope some kind people here can help me. I have constructed a marquee banner with Auto Scroll, and it works nicely until it hits the end of the line. When it has run through all the clones, it starts to jump/glitch. Inspecting I see the translateX value just loops through a small range once it has reached the end. I would very much appreciate some help.

Here is my code:

<div id="splide-uxui" class="splide marquee-noverflow" role="group" aria-label="Letsgooo">
    <div class="splide__track">
        <div class="splide__list scroll-marquee-container">
            <div class="splide__slide scroll-marquee-text">UX UI</div>
            <div class="splide__slide scroll-marquee-text">UX UI</div>
            <div class="splide__slide scroll-marquee-text">UX UI</div>
            <div class="splide__slide scroll-marquee-text">UX UI</div>

        </div>
    </div>
</div>
        
<script>
document.addEventListener( 'DOMContentLoaded', function() {
            
            //First splider
            var splide = new Splide( '#splide-uxui', {
                type   : 'loop',
                drag   : false,
                focus  : 'center',
                arrows : false,
                autoWidth: true,
                pagination: false,
                autoScroll: {
                    speed: 40,
                    autoStart: true,
                    pauseOnHover: false,
                },
            } ).mount( window.splide.Extensions );
 } );

 </script>