BetterTyped / react-zoom-pan-pinch

🖼 React library to support easy zoom, pan, pinch on various html dom elements like <img> and <div>
MIT License
1.54k stars 274 forks source link

with react-slick on mobile react-zoom-pan-pinch next prev not working with zoom effect #501

Closed arvind-netzwelt closed 1 month ago

arvind-netzwelt commented 3 months ago

Describe the bug A clear and concise description of what the bug is.

To Reproduce Steps to reproduce the behavior:

  1. Go to '...'
  2. Click on '....'
  3. Scroll down to '....'
  4. See error

Expected behavior A clear and concise description of what you expected to happen.

Screenshots If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

Smartphone (please complete the following information):

Additional context Add any other context about the problem here.

LakshayySharma commented 1 month ago

@arvind-netzwelt Can you provide a code snippet showing the issue which you are facing as there is not sufficient information.

Only on the basis of present information, I assume you are facing issue regarding scrolling to next image while in zoomed state in react slick. If you want to go to next and or previous image you can do this programmatically. You can use "onPanning" function of react-zoom-pan-pinch to check if you have reached the left or right boundary of your image while panning and can't pan further. Then if it's true you can use "slickGoTo/ slickNext/ slickPrev" functions of react-slick to trigger scrolling to next or previous image

hk-skit commented 1 month ago

@LakshayySharma It would be very helpful if you can share the reference document or sample code snippet to detect whether we are on boundaries. We are using react-zoom-pan-pinch with embla carousel. Could find any document to for events like panning.

TIA