6.5+

This tutorial shows us how to create a sliding image banner using the "Set Panel State(s) to State(s)" action and the "Next" and "Previous" states (See this tutorial for 6.0 and below).

Dynamic Panel Tutorial

Photo Carousel

Rotating Image Slideshow

Wheee! Wasn't that Photo Carousel fun? For more slideshow examples, check out this thread from the forum!

First, open PhotoCarousel.rp and open the "Photo Carousel" page.

To create the carousel, we will add OnClick interactions so it changes one image to the next each time you click the right triangle.

Select the Right Triangle and add a case to the OnClick event. This opens the Case Editor dialog.

Whatever photo the user might be looking at, we want the right-facing arrow to bring them to the next photo in the sequence. To do this, we’ll choose the action “Set Panel State(s) to State(s)”, check the checkbox for the “Rotating Photos” panel, and pick the “Next” state from the “Select the state” droplist.

Below that, you can add animations, so let's choose "Slide Left" from the droplists for both “Animate In” and “Animate Out” and leave the duration setting at the default of “500 ms” for both.

Click OK to close the Case Editor. The case added to the OnClick should look like the one in the screenshot above.

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

© 2002-2012 Axure Software Solutions, Inc. All rights reserved.

The Round Up

(AxurePhotoCarousel65.zip)

Now let’s add a similar interaction for the Left Triangle.  Select the Left Triangle, and add an OnClick case.

Once in the Case Editor, repeat your actions from Step 2—but this time around we want the "Set Panel state(s) to State(s)" action to set the Rotating Photos panel to "Previous" with a "Slide Right" animation for the “In” and “Out” animations.

Click "OK" to close the Case Editor. The case added to the OnClick should look like the one in the screenshot above.

And that should do it. Generate the prototype and test it out.

This zip file contains the RP file needed to complete this tutorial

Step 1: Add OnClick case to the right arrow

Step 2: Set panel state to "Next"

Step 3: Repeat steps for left arrow

Next: Draggable Map Tutorial

Back to Dynamic Panels (Advanced)