Swiping Slideshow Tutorial

In this tutorial, you'll learn how to make a carousel, banner, or content slideshow that you can browse by swiping left and right on a mobile device.

Note

Click here to download the completed RP file for this tutorial.

1. Widget Setup

Create the First Slide

  1. Open a new RP file and double-click Page 1 in the Pages pane to open it on the canvas.

  2. Drag a rectangle widget onto the canvas from the Libraries pane and set its fill color to blue with the Fill Color selector in the Style pane or style toolbar.

  3. Right-click the rectangle and select Create Dynamic Panel in the context menu.

Create the Second Slide

  1. Double-click the dynamic panel to edit its states.

  2. At the top of the canvas, click State 1. At the bottom of the dropdown that appears, click Add State and press ENTER to create State 2.

  1. Drag a rectangle widget onto the State 2 canvas, drop it at (0,0), and set its fill color to red.

Create the Third Slide

  1. Repeat steps 5 and 6 to create State 3 with its own rectangle widget. Make the rectangle widget green.

  2. Click Close at the top-right of the canvas or press ESC to exit state-editing mode.

Note

When creating your own carousels, you can include any widgets you'd like in each of the dynamic panel's states.

2. Add a Swipe Left Interaction

  1. Select the carousel dynamic panel and click New Interaction in the Interactions pane.

  2. Select the Swiped Left event in the list that appears, and then select the Set Panel State action.

  3. Select This Widget in the Target dropdown.

  4. In the State dropdown, select Next and check the box for Wrap from last to first.

  5. Under Animate In, select Slide Left. Notice that the Animate Out section automatically changes to match this selection.

  6. Click OK to save the action.

3. Add a Swipe Right Interaction

Repeat Step 2 with the Swiped Right event. Set the dynamic panel's state to Previous instead of Next, and choose Slide Right for the Animate In animation.

4. Preview the Interaction

Preview the page and swipe the carousel left and right to browse through its slides.

Tip

To preview the interaction on a mobile device, upload your RP file to Axure Cloud and then navigate to its share link on your mobile device. You can also use the Axure Cloud mobile app.

← TimerToggle Switch →