© 2002-2017 Axure Software Solutions, Inc. All rights reserved. Axure ® is a registered trademark of Axure Software Solutions, Inc.

AXURE

RESOURCES

LEGAL

CONNECT

EMAIL

 

SWIPING SLIDESHOW

Make a content slideshow that users can browse by swiping.

STEP 1: SET THE DYNAMIC PANEL STATE TO "NEXT"

In the mobile training document, open the page named "Swiping Slideshow". About halfway down the page is a three-state dynamic panel named "Swiping Slideshow" that contains the slideshow images.


Select the "Swiping Slideshow" dynamic panel, and double-click "OnSwipeLeft" in the Properties tab of the Inspector to give it a new OnSwipeLeft case.


In the Case Editor, choose the "Set Panel State" action. Under "Configure actions", check "swiping slideshow".

STEP 2: SET THE DYNAMIC PANEL STATE TO "PREVIOUS"

Repeat Step 1 with the "Swiping Slideshow" dynamic panel's OnSwipeRight event, but set the dynamic panel's state to "Previous" with the "slide right" animation.

STEP 3: PREVIEW

Preview the prototype. Swipe left and right on the image to browse through the slideshow.


MORE RESOURCES

At the bottom of the right column, select "Next" in the "Select state" dropdown. Then, click the checkbox "Wrap from last to first" so the images can cycle through.


In the "Animate In" dropdown, select "slide left". Notice that the "Animate Out" dropdown's selection automatically changes to match.


Click "OK" to close the Case Editor.

 

(Note: If you would like to preview this page in the device frame provided on the "Device Frame" page, open that page, double-click the "Content Frame" inline frame, and select "[[PageName]]" in the dialog that appears.)

STEP 0: DOWNLOAD THE MOBILE TRAINING FILE

If you don't already have it, download AxureMobileTraining.rp and open it up in Axure RP. This file contains pages corresponding to each of the tutorials in the Axure mobile tutorials module.