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

Fix wrap-around positioning logic to account for cellAlign, slidesToShow, & slidesToScroll #600

Merged
merged 7 commits into from
Nov 5, 2019

Conversation

dbangerter2
Copy link
Contributor

@dbangerter2 dbangerter2 commented Oct 14, 2019

Description

When wrapAround is set to true, the 2D scrolling carousel currently does not take various params into account when determining slide positioning (both when the slides are motionless and while they are transitioning). These params include cellAlign, slidesToShow, and slidesToScroll.

This can lead to various bugs when any of these 3 values deviate from the demo defaults. A simple example is demonstrated in the Github issue linked below:

"The behaviour can be reproduced pretty easily with the Demo-Sandbox by changing slidesToShow to 6 and wrapAround to true, see:
https://codesandbox.io/s/admiring-lamarr-60du4"

In this example, the last 2 slides are not visible (they are positioned to the left of "slide1" off-screen).

This PR updates the slide positioning logic for the 2d scrolling carousel to account for all of these parameters when wrap-around is enabled, so that the correct slides are being shown in the right positions (barring some extreme edge cases).

Fixes #548

Type of Change

Please delete options that are not relevant.

  • Bug fix (non-breaking change which fixes an issue)

How Has This Been Tested?

By setting the standard demo to have wrapAround always set to true, and then playing with various combinations of cellAlign, slidesToShow, and slidesToScroll.

Here is an example (without this PR's fix) of wrapAround: true and slidesToShow: 5. Slide #5 is incorrectly hidden, and if you scroll around for all the various cellAlign values ("left", "center", "right") there are generally one or more slides being hidden at any given time that shouldn't be.

https://codesandbox.io/s/sparkling-sun-ftt0u

Checklist: (Feel free to delete this section upon completion)

  • My code follows the style guidelines of this project (I have run yarn lint)
  • I have added tests that prove my fix is effective or that my feature works
  • New and existing unit tests pass locally with my changes (I have run yarn test and yarn test-e2e)
  • I have performed a self-review of my own code
  • I have commented my code, particularly in hard-to-understand areas
  • I have made corresponding changes to the documentation
  • For any breaking API changes, I have updated the type definitions in index.d.ts
  • My changes generate no new warnings
  • Any dependent changes have been merged and published in downstream modules

@sarmeyer
Copy link
Member

Hi @dbangerter2 thank you for submitting this PR! I'm testing it out today and will let you know any feedback I have (if any)

sarmeyer and others added 2 commits November 4, 2019 16:22
extra spaces a result of fixing merge conflicts
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

wrapAround and slidesToShow number being 1 less than number of slides leads to bad display
2 participants