Disable swiper

[janheinvanasseldonk]

Hi, I'm using yet-another-react-ligthbox to create a lightbox for videos/images and maps, I'm using custom slides for rendering the maps and video files. I want to disable swiping when I'm rendering a map. Is there any way to temporarily disable the swiping/sliding functionality on certain slides?

[igordanchenko]

Hi there! While there is no dedicated setting to explicitly disable swiping functionality on specific slides, you can achieve this by intercepting and cancelling propagation of the following events:

• onPointerDown
• onKeyDown
• onWheel

https://codesandbox.io/s/yet-another-react-lightbox-112-l70ev3?file=/src/App.js

[janheinvanasseldonk]

thanks

[janheinvanasseldonk]

I also put these properties too

  useEffect(() => {
    const el = conRef.current;
    if (!el) return;

    const stop = (e) => {
      e.preventDefault();
      e.stopPropagation();
    }


    el.addEventListener("pointerdown", stop);
    el.addEventListener("mousedown", stop);
    el.addEventListener("keyDown", stop);
    el.addEventListener("wheel", stop);
    el.addEventListener("dragstart", stop);

    return () => {
      el.removeEventListener("pointerdown", stop);
      el.removeEventListener("keyDown", stop);
      el.removeEventListener("wheel", stop);
      el.removeEventListener("dragstart", stop);
      el.removeEventListener("mousedown", stop);
    }; 
  }, []);