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

Slider goes from 1st slide directly to 3th slide instead of 2nd #848

Closed
2 tasks done
kapenzo opened this issue Jun 30, 2022 · 2 comments
Closed
2 tasks done

Slider goes from 1st slide directly to 3th slide instead of 2nd #848

kapenzo opened this issue Jun 30, 2022 · 2 comments
Labels
bug Something isn't working

Comments

@kapenzo
Copy link

kapenzo commented Jun 30, 2022

Checks

Version

v4.0.7

Description

In our configuration we want to show always 3 slides. The centered slide is the "selected" one.
The problem appears only when slider has 3 slides - slider is going directly from first to last slide after pressing the "next" button.

Splide configuration:
const splide = new Splide(".splide", {
trimSpace: false,
perPage: 3,
perMove: 1,
focus: "center"
}).mount();

Reproduction Link

https://codesandbox.io/s/elated-shadow-90s0jg

Steps to Reproduce

  1. Click the next (right arrow) button.
  2. The last element is selected.

Expected Behaviour

Expected is that after clicking next btn the slider will go to the second slide.

@kapenzo kapenzo added the bug Something isn't working label Jun 30, 2022
@Sniks6
Copy link

Sniks6 commented Aug 3, 2022

Hi @ALL,

same problem here with v4.0.7 and this config:
{
"type":"slide",
"perPage":5,
"perMove": 1,
"focus":"center",
"trimSpace": false,
"updateOnMove": true,
"pagination":false,
"breakpoints":{
"800": {
"perPage": 3
}
}
}

When changing screenwidth to a width less than the breakpoint (800px), the arrow buttons work exactly as expected.

Perhaps this information helps troubleshooting.

Regards, Alex

EDIT: Just tried changing the "type": works as expected with type: "loop".

@Sniks6
Copy link

Sniks6 commented Aug 3, 2022

After a little more research I found out, that the problem depends on the number of splide__slides:

In my case: I had 5 slides and perPage was set to 5. Normally (with trimSpace true) this five Slides would fit on one page.
Because trimSpace was set to false, slide 4 and 5 were on the second page. This seems to be the problem.

After adding a 6th slide everything worked like a charm.

Same with the example above: https://codesandbox.io/s/elated-shadow-90s0jg
If you add another slide (from 3 to 4 slides), it works like it should.

The number of slides has to be bigger than the "perPage" variable.

I hope this information helps fixing the bug.

Cheers, Alex

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