Swipable gallery with buttons (custom navigation) - no loop after reaching end

121 views
Skip to first unread message

Andrzej Jakubczyk

unread,
Nov 17, 2017, 2:16:09 AM11/17/17
to Google Web Designer beta
I have a swipable gallery component with "external" or "custom" buttons controlling GoForwards and GoBackwards actions. When the gallery reaches its end it does not react on "reachrightend" action. But everything is ok, when there is no custom navigation button (swipe only). Is there a way to make gallery go to the first frame when it reaches the last one in that case?

Greetings,

Kent Myers

unread,
Nov 20, 2017, 12:08:14 PM11/20/17
to Google Web Designer beta
I don't know if this is possible with swiping, but we can create looping galleries using next & previous buttons (swiping disabled). To do that we add custom code to the buttons. We keep track of which item is being shown and use logic to invoke the goFowards/goBackwards actions for the middle items and the goToFrame action for the first & last items. For example clicking "next" on the last item should call goToFrame(1) and appears to be a looping gallery. You may be able to use this same technique with swiping. We don't use swiping in our dynamic ads with swipegalleries b/c it interfered with the exits.

Hope that helps,

Kent
Google Web Designer team
 



Andrzej Jakubczyk

unread,
Nov 20, 2017, 1:32:05 PM11/20/17
to Google Web Designer beta
Thanks! Would you be so kind and share your code please?

Kent Myers

unread,
Nov 20, 2017, 4:48:37 PM11/20/17
to Google Web Designer beta
Sure, although there are few functions that work together so depending on your environment, you may need to customize. You can see a working sample in the new Web Designer v.2.0.0.1116:

File > New from template...
Dynamic remarketing for AdWords
Dynamic Remarketing with Headline and Single CTA Button

scot...@gmail.com

unread,
Jun 19, 2018, 4:57:54 PM6/19/18
to Google Web Designer beta
Hey Kent can this be done with an ad that isn't dynamic? (e.g. uses local image loaded into the Swipeable Gallery component).

Kent

unread,
Jun 19, 2018, 5:51:13 PM6/19/18
to Google Web Designer beta
Yes that same code should work in non-dynamic ads, however AdWords has additional restrictions on custom functionality in case you are using that network.

scot...@gmail.com

unread,
Jun 20, 2018, 12:21:02 PM6/20/18
to Google Web Designer beta
Thanks for the response Kent and in the last 4-5 years I think you're the closet anyone has come to getting this functional on this forum. I'm finding it doesn't work when the images are pulled in locally (not exactly able to identify why it' requiring the dynamic feed however).

If you ever have some room to test this and possibly provide working sample files please let me know! (thank you for getting it this far)

Kent

unread,
Jun 20, 2018, 1:06:22 PM6/20/18
to Google Web Designer beta
I see. The 2 functions required are galleryFrameShown() and updateArrowDisplay(index) both in the file common/custom.js from the template I referenced. The problem is they reference dynamic properties in the gallery. One approach would be to first hard code constants like numFramesPerPage = 2 and itemsLength = 6, and then remove the dynamic dependencies in that file which will be the hard part. Another approach is to start a new non-dynamic file, add those custom events and functions, and proceed in this fashion.
Reply all
Reply to author
Forward
0 new messages