Designing an advanced carousel

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.
    • Draw a Dynamic Panel, large enough to hold all the UI elements you will put inside.
    • 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.
  3. Let’s start with the Left navigation. Add a second panel to the left Dynamic Panel.
    • Name them “Enabled-L” and “Disabled-L” respectively.
    • In the properties palette, set 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 panel, so that there is one in each Enabled and Disabled panel.
  5. Change the font of the arrows in the Enabled panels so that they appear  to be enabled, i.e. change their color to black
    • Interactive prototype carousel: set up the navigation arrow widgets
  6. 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.
  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 palette. Name it “Position” and assign it ‘1’ as Default value.
    • Interactive prototype carousel: set up the variable
  10. Select the “Enabled-L” Arrow 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. Set the events to “WITH previous”.
  13. Now we have to set up the navigation arrow widget.
    • In the Events palette, click on “Add event” and set up an “On Click” + “Set Active Panel” event, selecting the Disabled left panel as the active panel, containing the “Disabled-L” Arrow.
  14. Add a condition to this event, by clicking on the “Add condition” link next to the event we’ve just created. The Expression builder will appear.
    • Drag the “Equals” function to the term in the conditional expression.
    • Drag the variable from the Variables tab to the left term and write ‘1’ in the right term.
    • Click “OK”.
    • 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.
  15. Add an “Else condition” event to enable the right arrow.
    • The Events dialog will appear.
    • Add an “On Click” + “Set Active Panel” event.
    • The active panel will be the one with the Enabled right panel, containing the “Enabled-R” Arrow.
    • Click “OK”.
  16. Add a condition to this event, by clicking on the “Add condition” link next to the event we’ve just created. The Expression builder will appear
    • Drag the “Less” function to the term in the conditional expression.
    • Drag the variable from the Variables tab to the left term and write ‘4’ in the right term.
    • Click “OK”.
    • Interactive prototype carousel: enable disable navigation arrows
  17. It’s time to set up the right navigation.
    • Select the “Enabled-R” Arrow 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.
  18. 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”.
  19. 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. The Expression builder will appear.
    • Drag the “Equals” function to the term in the conditional expression.
    • Drag the variable from the Variables tab to the left term and write ‘4’ in the right term.
    • Click “OK”.
    • 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. 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.
  20. Add an “Else condition” event to enable the left Arrow.
    1. The Events dialog will appear.
    2. Add an “On Click” + “Set Active Panel” event.
    3. This time, the active panel will be the one with the Enabled left panel, containing the “Enabled-L” Arrow.
    4. Click “OK”. and add the condition
  21. Add a condition to this event, by clicking on the “Add condition” link next to the event we’ve just created. The Expression builder will appear
    • Drag the “Greater” function to the term in the conditional expression.
    • Drag the variable from the Variables tab to the left term and write ‘1’ in the right term.
    • Click “OK”.

Now you can simulate and enjoy your carrousel!

You can download our example here.