如何在方向更改時重新加載。 （Bxslider）

Question

我正在與Bxslider合作，在縱向上顯示1張幻燈片，並在橫向上顯示2張幻燈片。

問題是我需要在方向更改（縱向/橫向）時重新加載。

任何人都知道如何使它？

if (window.matchMedia("(orientation: portrait)").matches) { 

    $(document).ready(function(){ 
    // Special Slider 
     $('.wrap_mSpecial_list .bxslider').bxSlider({ 
      minSlides: 1, 
      maxSlides: 1, 
      auto:true, 
      infiniteLoop: true, 
      controls:false 
     }); 
    }); 
} 

if (window.matchMedia("(orientation: landscape)").matches) { 

    $(document).ready(function(){ 

     // Special Slider 
     $('.wrap_mSpecial_list .bxslider').bxSlider({ 
      minSlides: 2, 
      maxSlides: 2, 
      slideWidth: 5000, 
      auto:true, 
      controls:false, 
      infiniteLoop: true 
     }); 
    }); 
} 

Answer 1

使用jQuery Mobile，您可以使用此粘合劑監聽的方向變化：

$(window).on("orientationchange",function(){ 
    alert("The orientation has changed!"); 
    if (window.matchMedia("(orientation: landscape)").matches) { 
     //landscape slider 
    } 
}); 

你可以使用這個純JS：

window.addEventListener('deviceorientation', function(event) { 
    console.log(event.alpha + ' : ' + event.beta + ' : ' + event.gamma); 
}); 

簽出更多here