Simulating a slideshow

With Justinmind, you can simulate an advanced slideshow.

Interactive wireframes: slideshow

To simulate a slideshow in your prototype, follow these steps:

  1. Drag a Dynamic Panel to the canvas and resize it so that it can hold additional UI elements within it.
  2. To create the navigation system, we will use icons from the iOS icons Widget library. You can download the library here
    • Drag a Left widget onto the left-hand side of the panel and center it.
    • Do the same on the right with the Right widget. You will find the arrow widget in the iOS8 widget library. Add it to the widget panel by clicking on the widget library icon at the top of the panel.
  3. Go to the Outline palette and make sure that your arrows are placed above the Dynamic Panel.
  4. Double click on the Dynamic Panel to edit its content. Place an Image widget inside the panel and change its size to match the size of the Dynamic Panel.
    • We’ve now set up one of the slides.
  5. Next, right click on the panel in the Outline palette and select “Duplicate panel”. Do this for as many slides you wish to display in your slideshow.
    • Interactive wireframes: slideshow space setup
  6. Add an image in each panel.
    • Interactive wireframes: slides images
  7. In the Variables palette, create a new variable by clicking the ‘+’ icons.
    • Name it “Position” and assign it “1” as default value.
    • Interactive wireframes slideshow: set up the position variable
  8. Select the Right arrow and go to the Events palette.
    • Add an “On Click” + “Set active panel” event, selecting the next panel, i.e. “Panel 2”, as the active one.
  9. Add a “Slide left” transition effect at the bottom of the events dialog. The event will appear in the Events palette.
  10. In the Events palette, click on “add condition” on the left of the event you’ve just created. The Condition builder will appear.
  11. Drag the variable to the term in the Conditional expression, followed by the “Equals” function and finally write “1” in the last term.
    • interactive-wireframes-slideshow-arrow-navigation
  12. Now add an additional “On Click” + “Set Active Panel” event and condition for each additional panel. To do so, click the “Else” link on the right of the event. Remember to change the panel and the Position value in the condition each time.
    • All the events should be displayed in the events bar as shown in the image below.
    • interactive-wireframes-slideshow-events
  13. Next, click “Add event” and create a new “On Click” + “Set Value” event. Select the Position variables and assign the fixed value as “1”.
    • Click OK.
  14. Back in the Events palette, click “add condition”. The Expression builder will appear.
    • Drag the variable to the first term in the conditional expression, followed by the “Plus” function and then write “1” in the final term,
    • Click “OK”.
    • interactive-wireframes-slideshow-conditions
  15. Finally, add another “On Click” + “Set value” event, selecting the Position variables.
    • Your Events palette should look like this:
    • Interactive wireframes slideshow: right navigation
  16. Repeat steps 8-16 for the Left arrow, changing the active panels and position values accordingly (remember, you need to work backwards this time!). The “Set Value” events will have to be adapted too (“when the position value is equal to 1”),  with 4 as the “Set value”.
  17. The final result should look like this.

Interactive wireframes slideshow: left navigation

That’s it! You can now click “Simulate” and interact with your prototype.

You can download our example here.