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

Implement jumping to a specific page of the carousel. #52

Open paytonshaltis opened 1 year ago

paytonshaltis commented 1 year ago

In order to prepare for the implementation of the timeline in #29 as well as the wrap-jump wrapping method in #53, some method for jumping to the desired page in the carousel should be created. Doing this before the issues mentioned above means that the process will be more streamlined.

paytonshaltis commented 1 year ago

Should take some time to decide how 'pages' will work in a carousel. Take the following for example, and consider a scrollBy value of 3 and a wrapping method of either none or wrap-smart:

[1 2 3] 4 5 6 7 8 9 10 1 2 3 [4 5 6] 7 8 9 10 1 2 3 4 5 6 [7 8 9] 10 1 2 3 4 5 6 7 [8 9 10]

Scrolling to the right suggests 4 pages, but scrolling back suggests 4 different pages:

1 2 3 4 5 6 7 [8 9 10] 1 2 3 4 [5 6 7] 8 9 10 1 [2 3 4] 5 6 7 8 9 10 [1 2 3] 4 5 6 7 8 9 10

The best workaround for this situation is to simply do the following:

  1. Determine that there are 4 total pages, since 10 / 3 = 3.333 ~ 4.
  2. The user will start at page 1.
  3. When the user clicks on a page from their page, the currentScrollBy is set to scrollBy * ( |newPage - currentPage| ). So in this example, clicking on page 4 from 2 tries scrolling by 6. This should just stop right at the end.

This means that carousels with scrollBy values that do not go evenly into the total number of items will have different versions of pages, but there is no real way to avoid this.

Carousels that use wrap-simple will likely have even more combinations of pages due to the fact that they can roll over infinitely. Essentially, pages will just be quick ways of navigating X number of scrollBy distances.