Fade autoplay stop working on click

[blursolo]

Thanks for the plugin! Unfortunately, the slideshow stops autoplaying as soon as I click on it. pauseAutoPlayOnHover = false doesn't have an effect, neither does draggable = false.

Any workaround for this?

[kith-and-kin]

I can confirm we are also experiencing this issue. Flickity is initialising fine with the fade option on page load. When interacting or clicking, fade is being paused and won't resume.

There are no console errors.

Versions from package.json:

"flickity": "^2.2.1",
"flickity-fade": "^1.0.0"

Options for carousel:

new Flickity(context, {
    cellAlign: 'left',
    cellSelector: elements.targets,
    contain: true,
    autoPlay: 7000,
    fade: true,
    draggable: false,
    pageDots: false,
    prevNextButtons: false,
    pauseAutoPlayOnHover: false,
    watchCSS: true
  });
}

I've added a reduced test case to demonstrate. Hope this helps: Link to reduced test case

[abombelli]

Same issue here.

[CHEWX]

I had a similar issue where by using autoplay the fade would work correctly, as soon as I used $('.slideshow').flickity('select', index), it would stop the animation and flicker.

To fix I've, $('.slideshow').addClass('is-stopped').flickity('select', index), then manually added a CSS fade. .slideshow.is-stopped .slide { transition: opacity 500ms ease; }

Might not help in this instance, but it's a work around.

[desandro]

Fade is being paused and won't resume

See https://github.com/metafizzy/flickity/issues/429#issuecomment-411753543

---

autoPlay is designed to stop and stay stopped any time the user interacts with the carousel. This gives user control and does not take it away from the user. On mobile, there is no hover event so there is no way to detect when a cursor has exited the carousel.

That said, some developers still would like a way to resume autoPlay after being stopped for a period of time. If you wish to implement that behavior, you can do so with your own JS and the Flickity API.

Here is one solution that will always resume after being stopped for 3 seconds 🚨 even if the user has interacted with the carousel 🚨

// overwrite stopPlayer method
Flickity.prototype.stopPlayer = function() {
  this.player.stop();
  // always resume play after 3 seconds
  setTimeout( () => {
    this.player.play();
  }, 3000 )
};