Justinmind

SUPPORT

Learn how to prototype web and mobile apps

How to simulate a carousel in your interactive prototypes

In this tutorial, you will learn how to simulate a carousel in your interactive prototypes.

Carousels can be great for user onboarding and to improve the user experience of your website. Let’s see how you can create one in your interactive prototypes.

You can download the below example here.

Simulate a carousel in your interactive prototypes with Justinmind

1. Draw a Dynamic panel, large enough to hold all the components you will put inside.

Interactive prototype carousel: set up the environment

2. Drag two more Dynamic panels onto the canvas, and put one on the left side of the original dynamic panel and the other on the right side.

3. Let’s start with the LEFT navigation. Add a second panel to the left Dynamic panel, so that you have two sub-panels. Name them “Enabled-L” and “Disabled-L“. In the properties tab of the dynamic panel, set the Disabled-L as the Default layer. Do the same with the right Dynamic panel, naming the panels “Enabled-R” and “Disabled-R“, to avoid confusion. This time, set the Enabled-R as the Default layer.

4. Drag an arrow widget into each sub-panel, so that there is one in each Enabled and Disabled panel. You will find the widget in the iOS8 icons widget library.

5. Change the font properties of the arrows in the Enabled panels so that they appear ‘enabled’, i.e. change their color to blackRemember that our icons are icon fonts and as such they can be easily edited using the font properties, not the image ones.

 Interactive prototype carousel: set up the navigation arrow widgets

6. Drag 6 image widgets onto the canvas outside of the Dynamic panel, one for each “product” you want to display. Place them one after the other, in a row, and align them horizontally from the toolbar above the canvas. Ensure that the size of the images is consistent.

Interactive prototypes: align images in carousel

Tip: Zoom out of the canvas to be able to see all the images you’re adding. 

7. Select them all, right-click, and select “Group”.

Interactive prototype carousel: group the elements

8. 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

9. Create a variable in the Variables tab. Name it “Position” and assign it ‘1’ as Default value.

Interactive prototype carousel: set up the variable

10. It’s time to add interaction to the prototype. Select the Enabled left arrow widget and add an “On Click” + “Move” event. Select the group and select “Offset” as the Left value. The value you’ll insert here will correspond to the WIDTH measurement of any one of your images within the group. Select “Current” as the Top one. Select EaseInOutQuad as the easing effect, with a duration of 300 ms.

Interactive prototype carousel: move event

11. Click on the gear icon next to the event you’ve just created and select “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”.

Interactive prototype carousel: set value event

12. In the Events tab, you will notice that between the “Move” and the “Set value” events there will be a small arrow. Click on it and select “WITH previous”.

13. Now we have to set up the navigation arrow widget. In the Events tab, click on “Add event” and set up an “On click” + “Set active panel” event, selecting as active panel the Disabled left panel, containing the disabled left arrow widget.

14. Add a condition to this event, by clicking on the “Add condition” link next to the event we’ve just created: when position = 1. This way, we’ve told the arrow to change to its “disabled” aspect when the position of the elements group has reached its last element on the left. In all other cases, the enabled arrow will be displayed.

15. Add an “Else condition” event to enable the right arrow (and not the left). The events dialog will pop up: add an “On click” + “Set active panel” event. The active panel will be the one with the Enabled right panel, containing the enabled right arrow widget.  Click OK and add the condition: when position <4.

Interactive prototype carousel: enable disable navigation arrows

16. It’s time to set up the RIGHT navigation. The steps will be essentially the same, with a few variations. Select the Enabled right arrow widget and add an “On Click” + “Move” event. Select the group and select “Offset” as the Left value (the value will be the same as the left but with a negative sign (-) beforehand), and “Current” as the Top one. Select EaseInOutQuad as the easing effect, with a duration of 300 ms.

17. 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”.

18. Now set up an “On click” + “Set active panel” event, selecting as active panel the Disabled right panel, containing the disabled right arrow widget. Add a condition to this event, by clicking on the “Add condition” link next to the event we’ve just created: when position = 4. This way, we’ve told the arrow to change to its “disabled” aspect when the position of the elements group has reached its last element on the right.

19. Add an “Else condition” event to enable the left arrow (and not the right). The events dialog will pop up: add an “On click” + “Set active panel” event. This time, the active panel will be the one with the Enabled left panel, containing the enabled left arrow widget.  Click OK and add the condition: when position >1.

Now you can simulate and enjoy your carrousel!

Next tutorial: how to quickly create tabs in your web wireframes>


Related tutorials: