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.
Click here to download the completed RP file for this tutorial.
1. Widget Setup
Create the First Slide
Open a new RP file and double-click Page 1 in the Pages pane to open it on the canvas.
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.
Right-click the rectangle and select Create Dynamic Panel in the context menu.
Create the Second Slide
Double-click the dynamic panel to edit its states.
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.
- 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
Repeat steps 5 and 6 to create State 3 with its own rectangle widget. Make the rectangle widget green.
Click Close at the top-right of the canvas or press ESC to exit state-editing mode.
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
Select the carousel dynamic panel and click New Interaction in the Interactions pane.
Select the Swiped Left event in the list that appears, and then select the Set Panel State action.
Select This Widget in the Target dropdown.
In the State dropdown, select Next and check the box for Wrap from last to first.
Under Animate In, select Slide Left. Notice that the Animate Out section automatically changes to match this selection.
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.
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.