[Help]: How to disable scrollNext

[Yuschyk]

Summary

I need to disable switching to the next slide on a certain condition (until the user does something on the current slide). How can I implement this, as I didn't see this setting in the carousel.

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

Additional information

No response

CodeSandbox example

No response

[davidjerleke]

Hi @Yuschyk,

Thanks for your question? Is the carousel in question draggable?

[Yuschyk]

@davidjerleke Yes, in should be like allowSlideNext in swiper

[davidjerleke]

@Yuschyk in that case you can do this:

import useEmblaCarousel from 'embla-carousel-react'

export function EmblaCarousel() {
  const allowDragRef = useRef(true) // Set this ref to true if you want the carousel to be draggable, and false when you want to disable it

  const [emblaRef] = useEmblaCarousel({
    watchDrag: () => {
      return allowDragRef.current
    }
  })

  // ...
}

Docs reference for watchDrag.

[Yuschyk]

@davidjerleke Yes, but your solution has a little probrem. watchDrag disable not only next slide. When watchDrag user can't drag to previous slide. And in this case, we only need to lock the next slide.

[davidjerleke]

Yes, but your solution has a little probrem. watchDrag disable not only next slide. When watchDrag user can't drag to previous slide. And in this case, we only need to lock the next slide.

Yes, that's why I asked this question:

@Yuschyk do you want to temporarily disable drag interactions in both directions?

And you answered yes, but then you actually meant no I guess 🙂, because you only want to disable drag to the next slide. However, this is not doable at the time of writing. You'll have to wait for the upcoming feature watchDragMove before you can achieve this.

This discussion is a duplicate of:

• [Help]: Limit drag/swipe to one direction #749