Simulating a slideshow

With Justinmind, you can simulate an interactive slideshow. Follow the steps below to learn how:

  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’re using icons from the iOS icons Widget library. However, any icon will work.
  3. Drag a left-arrow style widget onto the left side of the panel and center it. Do the same on the right with a right-arrow style widget.
  4. Go to the Outline palette and make sure that your arrows are placed above the Dynamic Panel, not within it.
  5. 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.
  6. 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
  7. Add an image in each panel.Interactive wireframes: slides images
  8. In the Variables palette, create a new variable by clicking the ‘+’ icon. Name it “Position” and assign it “1” as its default value.Interactive wireframes slideshow: set up the position variable
  9. 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 panel to be set as active. Give the event a “slide left” transition effect from the bottom of the events dialog.
  10. Back in the Events palette, click on “add condition” next to the event you’ve just created, and you’ll see the Conditional Expression builder appear.
  11. Drag the variable to the open space in the expression, followed by the “Equals” function. Type in “1” in the last open space.interactive-wireframes-slideshow-arrow-navigation
  12. Add an additional “On Click” + “Set Active Panel” event and condition for each additional panel. To do so, click the “Else” text next to the Event you created. Remember to change the panel and the Position value in the condition each time.interactive-wireframes-slideshow-events
  13. Click “Add event” and create a new “On Click” + “Set Value” event, selecting the variable as the target of the action. For the value, type in “1”.
  14. Back in the Events palette, click the “add condition” next to the Event you just created. In the Conditional Expression builder, drag the variable to the first open space in the expression, followed by the “Equals” function. Type “4” in the final open space. This will reset the variable and the slideshow once you’ve navigated to the last image.
  15. Finally, add another “On Click” + “Set value” event, selecting the variable as the target. For the value, click “Calculated”. In the Calculated Expression builder, drag the variable to the first open space in the expression. Next to it, drag the “+” function. In the last space, type “1”.interactive-wireframes-slideshow-conditions Your Events palette should look like this:Interactive wireframes slideshow: right navigation
  16. Repeat these steps for the left-arrow style element, 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, changing the first to set the variable’s value to 4 when the variable’s value = 1, and the second to Variable – 1, instead of Variable + 1. The left-arrow events 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.