Wrong active dots calculation

Describe the bug A clear and concise description of what the bug is.

To Reproduce Steps to reproduce the behavior:

1. Create a carousel with 5 items
2. Pass following props:

<Carousel
  ...
  dots
  slidesPerPage={2}
  slidesPerScroll={2}
>

1. Keep changing active slides
2. Notice the order of active dots (it’s repeatable 1, 3, 5, 2, 4)

Expected behavior Probably active dots should be calculated differently for this kind of situation.

Screenshots

Desktop (please complete the following information):

• OS: [macOS 10.14.6]
• Browser [Chrome]
• Version [79.0.3945.88]

---

IssueHunt Summary

Backers (Total: $0.00)

Become a backer now!

Or submit a pull request to get the deposits!

Tips

• Checkout the Issuehunt explorer to discover more funded issues.
• Need some help from other developers? Add your repositories on IssueHunt to raise funds.

[Lukasz-pluszczewski]

@piotr-s-brainhub 5: [5, 1] instead of 5: [5, empty-space] makes sense if infinite is on. But the problem @pierzchalatomasz described is that when I have slidesPerPage={2}, slidesPerScroll={2} and 6 “slides”, the actual number of pages is 3, so some users expect to have 3 dots. The issue here is that we always use the slide index and not page index. The reason for this is that we can have slidesPerPage={2} but slidesPerScroll={3}. What number of “pages” are there then? Not 3, because after clicking right arrow you end up on “page” 2,5. You can also have slidesPerPage={2} and controlled carousel, and pass the index 1 or 3 to it. You would be on a half page then.

I would leave the indexing as is, and the users just need to implement dots by themselves to have the behaviour @pierzchalatomasz suggested.

[pierzchalatomasz]

Hi @jamsinclair,

In this situation we have 5 scenes (I mean slides visible at one time) in the following order (where [1, 2] meaning scene with slides 1 and 2 etc.):

1. [1, 2]
2. [3, 4]
3. [5, 1]
4. [2, 3]
5. [4, 5]

I would expect that dots are calculated based on the index of scene instead of the first item in a current scene i.e. dots should be activated in the following order: 1 => 2 => 3 => 4 => 5 instead of 1 => 3 => 5 => 2 => 4.