Learn how to prototype web and mobile apps

How to simulate a slideshow in your interactive wireframes

Simulate a slideshow in your interactive wireframes with the help of this tutorial.

You can download an example here.

Simulate a slideshow in your wireframes

This is a basic way to design a slideshow in your wireframes. Check out this tutorial to simulate a more advanced slideshow in your interactive prototypes.

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

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

3. To create the navigation, drag a left arrow widget inside the panel, on its left and center it. 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. You can change its appearance in the Properties tab.

Tip: 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

4. Do the same for the right navigation.

5. 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 carousel. If you want to show 4 images, then you should add 4 panels.

Interactive wireframes: slideshow space setup

Interactive wireframes: slides images

6) Navigate back to the first of these panels. Select the right arrow, and add an ‘On click’ + ‘Set active panel’ event. Set the next panel as the active panel and click OK.

7) Now do the same steps for the left arrow, but this time set the previous panel as the active panel.

Prototype a slideshow - Set up the navigation

8) Do the same for all the panels. Make sure that for each panel, you change the events in the left and right arrows in order to activate the correct panel.

Now you can simulate and enjoy your slideshow!

Next tutorial> Create a slide menu in your Android app prototype

Related tutorials:


  1. Marco Klein

    January 7, 2015 at 8:34 pm


    i don’t know how i can create a automatic slideshow in web.
    They must start after the webiste is loaded.

    Thanks for your help!

    Marco Klein

    • Lidia Rodriguez

      March 4, 2015 at 11:14 am

      Create an animation combining Set Active Panel with Pause event. Check this tutorial out: https://www.justinmind.com/support/effects-animations/

      • Nick Abram

        July 13, 2015 at 3:42 pm

        I can’t seem to get the automatic slideshow to work. When I use the pause event I can only get it to appear automatic by putting in loads of pause events and changing to active panels. I can’t seem to get it to be continuous.

        Please help. Thanks!

        • Danielle Schneider

          July 18, 2015 at 10:41 pm

          Hi Nick,

          To get a clearer picture of why this may be happening, could you send us your prototype at jim.support@justinmind.com ?

  2. larry

    April 29, 2015 at 3:02 am

    Hi, when i duplicate the panel, it creates a whole new “Dynamic Panel” Group. This does not allow me to simulate the scroll\slideshow effect.
    thank you

  3. Ricca

    May 23, 2015 at 7:47 am

    I already followed those steps, but when I simulated it, the slide show is not moved. Can you give me some tips, please?

    Thanks for your help.

    • Lidia Rodriguez

      July 3, 2015 at 10:39 am

      Hi Ricca, to allow the slideshow to move, you have to make sure each image is inside on of the panels, check the outline and see that the images are located in the correct panel.