a blog on prototyping by pidoco°

Slideshows or carousels are a neat eye catcher on a site and great way to present different information on limited screen estate. Additionally, they allow users to gain a quick overview of your offering and switch between different topics. With Pidoco, you can easily simulate slideshows and carousels using the “Extended Interactions” feature. And here is how it goes …

1. Setting up the project

To build our slideshow we will use several copies of the same page that will only differ in the section representing the slides. Here’s my project which represents the website of a small art museum. Let’s start by building the page that will contain the slideshow. Here I added some headlines and a text block, but note that I left some space in between for the slideshow. This will be the “frame” for our slide show.

Adding the fixed content to the start page

2. Creating the slideshow

Now, let’s add the slides to our project. To add the slides, we will make a few copies of our initial page – we need one page for each slide (since my slideshow will consist of three different images, I will make two copies, so there will be three pages in total). To do so, we click the “Duplicate” button in the context menu.

Cloning the start page to create the slideshow

Now we can start editing the slide: Open the initial page and add an image for the slide, as well as any other content you want to show on the first slide. I used an image, some text and a headline. In addition, I added a “Start slideshow” button to the first slide. Note that this puts the user in control of the slideshow, rather than starting it automatically when the page loads.

Editing the first slide

Do the same with the other two pages to create slides 2 and 3. To ensure consistency, all slides should have the same size and look.

3. Adding interactions

Finally, let’s set up the interactive part. To make the slideshow move, we will add several interactions to the start button. To do so, select the button and open the “Interactions” tab of the context menu. To use more than one reaction, click on “Add reaction” in the right column of the Interaction dialog. To initiate several subsequent slide transitions with just one button click, we can use a delay with each page transition. I chose 5 seconds for both transitions.

Using interactions to change the visibility of the slides

Note: Since all page transitions are counted from the first button click, the first transition will have a delay of 5 seconds, the next 10, 15, 20, and so on.

Hint: You can also build a slideshow using layers instead of several pages, by putting each slide on an individual layer and using an interaction that will display and hide the slides in the right order. In this case, however, you need to remember to order the layers such that the next slide is always displayed “on top” – or hide the slides that are not active with every new slide that is displayed.

That’s it! You have successfully created a slideshow! Do you need help? Then do not hesitate and drop us a line via support@pidoco.com or Facebook and Twitter.

Happy Prototyping!