Trying to Pause Autoplay onBlur

[anobjectn]

Hello Glide Community,

I do have an autoplay carousel that I want to be able to pause when the window blurs. Currently, the code I have does run when the page blurs and focuses, but the reference to the Glide doesnt work and the pause() and play() methods dont work even employing global variable for my Glide instance. Instead, the carousel appears to continue running in the background and when it focuses, the animation runs fast (appearing to catch up) for some seconds before re-settling at the specified animation speed.

I thought this would be simple but I cannot get it to work. What am I doing wrong? If there is a better way to do it (perhaps CSS animation and custom JS?) that is more performant, I'm all ears. I do understand autoplay carousel is not the primary intended use case for Glide - but I am already using Glide in my project and need this behavior.

Thank you!

This is my Glide setup function (had a lot of trouble using the code formatter for this, so attaching in txt file also)

` var logoGlide; function setupHomeTrustLogosCarousels(){ let debug = true; if(debug && window.console){console.log('setupHomeTrustLogosCarousels()'); } if(jQuery('body').is('.page-home-php')){ var $logoSlides = jQuery('.logo.glide__slide'); if(!$logoSlides || !$logoSlides.length){ return; } var nBodyWidth = jQuery('body').outerWidth(); var nLogoWidthIsh = 180; var nAverageW = Math.floor(nBodyWidth/nLogoWidthIsh); var $section = $logoSlides.first().closest('.section'); if(debug && window.console){ console.log('nBodyWidth',nBodyWidth); console.log('nAverageW',nAverageW); console.log('logoGlide before',logoGlide); } logoGlide = new Glide('.logo-list.glide',{ type: 'carousel', startAt: 0, perView: nAverageW, autoplay: 1, animationDuration: 6000, animationTimingFunc: 'linear', gap: 25, peek: { before: 80, after: 80}, dragThreshold: 20, breakpoints: { // Glide breakpoints mean: at specified size and below ! 375: { perView: 3, gap: 20 } } }); if(debug && window.console){ console.log('logoGlide b4 mount',logoGlide); }

function pauseLogoSlider(){
  if(debug && window.console){console.log('pauseLogoSlider()')}
  logoGlide.pause();
}
function startLogoSlider(){
  if(debug && window.console){console.log('startLogoSlider()')} 
  logoGlide.play();
}

window.addEventListener('focus', function(){
  startLogoSlider();
  if(debug && window.console){console.log('focus');}
});
window.addEventListener('blur', function(){
  pauseLogoSlider();
  if(debug && window.console){console.log('blur');}
});

logoGlide.mount();
if(debug && window.console){
  console.log('logoGlide after mount',logoGlide);
}

$section.addClass('glide-setup');

}
} ` code-glide.txt