v5 scroll to end results in whitespace

[joekur]

Bugs and Questions

Describe Your Environment

• What version of nuka-carousel are you using? 5.5.1
• What version of React are you using? 17.0.2
• What browser are you using? Desktop Chrome, Version 111.0.5563.64 (Official Build) (x86_64)

Describe the Problem

Previously in v4, when using slidesToScroll="auto", scrolling to the end of the slides would align the last slide with the right edge of the carousel, leaving no extra whitespace:

Link to the sandbox

In v5 however, scrolling to the end of the carousel can leave the last slide with whitespace to its right, despite the docs stating that:

Set scrollMode="remainder" if you don't want to see the white space when you scroll to the end of a non-infinite carousel.

Link to the sandbox

Expected behavior:

Scrolling to the end of slides aligns the final slide to the right side of the carousel.

Actual behavior

Scrolling to the end of the slides leaves whitespace to the right of the final slide.

Additional Information

I noticed some other changes, potentially bugs, unrelated to the main issue:

• cellSpacing used to not add left padding to the first slide in v4, but in v5 it does, causing the first slide to not align with the carousel container
• In v4, each scroll action would result in the left-most visible slide being left-aligned with the carousel container. But in v5, when using cellSpacing, this is no longer the case. The offset appears to grow with each page scrolled. Note that the main issue is still present when cellSpacing is not used, so these two issues don't seem strictly related.
• The 'next' button in the v5 examples is no longer disabling when I reach the end of the slides

I'm not sure how many of these are related, so for the time being I haven't created separate issues.

[joekur]

I'm not yet super familiar with the source code, but I think this may be the section that was handling this case if v4 of nuka-carousel: https://github.com/FormidableLabs/nuka-carousel/blob/v4.8.4/src/index.js#L712-L721

[joekur]

I have been working on fixes to these issues on a fork. Since I mentioned a few different issues above, specifically I am fixing:

• Such that scrolling to the end of the carousel with scrollMode='remainder' aligns the last slide to the right of the container, leaving no extra whitespace
• When using cellSpacing, left-align the first slide to the container based on its content, not where its left-padding ends
• Fix the default next button so it is disabled when scrolling to the end (when using slideWidth, such that slidesToShow is dynamically calculated)

Before I start opening PRs, I wanted to check that my expectations of functionality match yours, particularly for the first two issues.

On this one I mentioned in the PR description:

In v4, each scroll action would result in the left-most visible slide being left-aligned with the carousel container. But in v5, when using cellSpacing, this is no longer the case. The offset appears to grow with each page scrolled. Note that the main issue is still present when cellSpacing is not used, so these two issues don't seem strictly related.

I wasn't able to reproduce that in this package's storybook, I'm not sure why it's happening in my sandbox example.

[carbonrobot]

Closing as we have moved several versions past this one and the API no longer exists