[Feat]: Improve performance by disable auto play when not visible

[njfamirm]

Which variants of Embla Carousel are relevant to this feature request?

• embla-carousel (Core)
• embla-carousel-react
• embla-carousel-vue
• embla-carousel-svelte
• embla-carousel-autoplay
• embla-carousel-auto-scroll
• embla-carousel-solid
• embla-carousel-auto-height
• embla-carousel-class-names
• embla-carousel-fade
• embla-carousel-docs (Documentation)
• embla-carousel-docs (Generator)

Feature description

Hi

Using built-in browser APIs, we can detect when an element is not visible, preventing unnecessary autoplay and CPU-intensive calculations like opacity updater.

this is my solution:

function stopAutoPlayOnNotVisible(carouselNode: HTMLElement, emblaApi: EmblaCarouselType): void {
  logger.logMethod?.('stopAutoPlayOnNotVisible');

  const autoPlayPlugin = emblaApi.plugins().autoplay;

  const observer = new IntersectionObserver((entries) => {
    const entry = entries[0];
    if (entry.isIntersecting) {
      logger.logMethod?.('autoPlayPlugin.play');
      autoPlayPlugin.play();
    }
    else {
      logger.logMethod?.('autoPlayPlugin.stop');
      autoPlayPlugin.stop();
    }
  });

  observer.observe(carouselNode);
}

Additional Context

Additional details here...

Before submitting

• I've made research efforts and searched the documentation
• I've searched for existing issues
• I agree to follow this project's Contributing Guidelines for feature requests

[davidjerleke]

@njfamirm is this a question or feature request? Do you want the in view feature to be built-in for the Autoplay plugin?

[njfamirm]

feature request, yes if your ok with this

[davidjerleke]

@njfamirm have you tried this?

emblaApi.on('slidesInView', (emblaApi) => {
  const autoplay = emblaApi.plugins().autoplay;
  if (!autoplay) return;

  const hasSlidesInView = emblaApi.slidesInView().length > 0;

  if (hasSlidesInView) {
    autoplay.play()
  } else {
    autoplay.stop()
  }
});