在JS中旋转体,左侧变为右侧和右侧变为左侧

Question

我正在构建一个用于触摸屏设备的幻灯片(使用Swiper).

由于人们可以从两侧使用此设备,我希望能够旋转包含滑块的整个网页.当我旋转页面时,幻灯片显示需要反转,以便向左滚动,将有效地保留,反之亦然.

我试过了两个:

mousewheelInvert和controlInverse,但它们似乎都没有正确响应触摸事件？

这些是Swiper库的属性,可以在这里找到:http://idangero.us/swiper/api/#.WVDHLROGN24

有人曾尝试过这个吗？提前致谢

Answer 1

我的建议是添加一个侦听器来检测方向更改,并将"反转"/旋转css添加到您的幻灯片容器onchange上.这不需要依赖于Swiper api,但可以与它一起使用

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

该响应分页和导航键是组队,探索两个选项旋转移动自动旋转页面,所以你只需要添加CSS反转来完成旋转.

目前由大卫沃尔什关于取向变化检测一个有用的博客在这里

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