Origami Studio Tutorial #3 | Create horizontal paging carousels – UX Hacker

Origami Studio Tutorial #3 Create horizontal paging carousels UX Hacker.

#FacebookOrigami #OrigamiTutorials

Sometimes we want scrolling to be paginated, or in a carousel. We are going to build this Facebook Events prototype, with paginated scrolling, building upon what we’ve learnt in the Scrolling Views. Make sure you download the tutorial files to follow along.

Setting up
If you’re starting from the tutorial files, you should see that we have our assets in place. We have five cards for our carousel, each the same width, and each the same distance from each other at 10 points. They are placed in a Group that is the width of all the cards in line, with the usual 10 points padding at the start and end.

Adding scroll
We add scroll like any other interaction — by hovering over the layer, clicking on Touch, and then clicking on a Scroll option. We want horizontal scrolling, so select Scroll X.

What we end up with on the Patch Editor is a Scroll patch, connected directly to the X position of that layer — the H-Scroll Group.

Scrolling the H-Scroll Group works fine, but it is set to Free scrolling. To make the Scroll Paging, we need to change the Scroll X input from Free to Paging.

For any full-width paging scrolling, this would be fine. But because our cards are actually smaller than the width of the screen, we need to tell the Scroll exactly how big one of these cards, or pages, is.

To give the Scroll settings, we need to add a Scroll Settings patch. Double-click on the Patch Editor ⌘⏎ and type to find Scroll Settings. Press Return ⏎.

Connect the output of the Scroll Settings patch to the Settings input on the Scroll patch.

There’s a ton of settings here, and we don’t usually need to use them all. Start by changing the Page Size input to have a width of 275 — the same as an individual card.

Change the Padding to a width of 10 — the same as the padding between each of the cards. We are not changing the height from 0 because vertical scrolling is not applicable in this prototype.

source