Designing an advanced carousel

Looking for a more basic carousel? Click here.

Create an advanced carousel in your interactive prototypes with Justinmind. Carousels are a great tool for user onboarding and improving the user experience of a website.Simulate a carousel in your interactive prototypes with Justinmind

To create an advanced carousel in your prototype, follow the steps below:

  1. Create a new web prototype. Drag a Dynamic Panel to Canvas, and resize it large enough to hold all the UI elements you’ll place in the carousel.Interactive prototype carousel: set up the environment
  2. Drag two additional Dynamic Panels to the Canvas. Place one on the left of the original Dynamic Panel and the other on the right. These will hold the navigations elements.
  3. Select the Dynamic Panel on the left and add second panel to the left Dynamic Panel by clicking on the ‘+’ icon. Rename the first panel “Disabled-L” and the second panel “Enabled-L”.
  4. Do the same with the Dynamic Panel on the right, naming the panels “Enabled-R” and “Disabled-R”, to avoid confusion. Make sure “Enabled-R” is the default layer in the Properties palette.
  5. Drag an Arrow widget icon into each panel, so that there is one in each Enabled and Disabled panel. Find an arrow icon in a number of widget libraries available in Justinmind.
  6. Change the color of the arrows in the ‘Enabled’ panels so that they appear  to be selected. We changed the colors in ours to black.Interactive prototype carousel: set up the navigation arrow widgets
  7. Drag six Image widgets to the Canvas outside of the Dynamic Panel, one for each “product” you want to display. Place them in a row, and align them horizontally in the toolbar. Ensure that the size of the images is consistent.
  8. Select them all, right-click, and select “Group”.Interactive prototype carousel: group the elements
  9. Now double click on the central Dynamic Panel to edit its content, and drag the group into it.Interactive prototype carousel: insert the elements in the panel
  10. Create a variable in the Variables palette. Name it “Position” and type ‘1’ for its default value.Interactive prototype carousel: set up the variable
  11. Select the “Enabled-L” Arrow and add an “On Click” + “Move” event, selecting the group of images to move. The amount to move will correspond to the width measurement of any one of your images within the group. In our example, we select “Offset” 272px for the X position, and “Current” for the Y Position. Select EaseInOutQuad as the easing effect, with a duration of 300 ms.Left arrow move event
  12. Back in the Events palette, click on the gear icon next to the event you’ve just created and select “Add action”. Create an “On Click” + “Set Value” event, selecting the ‘Position’ variable as the target of the action. For the value, click ‘Calculated’ and ‘Add expression’. You’ll see the Calculated Expression builder appear.

    In the builder, drag the ‘Position’ variable to the open space in the expression, followed by the ‘-‘ (Subtract) function. Double click in the open space that appears, and type ‘1’.Interactive prototype carousel: set value event
  13. In the Events palette, set the timing between the actions to “WITH previous”.With previous event
  14. With the “Enabled-L” icon still selected, create an “On Click” + “Set Active Panel” event, selecting the “Disabled-L” panel to be set as active.
  15. Back in the Events palette, click ‘add condition’ next to the event you just created. You’ll see the Conditional Expression builder appear. In the builder, drag the ‘Position’ variable to the open space in the expression, followed by the “Equals” function. Type ‘1’ in the open space that appears.

    This expression changes the Arrow to disabled when the last element has been reached on the left. In all other cases, the enabled arrow will be displayed.
  16. Again in the Events palette, click the ‘Else’ text, which will open the Events dialog. Create an “On Click” + “Set Active Panel”, selecting the “Enabled-R” panel to be set as active.
  17. Add a condition to this event. Drag the ‘Position’ variable to the open space in the expression, followed by the “Less than” function. Type ‘4’ in the last open space in the expression.Interactive prototype carousel: enable disable navigation arrows
  18. Select the “Enabled-R” Arrow and add an “On Click” + “Move” event, selecting the image group to be moved. For the movement, type in -272px for the X position, and “Current” for the Y position. Select EaseInOutQuad as the easing effect, with a duration of 300 ms.Move images by right arrow
  19. Add a simultaneous event “WITH previous” by clicking on the gear icon next to the event you’ve just created and selecting “Add action”. The new event will be an “On Click” + “Set Value” applied to the Position variable, which will be assigned a calculated value of “Position + 1”.Move position calculated
  20. Now set up an “On Click” + “Set Active Panel” event, selecting as active panel the Disabled right panel, containing the disabled right arrow widget.
  21. Click ‘Add condition’ next to the event you just created. Drag the ‘Position’ variable to the open space in the expression, followed by the ‘Equals’ function. Finally, type ‘4’ in the last open space.

    This expression changes the Arrow to disabled when the last element has been reached on the left. In all other cases, the enabled arrow will be displayed.
  22. Back in the Events palette, click the ‘Else’ text, which will open the Events dialog. Add an “On Click” + “Set Active Panel”, selecting the “Enabled-L” panel to be set as active.
  23. Add a condition to this event. In the Conditional Expression builder, drag the variable to the open space in the expression, followed by the ‘Greater than’ function. Type in ‘1’ in the final open space.Events for right arrow

Now you can simulate and enjoy your carousel.

You can download our example here.