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

Give the programmer the option to end wrapping. #44

Closed
paytonshaltis opened this issue Nov 29, 2022 · 2 comments · Fixed by #48
Closed

Give the programmer the option to end wrapping. #44

paytonshaltis opened this issue Nov 29, 2022 · 2 comments · Fixed by #48
Assignees
Labels
enhancement New feature or request
Milestone

Comments

@paytonshaltis
Copy link
Owner

If a carousel has a number of items visible that is not a multiple of the total number of items, the wrapping causes elements to lose their grouping on the screen. For example, imagine a carousel shows 3 elements at a time and has 4 items:

[ 1 2 3 ] 4

Scrolling by 2 now would result in:

[ 3 4 1 ] 2

Rather than the idealized behavior after this issue is implemented:

[ 2 3 4 ] 1

This would make the eventual carousel timeline in #29 much more clear, as there are two pages that can be generated by scrolling by 2:

[ 1 2 3 ] 4
[ 2 3 4 ] 1

@paytonshaltis paytonshaltis added the enhancement New feature or request label Nov 29, 2022
@paytonshaltis paytonshaltis added this to the 2.0.0 Release milestone Nov 29, 2022
@paytonshaltis paytonshaltis self-assigned this Nov 29, 2022
@paytonshaltis
Copy link
Owner Author

Changing this issue to be a part of the 1.0.0 release. Implementation shouldn't be too difficult; essentially just need to modify the function that wraps top and bottom pointers slightly.

@paytonshaltis
Copy link
Owner Author

paytonshaltis commented Nov 29, 2022

Strategy:

If the user scrolls left, check to see if the bottom pointer is crossing over to the negatives from a position other than 0. If we are on the first item, the carousel should scroll backward an entire this.carouselItemsVisible. If another item tries to scroll into the negatives, its top and bottom pointers should only move down the number of positions it takes to reach index 0. Then, the two calls to transformCarouselItems() need to use this temporary scrollBy value rather than the idealized one.

If the user scrolls right, check to see if the top pointer is crossing over to a number that is greater than the length from a position other than the length. If we are on the last item, the carousel should scroll forwards an entire this.carouselItemsVisible. If another item tries to scroll into the range greater than the length, its top and bottom pointers should only move up the number of positions it takes to reach the length. Then, the two calls to transformCarouselItems() need to use this temporary scrollBy value rather than the idealized one.

This may involve the management of a new instance variable, this.currentCarouselScrollBy, which is used in place of this.carouselScrollBy. By default, the two values are the same, but if one of the above occurs, it will be set temporarily (just until the two transformations are complete) to the value needed to reach either 0 or the length (always less than this.carouselScrollBy).

This of course will be toggleable by some additional option when constructing a Carousel, which essentially ignores all of the calculations that are indicated above.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request
Projects
None yet
Development

Successfully merging a pull request may close this issue.

1 participant