Next Button Skips Multiple Slides on First Click in SplideJS

[squidiw]

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.1.4

Description

My parameters are { type:"loop" , padding:{ right: '10%', left: '10%'},}

Link to see whats happening -- https://github.com/Splidejs/splide/assets/39523709/6d18f096-721f-4650-8498-70487bb055a0

Reproduction Link

No response

Steps to Reproduce

https://github.com/Splidejs/splide/assets/39523709/6d18f096-721f-4650-8498-70487bb055a0

Expected Behaviour

When next button is clicked it should move only one slide.

[eiiot]

Running into this exact same issue, did you ever figure out a fix?

[squidiw]

Nope not yet

[Webberjo]

Try setting perMove to 1.

[squidiw]

Try setting perMove to 1.

Yes sir, I already do have that in my settings.

This is how it looks. 1366:{ type:'loop', start:0, //I even added start 1 & 0 to see if it helped but nothing. padding:{ right: '10%', left: '10%'}, perPage:{{ section.settings.number_of_slides }}, gap:'24px', perMove:1, }

[Webberjo]

I'm unable to reproduce this using those options in Splide 4.1.4. https://jsfiddle.net/Webberjo/d5hx70m1/4/

Do you have options being set on the splide element in the HTML that may be interfering with the JS options?

[squidiw]

I'm unable to reproduce this using those options in Splide 4.1.4. https://jsfiddle.net/Webberjo/d5hx70m1/4/

Do you have options being set on the splide element in the HTML that may be interfering with the JS options?

No, no data attributes being used at the moment, is there a way to reach you, so I can send you a link to the website with this issue and maybe looking at it you can see something that I'm missing?

I checked your portfolio and I saw your hotmail, you still using it?

[Webberjo]

Why not include a link to your page with the issue here?

[squidiw]

It’s a shopify store and some clients are a bit weird about posting their store links but yeah I guess I can post it here in the meantime - https://www.ettika.com/

Please scroll down almost to the footer and you'd see it. And also this issue with the slider is only on desktop.

[Webberjo]

If you're programmatically adding slides after the slider has been mounted, try doing slider.refresh() afterwards.

[squidiw]

Thnak you @Webberjo adding refresh() and manually adding event listeners to the arrow buttons fixed it.

@eiiot , this is exact what I did.

document.addEventListener('DOMContentLoaded', function() {
        let splide = new Splide( '.splide.wearconfidence', {
        // params here
        }
    });
    splide.mount();
    splide.refresh();
    const prevButton = document.querySelector('.splide__arrow--prev');
    const nextButton = document.querySelector('.splide__arrow--next');

    if (prevButton) {
        prevButton.addEventListener('click', function() {
            splide.go('-1');
        });
    }

    if (nextButton) {
        nextButton.addEventListener('click', function() {
            splide.go('+1');
        });
    }