Horizontal carousels have become a popular way to provide more information or options while conserving space. Nielsen Norman Group has an interesting article that does a deeper dive of carousels.
The tutorial will teach you how to build a working horizontal carousel in Axure. The finished carousel moves horizontally by swiping (or if used on a desktop, clicking and dragging).
- Create the elements you want in the carousel (it should be longer than the width of the screen).
2. Highlight the elements of the carousel and convert to dynamic panel (let’s call this DP1). It should automatically have the box “fit to content” checked off.
3. Selected the dynamic panel you created (DP2), create another dynamic panel (we’ll call this DP2).
4. Go to “Properties” of DP2 and uncheck the box for “fit to content”.
5. With the second dynamic panel selected, change the width of the dynamic panel to fit the screen width (or however wide you want the carousel to be). This creates the ability to move DP1 with DP2 acting as a frame.
6. In order to be able to drag or move DP1, we have to add a case. Select DP2 > Properties > Double click OnDrag to add a case. Since DP1 is the actual content that needs to be moved (DP2 is just the frame), you need to select DP1 under “Configure Actions”. This will make DP1 slide back and forth.
7. Select “Move” and on the right side panel select “DP1”. Next, configure actions with the following:
Move:
with drag xBoundary:
Left > is less than > 0 (stops frame from moving past the frame on the left side)
Right > is greater than or equal to > width of your frame or screen (stops frame from moving past frame on the right side)
8. Now, hit preview and you should be able to click and drag the carousel back and forth. If you test this on mobile, it should work just by swiping back and forth.
