[Help]: "stopOnInteraction: false" failing to re-enable autoplay after interaction

[ItsFrankieD]

Summary

I am using vanilla JavaScript alongside my Drupal 10 installation and, for whatever reason, setting the stopOnInteraction option to false fails to re-enable autoplay post-interaction.

I have enqueued the following libraries.

https://cdn.jsdelivr.net/npm/[email protected]/embla-carousel.umd.min.js
https://cdn.jsdelivr.net/npm/[email protected]/embla-carousel-autoplay.umd.min.js

A minimal example of the markup.

<div class="hero">
   <div class="hero__items">
      <div class="hero__item">
         <div class="hero__media">
            <img loading="lazy" src="/image1.jpg" width="2500" height="1500">
         </div>
      </div>
      <div class="hero__item">
         <div class="hero__media">
            <img loading="lazy" src="/image2.jpg" width="2500" height="1500">
         </div>
      </div>
   </div>
</div>

The initialization for the carousel in question.

'use strict';

(function (Drupal, once, EmblaCarousel, EmblaCarouselAutoplay) {
  const heroInit = (element) => {
    const slides = element.querySelectorAll('.hero__item');

    if (slides.length <= 1) {
      return;
    }

    const options = {
      loop: true,
      delay: 6500,
      duration: 40,
      stopOnMouseEnter: true,
      stopOnInteraction: false,
      slides: slides,
    };

    const carousel = EmblaCarousel(element, options, [EmblaCarouselAutoplay()]);
  }

  Drupal.behaviors.heroInit = {
    attach: (context, settings) => {
      once('heroInit', '.hero', context).forEach(heroInit);
    }
  };
})(Drupal, once, EmblaCarousel, EmblaCarouselAutoplay);

The simple workaround I've implemented works for the time being, but I would much prefer to use the API as intended.

const autoplay = carousel.plugins().autoplay;
element.addEventListener('mouseenter', () => autoplay.stop());
element.addEventListener('mouseleave', () => autoplay.play());

I will gladly supply any additional information. Thanks much!

If applicable, which variants of Embla Carousel are relevant to this question?

• 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-docs (Documentation)
• embla-carousel-docs (Generator)

Additional information

No response

CodeSandbox example

No response

[davidjerleke]

Hi @ItsFrankieD,
Thanks for your issue.

setting the stopOnInteraction option to false fails to re-enable autoplay post-interaction.

What do you mean by post-interaction? After dragging? Or clicking navigation buttons?

[ItsFrankieD]

Hi! My apologies, I was a bit unclear when I wrote this. It was the end of my work week.

After dragging, yes. After coming back to it this week, it seems that stopOnMouseEnter also fails to work. My goal is the same as the following documentation snippet.

When enabled, autoplay will stop when a mouse pointer enters the Embla Carousel container. If stopOnInteraction is also false, autoplay will resume when the mouse leaves the carousel container.

Down the road I plan to add calls to action to each slide, so the above mentioned functionality is ideal.

[davidjerleke]

@ItsFrankieD I'll test this as soon as possible 👍.

[ItsFrankieD]

Thanks! Here's a codepen with the issue present. I'm not great with codesandbox, so hopefully this will suffice. I assume that the issue is on my end, but if it turns out not to be user error, I'd be happy to create an issue.
https://codepen.io/frankied3/pen/GRaJLmj

[sarussss]

Hi @ItsFrankieD

Your problem is that you are writing the autoplay options together with the slider options
Please write the autoplay plugin options separately.

Replace

((EmblaCarousel, EmblaCarouselAutoplay) => {
  const hero = document.querySelector(".hero");
  const slides = hero.querySelectorAll(".hero__item");

  if (slides.length <= 1) {
    return;
  }

  const options = {
    loop: true,
    duration: 40,
    slides: slides,
  };
  

  const optionsAutoplay = {
    delay: 6500,
    stopOnMouseEnter: true,
    stopOnInteraction: false,
  };

  const carousel = EmblaCarousel(hero, options, [EmblaCarouselAutoplay(optionsAutoplay)]);
})(EmblaCarousel, EmblaCarouselAutoplay);

[ItsFrankieD]

Oops, that'd do it! It's always something simple. Thanks so much.