search

paytonshaltis / freighter

🚂 Freighter is a highly-customizable HTML carousel library featuring a number of dynamic properties affecting carousel items and transitions. Most prominently, it gives complete control over the resizing method (for responsive layouts) as well as the wrapping method (for content display).
https://paytonshaltis.github.io/freighter
MIT License
1 stars 0 forks source link

Give the programmer the option to end wrapping. #44

Closed paytonshaltis closed 1 year ago

paytonshaltis commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

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.