Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Splides keep rewinding even with 'Rewind : False' and 'Type : Loop' #1340

Open
2 tasks done
OZORDI opened this issue Nov 19, 2024 · 1 comment
Open
2 tasks done

Splides keep rewinding even with 'Rewind : False' and 'Type : Loop' #1340

OZORDI opened this issue Nov 19, 2024 · 1 comment
Labels
bug Something isn't working

Comments

@OZORDI
Copy link

OZORDI commented Nov 19, 2024

Checks

Version

v4.1.4

Description

Heres a video showing my current splide with the rewind issue:

Heres a video showing the older version of my splide where i fixed the rewind issue but the Splide would stutter reaching the end:

I have a looping slider that has this weird wrap around after it reaches the last splide. I can confirm its not even a 'Rewind : True' somehow being set on it because trying to configure the wrap around time using 'rewindSpeed
: 2000' does not affect the rewind time. In addition i explicitly have "type: "loop" meaning rewind option should be ignored.

The first time i had it, I fixed it by setting 'autoHeight: true' and 'autoWidth: true' to my base config because I suspected Splide was having an issue figuring out the width of each slide. While it did fix the wrap around issue it caused the same stutter described in this issue. I then somehow regressed and the splides started wrapping around again.

Heres my current Splide config

<script type="module">
import Splide from 'https://cdn.jsdelivr.net/npm/@splidejs/[email protected]/+esm';

const splide = new Splide(".splide", {
    type: "loop",
    updateOnMove: true,
    perPage: 3,
    focus: "center",
    perMove: 1,
    start: 0,
    drag: false,
    easing: "cubic-bezier(.645, .045, .355, 1)",
    gap: "3rem",
    pagination: false,
    padding: "2rem",
    direction: "ltr",
    fixedWidth: '420px',
    speed: 1000,
    mediaQuery: 'max',
    breakpoints: {
        991: {
            perPage: 3,
            fixedWidth: '420px',
            autoHeight: true,
        },
        478: {
            gap: "3rem",
            padding: "4rem",
            perPage: 3,
            fixedWidth: '70vw',
            autoHeight: true,
        },
    },
});

// Mount the Splide instance
splide.mount();
</script>

Heres my older splide config

<script type="module">
import Splide from 'https://cdn.jsdelivr.net/npm/@splidejs/[email protected]/+esm';
document.addEventListener('DOMContentLoaded', () => {
    const splide = new Splide(".splide", {
        type: "loop",
        updateOnMove: true,
        perPage: 3,
        focus: "center",
        perMove: 1,
        start: 0,
        drag: false,
        easing: "cubic-bezier(.645, .045, .355, 1)",
        gap: "3rem",
        pagination: false,
        padding: "2rem",
        direction: "ltr",
        autoWidth: true,
        autoHeight: true,
        speed: 1000,
        mediaQuery: 'max',
        breakpoints: {
            991: {
                perPage: 3,
                autoWidth: true,
                autoHeight: true,
            },
            478: {
                gap: "3rem",
                padding: "4rem",
                perPage: 3,
                width: "70vw",
            },
        },
    });

    // Mount the Splide instance
    splide.mount();
});
</script>

Reproduction Link

Heres a js fiddle with a more complete setup of my old version. Its really a standard splide setup (besides the animated bg gradients)

Steps to Reproduce

Use my older splide config on a standard splide setup and you should get the weird stutter issue im describing
On my new splide config it just rewinds when reaching the last splide.

Expected Behaviour

The splides are supposed to infinitely loop smoothly with no stutter or wrapping. I can confirm Splide is still auto generating clones at runtime meaning the 'type:loop' option is working partially.

@OZORDI OZORDI added the bug Something isn't working label Nov 19, 2024
@waaverecords
Copy link

waaverecords commented Nov 19, 2024

Same here.

Just a simple config.

new Splide('.splide', { type: 'loop' });

It just rewinds instead of going foward with new clones.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

No branches or pull requests

2 participants