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

[Andrzej Jakubczyk]

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]

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]

Thanks! Would you be so kind and share your code please?

[Kent Myers]

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]

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]

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]

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]

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.