Famo.us images carousel

Question

How can I create simple image carousel. Let's say I have GridView with two rows and one column. I want to create image carousel in upper row. Can I do that with ScrollView. Any sugestions?

Answer 1

You have the right idea. You can use gridLayout just to keep your sizing in line, and using scrollView is perfectly fine.

I do not know exactly how you imagine such a carousel working, but one option to be aware of in scrollview is the 'paginated' option. This allows you to easily define target positions for scrollview to stop and snap to, similar to a scroll picker on native. Or if you want the sources definition..

 * @param {Boolean} [paginated=false] A paginated scrollview will scroll through items discretely
 * rather than continously.

The next thing you may want to think about is how a carousel goes round and round and never reaches an end like scrollview would. There is no option for this by default, but I found a way it can easily be done. It may be a bit trickier with smaller images, but here is an example I did for a infinite panorama.

Transforming Panoramas for Virtual Tours with famo.us, has it been done?

The trick was to use a second duplicate image trailing the scrollview and when scrollview was in the right position, we could jump it back to the beginning, with no visual evidence to the user.

Here is the live example..

http://higherorderhuman.com/examples/infinite.html

Hope this helps you get started!