Swiping Slideshow Tutorial Overview
Create a swiping slideshow or carousel for your iPhone App using the OnSwipe event and setting panels states to Next/Previous.
Everyday I'm swiping with
This zip file contains the RP file needed to complete this tutorial
Now, click the checkbox for the NumberStatus panel. In the droplist choose the "Next" panel state but leave the animations to the default "none".
Click OK to close the Case Editor.
Step 3: Set Panel NumberStatus to Next State
First, open AxureiPhoneApp.zip and open the iPhoneApp-SwipingSlideshowTutorial.rp file.
Select the SlideshowPanel and double-click the OnSwipeLeft event to open the case editor.
Step 1: Add OnSwipeLeft to SlideshowPanel
Select the Set Panel State action and click the checkbox for SlideshowPanel. In the droplist choose the "Next" panel state and select the "slide left" animation for Animate In and Animate Out.
Don't close the case editor just yet.
Step 2: Set SlideshowPanel to Next state
Now let's add the interactions for OnSwipeRight. Select the SlideshowPanel and double-click OnSwipeRight to open up the Case Editor.
Step 4: Add OnSwipeRight to SlideshowPanel
© 2002-2013 Axure Software Solutions, Inc. All rights reserved.
Use Axure RP as:
Back to Overview
The Round Up
Select the Set Panel State action and click the checkbox for SlideshowPanel. In the droplist choose the "Previous" panel state and select the "slide right" animation for Animate In/Out.
Step 5: Set SlideshowPanel to Previous state
Now, click the checkbox for the NumberStatus panel. In the droplist choose the "Previous" panel state but leave the animations to the default "none".
Click OK to close the Case Editor and then generate to your desktop or view it on your iPhone.
Step 6: Set NumberStatus to Previous State
This iPhone app tutorial teaches you how to make an image slideshow that changes when swiped. This example uses images, but you can apply this same method to any situation where swiping left or right changes the content on the screen like the screen transition tutorial.
This example also changes a number indicating which image is currently displayed (i.e. 2/5). This same technique can be applied to creating status indicators like one square or circle in a series of circles having a different color.
Now you can create a swiping image carousel or use the swipe event for navigation.