akiran / akiran/react-slick

With infinite:true and centerMode:true, when swiping make a complete tour the first slide becomes the selected slide

Open
#1,600 2 comments 1 reaction 0 assignees View on GitHub
Dominant language
JavaScript
Stars
11.9k
Forks
2.1k
PR merge metrics
No merged PRs in 30d

Description

Let's say I have a carousel with 5 slide, `centerMode = true`, `infinite = true` and `swipeToSlide = true`.
I'm currently at slide 3, I swipe to the right, pass beyond the first slide (slide 0) and stop above slide 2.

**Expected behaviour**: slider stops at slide 2.
**Current behaviour**: slider moves to slide 0.

You can verify this behaviour with the [official Multiple Rows example](https://react-slick.neostack.com/docs/example/multiple-rows).

Checking the code it doesn't looks like a bug, you can see in [/utils/innerSliderUtils.js](https://github.com/akiran/react-slick/blob/640ce007ab0a1764203aae3f5b21c95d7e65250b/src/utils/innerSliderUtils.js#L201)
```js
} else if (centerMode && animationSlide >= slideCount) {
animationSlide = infinite ? slideCount : slideCount - 1;
finalSlide = infinite ? 0 : slideCount - 1;
```

Is this a correct behaviour? This doesn't happens If `centerMode = false` or I'm swiping in left direction.

In my opinion it should be:
```js
} else if (centerMode && animationSlide >= slideCount) {
animationSlide = infinite ? animationSlide : slideCount - 1;
finalSlide = infinite ? animationSlide%slideCount : slideCount - 1;
```

Or there is a particular reason why it does that? I did some test and I don't see any side effect with this change.

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.