Learn how to prototype web and mobile apps

How to simulate an advanced slideshow in your interactive prototypes

Learn how to simulate an advanced slideshow in your interactive prototypes with the help of this tutorial.

You can download the below example here.

Interactive wireframes: slideshow

In continuation of the slideshow we created in the previous tutorial, this one will use conditions and variables to offer a more advanced and high-fidelity experience.

The first steps will be very similar to the ones we followed to create a basic slideshow.

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

2. To create the navigation, drag a left arrow widget on the panel, on its left and center it. Do the same for the right navigation. 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.

Note: put the left and right arrows above the panel and not inside it. You can change their appearance in the Properties tab. Remember that our icons are icon fonts and as such they can be easily edited using the font properties, not the image ones.

Interactive wireframes: slideshow environment

3. Right click on that panel and click edit content (or double click). Place an Image widget inside the panel and change its size to the size of the container.

4. We’ve now set up one of the slides. Next, right click on the panel in the Outline tab and select ‘Duplicate panel’. The number of the panels should be the same as the number of images you want to display in your slideshow. If you want to show 4 images, then you should add 4 panels. Add an image in each panel.

Interactive wireframes: slideshow space setup

Interactive wireframes: slides images

5. In the variable tab, create a new variable, name it Position and assign it “1” as default value.

Interactive wireframes slideshow: set up the position variable

6. It’s time to add events. Select the right arrow and add an “On click” + “Set active panel”. Select the next panel, i.e. Panel_2, as the active one.

7. Add a “Slide left” transition effect at the bottom of the events dialog. The event will appear in the Events tab.

8. In the Events tab, click on “Add condition“. The expression builder dialog will pop up.

9. Drag the variable onto the Expression builder, then a ‘=’ function and finally write a ‘1’ in the last field.


10. Now do the same with all the panels, by adding a new condition to the event for each panel. To do so, click on the ‘Else’ link next to the event that you have just created. Remember to change the panel that has to be set as active, and the Position value in the condition, for each occurrence. All the events should be displayed in the events bar as shown in the image below.


Up to now, we “have told” the prototype to change the image each time we click on the arrow widget. The image will change because each panel will be assigned a value, which at each click will change.

11. Now we have to assign the value to the panels. Click on “Add event” in the Events tab, create a new “On click” + “Set value” event, select “Variables”>Position and assign the fixed value as 1. Click OK.

12. In the Events tab, click “add condition” and add the following condition: “when the position value is equal to 4” and click OK. This way, when the 4th slide is reached, the slideshow will begin again from number 1. If you’re designing a slideshow with more than 4 slides, then remember to assign the relevant position value to this condition.

13. Finally, add another “On click” + “Set value” event, which will be valid for all the other cases: this time, the value should be set as “Calculated” (Position + 1).


Interactive wireframes slideshow: right navigation

14. And that’s it. You only have to add the same events for the left navigation arrow, changing active panels and position values accordingly (remember, you need to work backwards this time!). The “Set value” events will have to be different as well: this time the condition to allow the loop will have to say: “when the position value is equal to 1”, and it will have to “Set value” as 4. This way, when the 1st slide is reached, the slideshow will continue from number 4. Furthermore, this time the Set value should be set as “Calculated” (Position – 1).

You can see an image of the final result below.

Interactive wireframes slideshow: left navigation

Now you can simulate and enjoy your slideshow!

Next tutorial: How to create a carousel in your interactive prototypes

Related tutorials: