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

86% OF THE FORTUNE 100

USE AXURE RP

AXURE

RESOURCES

LEGAL

CONNECT

EMAIL

CAROUSEL

 

Build an image carousel, rotating banner, or content slideshow. You can configure it to advance either automatically or with the click of a button.

STEP 0: DOWNLOAD THE TRAINING FILE

If you don't already have it, download AxureTraining.rp and open it up in Axure RP. This file contains pages corresponding to each of the tutorials on the Axure training site. We recommend always completing the tutorials using our prepared file, but if you can't, that's okay too—we'll always tell you what to build in a new file in order to complete each tutorial without using AxureTraining.rp.

STEP 1: SETUP

In the training document, open the page "Carousel."


On the page are two arrow icons from the Icon library and three images.

STEP 2: CREATE CAROUSEL DYNAMIC PANEL

To create a carousel, place each image or other item of the carousel in its own state of a dynamic panel.


Right-click “Image 1” and choose "Convert to Dynamic Panel". Name the dynamic panel "Carousel".


Double-click the dynamic panel that you just created to open the Dynamic Panel State Manager.


Click the green "+" icon twice to give the dynamic panel a total of three states.


Click OK to close the dialog.


Right-click “Image 2” and choose "Cut".


Double-click “State2” in the Outline to open it for editing.


Paste “Image 2” onto the canvas for “State 2”. Make sure to move the pasted image to (0,0).


Repeat the steps above, pasting “Image 3” into “State3”.

STEP 3: CREATE INTERACTIVE BACK BUTTON

Return to the "Carousel" page. Select the "Back arrow" widget. In the Properties tab, double-click "OnClick" to add a new OnClick case.


In the left column, click "Set Panel State".


In the right column, click "Carousel (Dynamic Panel)".


At the bottom of the right column, click the droplist labeled "Select state" and choose "Previous". Then, click the checkbox "Wrap from last to first" so the images can cycle through.


To give the state change a sliding effect, use the "Animate In" and Animate Out" controls. Set them both to "slide right" (since this is your "back" button) and give them each a duration of 500ms.


Click "OK" to close the Case Editor.

STEP 4: CREATE INTERACTIVE FORWARD BUTTON

Repeat the steps above with the forward button icon. Your process will be mostly the same.


In the "Select state" droplist, select “Next” instead of "Previous".


Choose "slide left" instead of "slide right" for your animation settings.


You may want to preview the page after this step to make sure your buttons are working as expected.

STEP 5: MAKE THE CAROUSEL ROTATE AUTOMATICALLY

Select the dynamic panel. In the Properties tab, double-click "OnLoad" to add a new OnLoad case.


In the left column, click "Set Panel State".


In the right column, choose "This Widget".


At the bottom of the right column, click the droplist labeled "Select state" and choose "Next". Click the checkboxes "Wrap from last to first" and "Repeat every". The default setting is for the image to advance once every second (1000 ms). You can customize the timing using the "ms" field in this section. (Try 4000 ms.)


If checked, "Delay first state change by 1000 ms" will make sure the dynamic panel stays on the first state for one second after the page loads rather than immediately switching to the next state. The time "1000 ms" will automatically update if you change the time in the "Repeat every" field.


Set your "Animate In" and "Animate Out" values to "slide left" and "500 ms".

STEP 6: PREVIEW

Click Preview


The carousel will begin to rotate automatically. Note that using the forward and back buttons to manually change the dynamic panel state will end the automatic rotation. Try to see if you can build a carousel that keeps rotating! Contact our support team at <support@axure.com> if you need help.

MORE RESOURCES

CORE TRAINING

TUTORIALS