Körper in JS drehen, links wird rechts und rechts wird

Question

Ich baue eine Slideshow (mit Swiper), die auf einem Touchscreen-Gerät verwendet wird.

Da Leute dieses Gerät von beiden Seiten verwenden können, möchte ich in der Lage sein, die gesamte Webseite, die den Schieberegler enthält, zu drehen. Wenn ich die Seite rotiere, muss die Diaschau umgekehrt werden, so dass das Scrollen nach links effektiv und umgekehrt erfolgt.

Ich habe beide versucht:

mousewheelInvert und controlInverse, aber keiner von ihnen scheinen richtig Ereignisse zu berühren zu reagieren?

Dies sind Eigenschaften der swiper Bibliothek und kann hier gefunden werden: http://idangero.us/swiper/api/#.WVDHLROGN24 diese

Hat jemand versucht, bevor? Vielen Dank im Voraus

Answer 1

mein Rat wäre, einen Listener hinzuzufügen, um Orientierungsänderung zu erkennen und hinzufügen "invertieren"/rotate css zu Ihrem Diashow Container onchange. Das muss nicht auf dem swiper api ab, sondern kann in Verbindung mit ihm

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

Die Responsive Pagination und Navigation Buttons gibt zwei Optionen in swiper arbeiten, der die Seite in mobilen Auto-Rotation drehen, so dass Sie nur das hinzufügen müssen Invertieren Sie CSS, um die Drehung abzuschließen.

Es ist ein nützliches Blog von David Walsh bezüglich orientierungsÄnderungsErkennung here

matchMedia js Beispiel aus dem 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 
    } 
});