Making the Swipeable gallery go back to the beginning once you have scrolled past the last product

[stefa...@gmail.com]

Hi there,

I have a Swipeable gallery on my banner which is controlled by a set of left and right arrows.

I have added an event to the arrow-left and arrow-right buttons which make the Swipable gallery go to the next frame which is great but once the user has scrolled through all of the products i want the gallery to go back to the beginning.

Does anyone know how this would be possible to do?

I have a demo of my banner available here to look at:

https://drive.google.com/open?id=1ZTf7-3A6SzKuaC_IHHFyZkBLDx1bfUVA

Any help would be really appreciated. Thank you :-)

[Kent]

Yes, this is possible but it takes some custom javascript and several edits in Code view to set up. Essentially you add some logic to the usual nav-arrow actions of goForwards & goBackwards to call goToFrame when it is detected the gallery is on ether end frame (first or last).

This functionality is available in many Adwords Dynamic Remarketing templates in Google Web Designer. If you are not using Adwords it can be more difficult to set up as the required Javascript files may not be available.

A slightly easier solution to this problem is to hide the corresponding arrow when the gallery is on an end frame. That also uses custom javascript and is seen in some Adwords DynRmkt templates.

Kent

Google Web Designer team

[stefa...@gmail.com]

Cheers Kent,

I have created the banner from scratch as I wanted to get a proper understanding of how it all works. I seem to be most of the way there.

I have also opened up Dyn Remarketing Template and taken a look at the imports.

I have copied across the custom.js and also the common.js to my project.

I also added the event listener and handlers to the L and R navigation arrows which control the carousel e.g:

gwd.galleryFrameShown = function(event) {
common.galleryFrameShown(event);
custom.galleryFrameShown(event);
};
gwd.galleryFrameActivated = function(event) {
common.galleryFrameActivated(event);
};
gwd.galleryAllFramesViewed = function(event) {
common.galleryAllFramesViewed(event);
};

I do seem to be getting an error in the console now though when pressing the Nav arrows which says:

Uncaught TypeError: Cannot read property 'frameCount' of undefined
at Object.galleryFrameShown (custom.js:53)
at HTMLElement.gwd.galleryFrameShown (index.html:741)

Line 53 of custom.js is:

var itemsLength = gallery.frameCount; (Cannot read property 'frameCount' of undefined)

do you know what maybe causing this?

Cheers