The Swipeable Gallery component delay autoplay

[stefa...@gmail.com]

Hey there,

I am using the The Swipeable Gallery component to display a set of my dynamic products coming through a JSON feed but I would like to pause the auto play of the Gallery for 3 seconds whilst the intro frame finishes. Is there an easy way to do this?

Thank you

[Kent]

Can you do it on the timeline, by putting your gallery after your intro animation or on another page?

This can also be done with javascript, involving multiple edits to custom.js as well as the source HTML file in code view (assuming Adwords). I can provide detailed steps if that's something you would like to proceed with.

Kent

Google Web Designer team

 

[stefa...@gmail.com]

I tried to do this by putting the swipeable gallery after the intro frame, but even still the auto scroll animation starts before the 4 second intro does.

Yes, this has been created in the AdWords environment.

Would it be possible to provide a few steps which would help me do this via custom JS & updating the HTML in CodeView?

Much appreciated.

Thank you

[Kent]

Adding delay autoplay to swipe-gallery in a dynamic ad:

common/custom.js edits:

1. Declare and set "itemsLength" (screenshot1)
   
2. Add stopGalleryCycle to bottom return (screenshot2)
   
3. Add the Gallery functions below (setup for initial delay plus two gallery cycles)

Web Designer edits:

1. Select gallery and Properties panel > deselect autoplay, delete duration value
2. Add custom.stopGalleryCycle(); to all mouseover, mouseout and gallery-nav-arrow events. (This stops autoplay when the ad is interacted with). It can be done in via the Events panel or in Code view (screenshot3)

Kent

Google Web Designer team

  //Delay Gallery functions
  var galleryCycle;
  function initGalleryCycle() {
    var galleryCycleFrameDur = 3500;
    var galleryCycleTotalDur = galleryCycleFrameDur * itemsLength;
    console.log("+ galleryCycleTotalDur: ", galleryCycleTotalDur);
  
    // First cycle after initial delay.    
    var galleryCycleDelay = 5000;
    setTimeout(function() {
      console.log("+ start galleryAutoRotate first cycle");
      common.galleryAutoRotate(galleryCycleTotalDur);
      common.isFrameEnd = true;
    }, galleryCycleDelay);

    // 2nd Cycle after full duration + buffer.
    galleryCycle = setTimeout(function() {
      console.log("+ start galleryAutoRotate second cycle");
      common.galleryAutoRotate(galleryCycleTotalDur);
    }, galleryCycleTotalDur + galleryCycleDelay + 1000);
  }

  function stopGalleryCycle() {
    // Clear timeouts.
    clearTimeout(galleryCycle);
    // Stop gallery cycle.
    common.galleryStopRotation();
  }

[Francesco Maria de Biasio]

Hello Kent,

i've follow your tips for adding delay on autoplay and all seems to work right.

Can you suggest me right code If i want add more cycles instead of two? 

Thanks in advance,

Francesco

[Kent]

The way that delay function is written, you need a new code block for each full cycle of the gallery.

Attached are edits for a 3rd cycle, and you would just repeat for as many cycles as needed.

Note Adwords policy is 30-seconds max animation time.

Hope that helps,