AutoScroll & loop doesn't loop instead keeps scrolling and showing empty carousel

sebszocinski commented 2 years ago

Checks

[X] Not a duplicate.
[X] Not a question, feature request, or anything other than a bug report directly related to Splide. Use Discussions for these topics: https://github.com/Splidejs/splide/discussions

Version

v4.0.7

Description

Using the AutoScroll plugin and type loop seems to not loop properly and after a period of time will eventually just continue to scroll past and show an empty carousel. When inspecting the carousel I can see the transform: translateX inline style is continuously running up to 40000px +

My configuration is:

const splide = new Splide(this.$refs.carousel, {
    type: "loop",
    autoScroll: {
        speed: 1,
        rewind: true,
        pauseOnHover: false,
        pauseOnActive: false,
    },
    perPage: 4,
    gap: "3rem",
    padding: {
        right: "20rem",
    },
    speed: 3000,
    arrows: false,
    pagination: false,
    breakpoints: {
        640: {
            perPage: 2,
            gap: "2rem",
            padding: {
                left: "1rem",
                right: "1rem",
            },
        },
    },
});

Reproduction Link

No response

Steps to Reproduce

Setup a carousel and use the AutoScroll plugin plus enable loop mode.

Expected Behaviour

The carousel should loop

sebszocinski commented 2 years ago

More detail:

This only happens when you leave the carousel scrolling automatically by itself. If you interact with it (ie drag) the translateX number will come back down and slides are visible again.
I'e also confirmed this is happening every time once the carousel auto scrolls to the end + any clone slides.

In summary it just doesn't seem to work with loop mode.

NaotoshiFujita commented 2 years ago

How to reproduce the issue? It's working on my site. https://splidejs.com/extensions/auto-scroll/

Splidejs / splide