Question. How to temporary disable slide switching?

[max-mykhailenko]

I have zoom module inside the embla and I want to disable ability to switch slide when user zoom in. Is it possible?

[davidjerleke]

Hello Max (@max-mykhailenko),

Thank you for your question. I'm missing some important details in order for me to help you out:

• What action triggers the zoom mode? A click? Pinch move?
• Are you using the VanillaJS or ReactJS version of Embla Carousel?

Kindly, David

[davidjerleke]

@max-mykhailenko, did you see my response?

[max-mykhailenko]

• What action triggers the zoom mode? A click? Pinch move?

On desktop it's click and drag after click. I have in place image zoom. On mobile — pinch gesture.

• Are you using the VanillaJS or ReactJS version of Embla Carousel?

I use react version of embla carousel and I can run some Embla methods when user starts to pinch or click on the image.

Thank you, for your fast reaction

[davidjerleke]

Hello again Max (@max-mykhailenko),

Thanks for getting back to me. You didn't provide a CodeSandbox so I don't know any details about your setup. But I'm going to try mu best to help you out anyway 🙂.

Assuming that you can make the zoom trigger more consistent on desktop and mobile, by triggering it on a click event, you can do something along these lines:

const onSlideClick = useCallback((clickedSlideIndex) => {
  if (embla && embla.clickAllowed()) { // You might wanna check that the zoom mode isn't active here too

    // Re-initalize Embla without pointer interactions
    embla.reInit({ draggable: false }); 

    // Activate zoom here because Embla says the pointer interaction was a click and NOT a drag move
  }
}, [embla]);

...and attach the click handler to your slides in your render method:

<div className="embla__container">
  {slides.map((slide, slideIndex) => {
    return (
      <div className="embla__slide" onClick={() => onSlideClick(slideIndex)}>
        ...
      </div>
    )}
  )}
</div>

...and don't forget to make Embla draggable again when the user closes the zoom, like so:

embla.reInit({ draggable: true }); 

There are additional ways to disable slide switching if this doesn't work, but let me know if this approach works first.

Best, David

[max-mykhailenko]

embla.reInit({ draggable: true });

Will reinit provoke active slide changes or active slide will be the same?

[davidjerleke]

@max-mykhailenko, the active slide will be the same. If embla.reInit() is triggered when the active slide is 3, it will re-initialize with slide 3 being active.

Let me know how it goes!

Kindly, David

[davidjerleke]

Hello @max-mykhailenko,

How did it go? Have you had any luck with my suggestions?

Best, David

[max-mykhailenko]

Hello @max-mykhailenko,

How did it go? Have you had any luck with my suggestions?

Best, David

will check today

[max-mykhailenko]

It works fine, thank you

[davidjerleke]

I'm happy to hear that @max-mykhailenko. Enjoy.