Xoay phần thân trong JS, trái sang phải và phải sang trái

Question

Tôi đang tạo bản trình chiếu (sử dụng Swiper) được sử dụng trên thiết bị màn hình cảm ứng.

Khi mọi người có thể sử dụng thiết bị này từ cả hai bên, tôi muốn có thể xoay toàn bộ trang web chứa thanh trượt. Khi tôi xoay trang, trình chiếu cần phải được đảo ngược, để di chuyển sang trái, sẽ có hiệu quả ở bên trái và ngược lại.

Tôi đã thử cả hai:

mousewheelBật và điều khiểnBên cạnh đó, nhưng dường như không phản hồi đúng cách khi chạm vào sự kiện?

Đây là những thuộc tính của thư viện Swiper và có thể được tìm thấy ở đây: http://idangero.us/swiper/api/#.WVDHLROGN24

Có ai cố gắng này trước đây chưa? Cảm ơn trước

Answer 1

lời khuyên của tôi là thêm người nghe để phát hiện thay đổi hướng và thêm "đảo ngược"/xoay css vào vùng chứa trình chiếu của bạn onchange. Điều này không cần phụ thuộc vào api Swiper, nhưng có thể làm việc cùng với nó

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

Các Responsive Pagination và Navigation Buttons hai tùy chọn trong Swiper mà xoay trang trong điện thoại di động tự động xoay, do đó bạn sẽ chỉ cần thêm đảo ngược css để hoàn thành vòng quay.

Có một blog hữu ích bởi David Walsh về phát hiện định hướng thay đổi here

matchMedia js dụ từ 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 
    } 
});