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