Skip to content

Conversation

audipasuatmadi
Copy link

Motivation

Some image just don't start from a certain direction. This caused dragging image doesn't feel natural. I could rename the image to a certain direction of course, but I feel we could add improvement to the library instead!

Result:

2025-06-19.18-17-29.mp4

Copy link

vercel bot commented Jun 29, 2025

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Comments Updated (UTC)
react-image-turntable ❌ Failed (Inspect) Jun 29, 2025 2:05am

@audipasuatmadi
Copy link
Author

Hi @nerdyman, thank you very much for your open-source project here. I really appreciate it and it helped a lot.
I have made a PR here to simply allow reversing the direction of the rotation (I may be bad on variable names!)
Please have a look, I hope this PR helps.

@nerdyman
Copy link
Owner

nerdyman commented Jul 1, 2025

Thanks for your work @audipasuatmadi, what's the use case for this? Is it an RTL reading direction thing?

@audipasuatmadi
Copy link
Author

Hi @nerdyman, I'm sorry I'm late to see your comment. I'm glad you take notice.
I'll explain it as much as I can.

The use case is if the images ordering is reversed. Suppose we took an image of an object from the opposite direction.
In the BMW car example this repo has above, suppose the image name is in reverse (clockwise, as opposed to the counter-clockwise behavior of the default code), without this feature, we have to: Rename each and every image to reverse it in another direction, so the drag feels natural. This PR solves that problem. I hope that makes sense.

@nerdyman
Copy link
Owner

nerdyman commented Aug 6, 2025

Thanks @audipasuatmadi. I'm not if I follow. I think the keyboard nav would also need to be flipped in order for this to behave consistently.

V4 is introducing an autoRotate.counterClockwise #31 property so instead of reverseHorizontal this prop could be called counterClockwise.

I'm not sure if this is needed though, could the array not be reversed using Array.reverse?

E.g.

const images ['1.jpg', '2.jpg', '3.jpg'].reverse();

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants