Play through banner with 4 pages automatically

[Jean Doodle]

Hello 

Can't figure out the next thing. I'm trying to create a banner with 4 pages that automatically plays through these pages (different products). Besides the autoplay there should also be a navigation options with 4 buttons to jump to the different pages (this part is working). I've been trying to add a custom event with interval:

page 1> ready to present the page > custom code: 

function nextPage() {

  document.getElementById('pagedeck').goToPage('p2');

}

setTimeout(nextPage, 3000);

and lots of variations to this. 

Any idea's how to do this? 

Thanks a lot in advance!

[San Khong]

Hi Jean,

Attached is the sample file. 

There are a few ways to do this. If you look at the component APIs help page, it shows that the pageDeck has a method goToNextPage. You can set the custom action in the first page to go to the next page as followed:

Event: page > ready to present the page

Custom action:

setTimeout(nextPage, 1000);

function nextPage() {

  document.getElementById('pagedeck').goToNextPage();

}

Then in page 2 and 3, you can use the same custom action.

In page 3, you will need to add a new custom action to go back to page 1 by using the following:

setTimeout(function() {

  gwd.actions.gwdPagedeck.goToPage('pagedeck', 'page1', 'none', 1000, 'linear', 'top');

}, 1000);

If you don't use gotoNextPage method, you can add separate custom action for each page to use goToPage.

Hope it helps.

San

Google Web Designer team

[Jean Doodle]

Hi San

Thanks for the help. This way works fine if I only want autoplay. But when I try to combine it with buttons to navigate things get messy. When I click a button to go to a certain page, there are two events that have to be finished.

The autoplay (go to next frame) and the user instigated event. 

So I guess the solution would be that once clicked on a button, all the already activated events should be stopped. Is that possible without going to much into javascript?

Any ideas?

[San Khong]

Jean,

You can set a variable called userInteraction and initialize it to 0. When user clicks to go to next page, set userInteraction to 1 then go to next page. Then edit the custom event for next page to only execute when userInteraction is 0.

Like this: 

if (userInteraction == 0) {

  setTimeout(nextPage, 2000);

}

function nextPage() {

  document.getElementById('pagedeck').goToNextPage();

}

Add the event to the button that user would click with custom action:

userInteraction = 1;

gwd.actions.gwdPagedeck.goToPage('pagedeck', 'page1_1', 'none', 1000, 'linear', 'top');

To set userInteraction to 0, switch to code view, find window.gwd = window.gwd || {};

and add this right below it

var userInteraction = 0;

Attached is the file.