JSで回転体を回転させ、左右が左右になる

Question

タッチスクリーンデバイスで使用されるスライドショー（Swiperを使用）を構築しています。

人々はこのデバイスを両側から使用できるため、スライダを保持するウェブページ全体を回転させたいと考えています。私はページを回転させると、スライドショーを反転させる必要があるので、左にスクロールすると効果的に残り、その逆もあります。

mousewheelInvertとcontrolInverse、それらのどれもイベントをタッチして、適切に対応するように見えるん：

は、私は両方を試してみましたか？

これらはSwiperライブラリのプロパティであり、ここで見つけることができます：http://idangero.us/swiper/api/#.WVDHLROGN24

は、誰もが前にこれを試していますか？おかげで事前に

Answer 1

私の助言は、向きの変化を検出するリスナーを追加し、スライドショーコンテナonchangeに "反転" /回転CSSを追加することです。これはSwiperのAPIに依存する必要はないが、それ

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

Responsive PaginationとNavigation Buttonsと一緒に作業することができますあなただけ追加する必要がありますので、携帯自動回転でページを回転させるSwiperにおける2つのオプションがありますcssを反転させて回転を完了させます。

方向変化検出ブログからhere

matchMedia jsの例についてデビッド・ウォルシュによって有益なブログがあります：

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 
    } 
});