# Carousel with many items

**URL:** <https://forums.fusetools.com/t/carousel-with-many-items/5322>\
**Category:** How-to Discussions\
**Created:** [October 9, 2017, 11:40am UTC](https://forums.fusetools.com/t/carousel-with-many-items/5322 "2017-10-09T11:40:07Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![mircea](https://avatars.discourse-cdn.com/v4/letter/m/22d042/32.png) [@mircea](https://forums.fusetools.com/u/mircea)\
**Post date:** [October 9, 2017, 11:40am UTC](https://forums.fusetools.com/t/carousel-with-many-items/5322/1 "2017-10-09T11:40:07Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![Uldis](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/uldis/32/657_2.png) [@Uldis](https://forums.fusetools.com/u/Uldis)\
**Post date:** [October 9, 2017, 11:59am UTC](https://forums.fusetools.com/t/carousel-with-many-items/5322/2 "2017-10-09T11:59:22Z")

</div>

Perhaps you could use a [Navigator](https://www.fusetools.com/docs/fuse/controls/navigator) with [SwipeNavigate](https://www.fusetools.com/docs/fuse/navigation/swipenavigate). There is also a [RouterModify](https://www.fusetools.com/docs/fuse/navigation/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!

---

<div class="post-metadata">

**Author:** ![mircea](https://avatars.discourse-cdn.com/v4/letter/m/22d042/32.png) [@mircea](https://forums.fusetools.com/u/mircea)\
**Post date:** [October 13, 2017, 1:25pm UTC](https://forums.fusetools.com/t/carousel-with-many-items/5322/3 "2017-10-13T13:25:38Z")

</div>

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](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.

---

<div class="post-metadata">

**Author:** ![toto007](https://avatars.discourse-cdn.com/v4/letter/t/e19adc/32.png) [@toto007](https://forums.fusetools.com/u/toto007)\
**Post date:** [October 19, 2017, 11:15pm UTC](https://forums.fusetools.com/t/carousel-with-many-items/5322/4 "2017-10-19T23:15:23Z")

</div>

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