Add Navigation Interaction to stopOnInteraction

[james0r]

Feature request is related to

• [x] embla-carousel-autoplay

Is your feature request related to an issue?

• It doesn't appear that Autoplay has an option to stop autoplay when navigation is used.

Describe the solution you'd like

• Perhaps add this functionality to stopOnInteraction.

Describe alternatives you've considered

• This looks like it could be done manually inside the navigation button callback by using embla.plugins().autoplay.stop()

Example Implementation

      addPrevNextBtnsClickHandlers(emblaApi, prevBtn, nextBtn) {
        const scrollPrev = () => {
          if (emblaApi.plugins().autoplay?.options?.stopOnInteraction) {
            emblaApi.plugins().autoplay.stop()
          }
          emblaApi.scrollPrev()
        }
        const scrollNext = () => {
          if (emblaApi.plugins().autoplay?.options?.stopOnInteraction) {
            emblaApi.plugins().autoplay.stop()
          }
          emblaApi.scrollNext()
        }
        prevBtn.addEventListener('click', scrollPrev, false)
        nextBtn.addEventListener('click', scrollNext, false)

        return () => {
          prevBtn.removeEventListener('click', scrollPrev, false)
          nextBtn.removeEventListener('click', scrollNext, false)
        }
      },

[davidjerleke]

Hi @james0r,

Thank you for your suggestion. Embla doesn't expose any pre-built previous and next buttons. It only exposes methods to build this yourself:

• emblaApi.scrollNext()
• emblaApi.scrollPrev()

The embla-carousel-autoplay plugin doesn't expose anything related to navigation buttons but rather the autoplay.stop() method as you mentioned. I don't think it should expose scrollPrev and scrollNext methods too because this would cause confusion. Furthermore, devs may want to do more stuff inside their scrollPrev and scrollNext functions like so:

const scrollNext = () => {
  emblaApi.scrollNext()

  const { autoplay } = emblaApi.plugins()
  if (!autoplay) return
  if (autoplay.options.stopOnInteraction !== false) autoplay.stop()

  // Do something more here...
}

However, with this said, the carousel generator will solve this automatically for you (just tick the prev & next buttons and autoplay checkboxes). Please note that the generator is experimental at this stage though but it should work well in most cases.

Best, David

[james0r]

@davidjerleke That makes sense. The generator looks like it's gonna be pretty awesome!