Question

我正在构建一个在触摸屏设备上使用的幻灯片（使用Swiper）。

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

我试过了两个：

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

这些是Swiper库的属性，可在此处找到：http://idangero.us/swiper/api/#.WVDHLROGN24

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

Answer 1

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

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

Responsive Pagination和Navigation Buttons是Swiper中的两个选项，用于在移动设备中自动旋转页面，因此您只需添加反转css即可完成旋转。

David Walsh撰写了一篇关于方向变化检测的有用博客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
    }
});

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

1 个答案: