MOBILE CAROUSEL

SWIPING SLIDESHOW TUTORIAL OVERVIEW

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

Swipe carousel first step.

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

u30_start u30_end u30_line

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.

DOWNLOAD

u55_start u55_end u55_line
u57_start u57_end u57_line
u59_start u59_end u59_line
u61_start u61_end u61_line
u63_start u63_end u63_line

Still need help? Check out the forum or drop us a line at support@axure.com.

THE ROUNDUP

IPHONE APP TUTORIAL & TRAINING ARTICLES

Swiping Slideshow Tutorial

u82_start u82_end u82_line

MORE IPHONE APP TUTORIALS & TRAINING ARTICLES ::

This zip contains the iPhone App Template and files to complete the iPhone app tutorials

This is an archived Axure 7 training resource. You can update to Axure 8 for free at www.axure.com/update.