Rotating Carousel / Slideshow Tutorial

In this tutorial, you'll learn how to make a rotating carousel, banner, or content slideshow. You can configure it to advance either automatically or with the click of a button.

Note

Click here to download the completed RP file for this tutorial.

1. Widget Setup

Create the First Slide

  1. Open a new RP file and double-click Page 1 in the Pages pane to open it on the canvas.

  2. Drag a rectangle widget onto the canvas from the Libraries pane and set its fill color to blue with the Fill Color selector in the Style pane or style toolbar.

  3. Right-click the rectangle and select Create Dynamic Panel in the context menu.

Create the Second Slide

  1. Double-click the dynamic panel to edit its states.

  2. In the floating toolbar above the dynamic panel, click State 1. At the bottom of the dropdown that appears, click Add State to create State 2.

  1. Drag a rectangle widget into State 2 of the dynamic panel, and set its fill color to red.

Create the Third Slide

  1. Repeat steps 5 and 6 to create State 3 with its own rectangle widget. Make the rectangle widget green.

  2. Click a blank area of the canvas to exit the panel state-editing mode.

Note

When creating your own carousels, you can include any widgets you'd like in each of the dynamic panel's states.

2. Make the Carousel Rotate Automatically When the Page Loads

  1. Click a blank spot on the canvas to select the page itself, and then click New Interaction in the Interactions pane.

  1. Select the Page Loaded event in the list that appears, and then select the Set Panel State action.

  2. Select the dynamic panel in the Target dropdown.

  3. In the State dropdown, select Next and check the box for Wrap from last to first. This will allow the dynamic panel to go back to its first state after the last has been reached.

  1. Under Animate In, select Slide Left. Notice that the Animate Out section automatically changes to match this selection.

  1. Click More Options and check the box for Repeat every 1000 ms. Leave Delay first state change checked and click OK to save the action.

    This will make the carousel continue to advance automatically beyond the first state change, and the first change will be delayed until one second after the page has loaded.

3. Preview the Interaction

Preview the page. After the one-second delay, the carousel should begin rotating.

4. Add a "Next" Button

  1. Back in Axure RP, remove the Page Loaded interaction we just created by selecting it in the Interactions pane and pressing DELETE.

    This will stop the automatic rotation so that the carousel can be controlled with buttons instead.

  2. Go to the Libraries pane and switch to the Icons widget library in the dropdown at the top of the pane.

  3. Enter arrow into the search field at the top-left of the pane, and locate a right-facing arrow that you like. Drag the arrow icon onto the canvas and place it to the right of the dynamic panel.

  1. Select the arrow icon and click New Interaction in the Interactions pane.

  2. Select the Click or Tap event in the list that appears, and then select the Set Panel State action.

  3. Select the dynamic panel in the Target dropdown.

  4. In the State dropdown, select Next and check the box for Wrap from last to first.

  5. Under Animate In, select Slide Left. Then click OK to save the action.

5. Add a "Previous" Button

Repeat Step 4 with a left-facing arrow. Set the dynamic panel's state to Previous instead of Next, and choose Slide Right for the Animate In animation.

6. Preview the Interaction

Preview the page and click the arrows to browse through the slides in the carousel.

Additional Information and Tips

Swiping Slideshow

You can make a swiping slideshow/carousel for mobile interfaces. To do this, use the dynamic panel's Swiped Left and Swiped Right events in place of the left and right arrows in steps 4 and 5 above.

For a full tutorial on this topic, click here: Swiping Slideshow Tutorial.

← Scrolling RegionNavigation Menu →