Play through banner with 4 pages automatically

Skip to first unread message

Jean Doodle

Aug 17, 2017, 7:10:18 AM8/17/17
to Google Web Designer beta
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() {


setTimeout(nextPage, 3000);

and lots of variations to this. 

Any idea's how to do this? 

Thanks a lot in advance!

San Khong

Aug 17, 2017, 1:16:53 PM8/17/17
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() {

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.
Google Web Designer team

Jean Doodle

Aug 22, 2017, 4:39:25 AM8/22/17
to Google Web Designer beta
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

Aug 22, 2017, 12:45:15 PM8/22/17
to Google Web Designer beta

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() {

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.
Reply all
Reply to author
0 new messages