Carousel with many items

Hi

Here is a simple scenario that I don’t know how to approach: I have some albums which can have dozens of pictures. I want users to open an album and be able to scroll between the pictures.

Creating a page control with 50 or so items doesn’t sounds like a smart approach. In a normal scenario I’d make a page control (or similar component) with 5 elements and load/unload the pictures at the front/back on swipe complete. However that wouldn’t work in a page control since it would need to support endless/circular swiping and now it would stop on the 5th picture.

How can such a slider be implemented?

Perhaps you could use a Navigator with SwipeNavigate. There is also a RouterModify (and its JS counterpart) which works with bookmarks you can create (“prev” and “next” would make for meaningful bookmarks).

Hope this helps you get started, let us know how it goes!

I’ve looked into Navigator and RouterModify but I ended up going with a PageControl with 3 pages since that seemed like a more natural approach to me.

If anyone is interested they can download it here: https://www.dropbox.com/s/yzff99m6x6ci7a1/looping-carousel.zip?dl=0

When swiping to the next or previous slide, I force jump to slide 2 on swipe complete.
Slides 1 and 3 contain the next/prev pics respectively, slide 2 contains all 3 pics on top of each other (with the active one always having an opacity of 1 and the others being 0)

It might now be the most optimal solution but it works as intended and it should be pretty light on the performance front.

compliment for work. I do not know how you did but it’s really hard :slight_smile: