Body rotation in JS, left becomes right, and right becomes left

Question

I am creating a slide show (using Swiper) that is used on the touch screen.

Since people can use this device on both sides, I want to be able to rotate the entire web page containing the slider. When I rotate the page, the slideshow should be facing, so that scrolling to the left will be effectively left and vice versa.

I tried both:

mousewheelInvert and controlInverse, but none of them seem to respond correctly to touch events?

These are the properties of the Swiper library and can be found here: http://idangero.us/swiper/api/#.WVDHLROGN24

Has anyone tried this before? thanks in advance

Answer 1

my advice would be to add a listener to detect a change in orientation and add "invert" / rotate css to the container for the slide show. This should not depend on the Swiper api, but can work with it.

window.addEventListener("orientationchange", function() { // get the orientation number console.log(screen.orientation); //do stuff }, false); 

Responsive pagination and Navigation buttons are two options in Swiper that rotate the page in mobile auto-rotate, so you just need to add inverted css to complete the rotation.

There is a useful David Walsh blog regarding finding orientation changes here

matchMedia Example js from a blog:

 var mql = window.matchMedia("(orientation: portrait)"); // If there are matches, we're in portrait if(mql.matches) { // Portrait orientation } else { // Landscape orientation } // Add a media query change listener mql.addListener(function(m) { if(m.matches) { // Changed to portrait } else { // Changed to landscape } });