Changing touch/swipe gesture direction dynamically

[bitshiftersgmbh]

Hey there. I need some help.

My situation

• horizontal Video-Slider with SwiperJS
• overlayed by a thumbnail swiper (SwiperJS, but vertical direction) to use as playlist
• We need custom fullscreen management and for mobile phones in portrait layout we use transform: rotate(90deg) on both slider wrappers to force videos are shown in landscape (keep in mind, that some phone users have orientation change (to landscape) locked! via phone settings)

The problem

The layout so far works as supposed. Problem: (of course) phones don't adapt that CSS rotation to the native swipe gesture and as a result, the user needs to swipe in a 90° angle to perform a slide change. Imagine a phone held to landscape with a big nice video and you need to swipe vertical to perform a horizontal swipe ... 🙄😵 this is the behaviour now and of course it cannot be released in that state!

Because browsers obviously do not allow real (meaning native) device orientation switch via JS, that CSS rotate thingy seems to be the best workaround. So what I finally need is to force the user to perform a vertical swipe (touchmove) on a - technically seen - horizontal SwiperJS layout. And vice-versa of course. Once the user leaves the fullscreen mode I would revert the change back to default behaviour.

Didn't see any solution in the documentation and by searching (old) issues. Is it even possible to change swipe direction without changing the instance's layout direction or are both things linked?

Thanks in advance for some hints.
Greetings - Peter

---

Swiper Version: 8.0.7
Platform/Target and Browser Versions: any smartphone with fullscreen mode browser and (OS-)locked orientation change