Horizontal carousel in Axure 9

mobile-prototyping
#1

Is anyone able to describe how to create a horizontal carousel in Axure 9 the same way that is described in this article: Axure Tutorial: Horizontal Carousel by Youjin L? https://medium.com/@youjlee12/playing-with-axure-part-1-b1ec9a67a31d The article describes how to do it for Axure 8, but many of the labels in Axure 9 are different, so I can’t get it to work right in Axure 9. I’ve been through all of the Axure tutorials and reference material online as well as multiple Google searches and am unable to find anything that describes how to do what is done in this article for Axure 9. Any help will be greatly appreciated.

#2

The instructions in that tutorial are fairly high level and vague, and really don’t differ much between RP8 and RP9, but here are some translations for the specifics from RP8 to RP9:

1. Create the elements you want in the carousel (it should be longer than the width of the screen).

  • Same in RP8 and RP9: Drag a “Box” widget from the LIBRARIES panel onto the page, size and style it, enter its text. Ctrl+drag it or cut&paste to make other ones…

2. Highlight the elements of the carousel and convert to dynamic panel (let’s call this DP1).

  • In RP8 and RP9 this means “select all the widgets” (from step 1) You can drag over widgets to select them, or use Ctrl+click to select multiple widgets. You can also Ctrl+click widgets in the OUTLINE pane.
  • In RP9, after selecting one or more widgets, right-click and choose “Create Dynamic Panel.” You can also use the menu Arrange > Create Dynamic Panel (and take note of the keyboard shortcut for this as a quicker way.)

…It should automatically have the box “fit to content” checked off.

  • I think this is a typo. In both RP8 and RP9, this option is checked on by default. To verify this option, select a dynamic panel widget and look for “Fit to Content” in the STYLE pane.
  • To be clear, this needs to be checked ON for this first dynamic panel. This will make the dynamic panel the same dimensions as all the widgets inside each state (you want to show all the content and you only have one state for now.)

3. Selected the dynamic panel you created (DP2), create another dynamic panel (we’ll call this DP2).

  • Same thing in RP8 and RP9, just repeat the same method used in step to "create a dynamic panel from the dynamic panel created in Step 2. This is also known as a “nested dynamic panel”. So, select your dynamic panel, right-click and choose “Create Dynamic Panel”. Now you will have an “inner” dynamic panel (DP1) nested inside an “outer” dynamic panel (DP2.)

4. Go to “Properties” of DP2 and uncheck the box for “fit to content”.

  • Select the outer dynamic panel (DP2) then in the STYLE pane click “Fit to Content” to uncheck it.
  • This step is actually not necessary in either RP8 or RP9 because step 5 would automatically uncheck this box any time a dynamic panel’s dimensions are manually changed.

(Step 5 is identical in RP8 and RP9)

6. In order to be able to drag or move DP1, we have to add a case. Select DP2 > Properties > Double click OnDrag to add a case.

  • Select DP2
  • in the INTERACTIONS pane, click the New Interaction button.
  • Scroll down and click the item named, Dragged. (Or, just start typing this name and the list of all possible actions will filter to show it.)

…Since DP1 is the actual content that needs to be moved (DP2 is just the frame), you need to select DP1 under “Configure Actions”. This will make DP1 slide back and forth.

  • Umm, you can just ignore this.

7. Select “Move” and on the right side panel select “DP1”.

  • To add an action to the Dragged event, click the add one underlined text.
  • Click Move

Next, configure actions with the following:

Move:
with drag x

  • In RP9 you’ll first need to select which widget to move, so click the “DP1” dynamic panel (you can also just start typing its name to search for it.)
  • After selecting DP1, look at the MOVE field and change “With Drag” to “With Drag x”

Boundary:
Left > is less than > 0 (stops frame from moving past the frame on the left side)
Right > is greater than or equal to > width of your frame or screen (stops frame from moving past frame on the right side)

  • In RP9, you need to first click MORE OPTIONS
  • Then click +Add boundary
  • change “top” to “left”
  • change “is greater than” to “is less than or equal to”
  • keep value of “0” (unless your carousel’s initial location is something other than x=0, or if you would like to drag beyond its “zero point” to provide a “slide back into position” effect.)
  • Click +Add boundary again
  • change “top” to “right”
  • change “is greater than” to “is greater than or equal to”
  • You can change “0” to the width of the DP2 widget as a hard-coded number (e.g., “375”) but I strongly recommend you use a this formula to calculate this value on the fly–then if you later need to change the size of your carousel “viewport” or “frame” it will still work. So, enter [[This.width]] to replace “0”. Here, “This” refers to “this widget” --the widget to which you are assigning the Dragged event–in other words, DP2, your outer widget. The double-brackets are how you specify a mathematical value or expression in Axure.
  • These boundaries work the same in RP8 and RP9. Think of them as the limits for how far a widget–DP1 in this example–can be moved. So, when the user clicks and drags on DP2, it will move DP1. If they try to drag all the way over to the right, DP1 will stop moving when its left edge (the x-position) reaches 0. (Note that the (x, y) position of DP1 is relative to its location inside DP2, not the entire browser window.) Likewise, DP1 will stop moving when its right edge reaches the right edge of DP2.

8. Now, hit preview and you should be able to click and drag the carousel back and forth.

  • In both RP8 and RP9, you can use the menu Publish > Preview (and note the keyboard shortcut!) or click the Preview button in upper right of the editor window to view the prototype’s HTML.

… If you test this on mobile, it should work just by swiping back and forth.

  • From both RP8 and RP9 you can publish to the Axure Cloud site from the menu **Publish > Publish to Axure Cloud ** or clicking the Share button in upper right of editor.
  • Follow the instructions in ensuing dialog…
  • From the app store of your favorite phone, search for the Axure Cloud app. Sign in to your account to see a list of your published prototypes and load it.
#3

@dougbolin
I have created a few example you may use.
Simple to more complex implementation of a carousel.
See attached file. You can dissect the different example for you to learn on your own. Sometimes it is good to reverse engineer an example to better understand its mechanic.
Carousel Examples
CarouselExample.rp (2.8 MB)
Done with Axure RP 9.

Swipe & Drag gestures
#4

Thank you so much! This is exactly what I need.

#5

This is great and big help! Thank you!