Autoplay issue with my slideshows

Store Design
, , , , , , , , , , , , , , ,
1

Hi, I’m having an issue with my slideshows, specifically on desktop.

I’ve enabled autoplay, so the slides should switch automatically every 3 seconds when someone is watching it. On mobile, everything works perfectly.

But on desktop, once you scroll to the section where the slideshow is fully visible (taking up the whole screen), it just stops auto-switching.

Funny thing is, if the slideshow is only partially visible (e.g. halfway on the screen), it does keep switching. But once it’s fully in view, it freezes. Hope that makes sense

Does anyone know how to fix this? I just want the slideshow to keep rotating no matter what, unless it’s manually stopped.

Here’s the link: https://creationwithtim.com/products/cinematiq-mobile-luts
(Just scroll down a little to see the slideshows)

Thanks a ton!
Tim

2

Hello @CreatorTim

What you’re seeing is the slideshow pausing when it thinks the user has full focus on that section (a performance feature in some slider libraries). To override it, you need to tweak the slider’s init options so it never stops auto-playing, even when fully in view.

If your theme uses Flickity (common in OS 2.0 themes):

  1. In Shopify Admin, go to Online Store → Themes → Actions → Edit code.
  2. Open assets/slideshow.js (or sections/slideshow.liquid)—wherever the Flickity carousel is initialized.
  3. Find the Flickity init, which looks roughly like:

new Flickity(carouselElement, {
autoPlay: 3000,
pauseAutoPlayOnHover: true,
// …other settings
});

  1. Change those two lines to:autoPlay: 3000,
    pauseAutoPlayOnHover: false,
    pauseAutoPlayOnFocus: false,

  2. Save and refresh your storefront.

3

Yes, the slideshow on desktop will pause if you hover over it. Try moving your mouse above or below the slideshow and it will continue.

Not that slideshow element is wider than the actual images, so it will pause even though you’re hovering over white space.

There is no control for this behaviour, so you’d need to edit code to disable this…

Open your assets/global.js, find function focusInHandling and modify it by commenting out one line of code like this:

focusInHandling(event) {
    if (this.sliderAutoplayButton) {
      const focusedOnAutoplayButton =
        event.target === this.sliderAutoplayButton || this.sliderAutoplayButton.contains(event.target);
      if (focusedOnAutoplayButton && this.autoplayButtonIsSetToPlay) {
        this.play();
      } else if (this.autoplayButtonIsSetToPlay) {
        /* this.pause(); -- do not stop playing on hover */
      }
    } else if (this.announcementBarSlider.contains(event.target)) {
      this.pause();
    }
  }
4

Got it, thank you sm!

5

As a “Spotlight” theme user, this worked!