Rotate body in JS, left becomes right and right becomes left

Question

I am building a slideshow (using Swiper) that is used on a touch screen device.

As people can use this device from both sides, I want to be able to rotate the entire webpage that holds the slider. When i rotate the page, the slideshow needs to be inversed, so that scrolling left, will effectively be left and vice versa.

I have tried both:

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

These are 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 orientation change and add "invert"/rotate css to your slideshow container onchange. This need not depend on the Swiper api, but can work in conjunction with it

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

The Responsive Pagination and Navigation Buttons are two options in Swiper that rotate the page in mobile auto-rotate, so you would just need to add the invert css to complete the rotation.

There is a useful blog by David Walsh regarding orientation-change detection here

matchMedia js example from 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
    }
});