JQuery根據窗口大小重新加載三個設置變量

Question

我想根據窗口的大小爲bxSlider加載三個設置變量。我希望在瀏覽器調整大小時動態加載新設置，而不僅僅是加載。我有下面的代碼設置變量，我只是努力使它與mySlider的底部變量很好地玩，這是調整腳本的大小。

任何人都可以提供提示嗎？

$(document).ready(function() {  
     /* Set variables for the maxSlides option */ 
     var slidenumber, 
      width = $(window).width(); 

     if (width < 768) { 
      slidenumber = 1; 
     } else if (width < 1024) { 
      slidenumber = 2; 
     } else { 
      slidenumber = 3; 
     } 

     $('.bxslider').bxSlider({ 
      slideWidth: 5000, 
      minSlides: slidenumber, 
      maxSlides: slidenumber, 
      slideMargin: 50 
     }); 

     var mySlider; 

     function tourLandingScript() { 
      mySlider.reloadSlider(slidenumber()); 
     } 

     mySlider = $('.bxslider').bxSlider(slidenumber()); 
     $(window).resize(tourLandingScript); 

}); 

Answer 1

非常感謝Ondra Koupil的幫助，但是我無法完全按照要求完成他的解決方案，我最終選擇了一種全新的方法，我肯定可以按順序將其拆開進行優化並且不太可能是最有效的選擇，但它適用於我，並希望可以用於其他人。

以下解決方案旨在成爲JS的兩個完全分離的部分，如果將​​其組合在一個頁面上，將無法工作。目的是在相關頁面上加載相關的選項（設置1/2）。

/* Settings one */ 
$(document).ready(function() { 
    var settings = function() { 
    var settings1 = { /* Desktop */ 
      minSlides: 3, 
      maxSlides: 3, 
      moveSlides: 1, 
      slideWidth: 5000, /* Intentionally set to high value, bxslider will auto calculate */ 
      slideMargin: 50 
     }; 
     var settings2 = { /* Mobile */ 
      minSlides: 1, 
      maxSlides: 1, 
      moveSlides: 1, 
      slideWidth: 2000 /* Intentionally set to high value, bxslider will auto calculate */ 
     }; 
     return ($(window).width()<1200) ? settings2 : settings1; 
    } 

    var mySlider; 

    function reloadonresize() { 
     mySlider.reloadSlider(settings()); 
    } 

    mySlider = $('.bxslider').bxSlider(settings()); 
    $(window).resize(reloadonresize); 


}); 
/* End settings */ 

/* Settings two */ 
$(document).ready(function() { 
    var settings = function() { 
    var settings1 = { /* Desktop */ 
      minSlides: 4, 
      maxSlides: 5, 
      moveSlides: 3, 
      slideWidth: 5000, /* Intentionally set to high value, bxslider will auto calculate */ 
      slideMargin: 50 
     }; 
     var settings2 = { /* Mobile */ 
      minSlides: 2, 
      maxSlides: 2, 
      moveSlides: 1, 
      slideWidth: 2000 /* Intentionally set to high value, bxslider will auto calculate */ 
     }; 
     return ($(window).width()>=768) ? settings1 : settings2; 
    } 

    var mySlider; 

    function reloadonresize() { 
     mySlider.reloadSlider(settings()); 
    } 

    mySlider = $('.bxslider').bxSlider(settings()); 
    $(window).resize(reloadonresize); 


}); 
/* End settings */ 

Answer 2

實現此目的的最佳方法是使用CSS和媒體查詢，以便您可以隱藏或縮小幻燈片而不更改其編號。但是，如果您需要使用純CSS無法實現的更復雜的行爲，則需要爲其編寫一些JavaScript。

您需要偵聽窗口的調整大小事件，並在觸發時重新計算所需數量的幻燈片，並且如果它發生更改，請使用它的reloadSlider（）方法更新滑塊。該代碼可能看起來在某種程度上是這樣的：

$(document).ready(function() {  

    var slideCount; 
    var mySlider;   

    // separate function to calculate required slide count 
    function calculateSlides() { 
     var width = $(window).width(); 
     var slidenumber; 
     if (width < 768) { 
      slidenumber = 1; 
     } else if (width < 1024) { 
      slidenumber = 2; 
     } else { 
      slidenumber = 3; 
     } 
     return slidenumber; 
    } 

    // when page loads, we initialize the slider 
    slideCount = calculateSlides(); 
    mySlider = $('.bxslider').bxSlider({ 
     slideWidth: 5000, 
     minSlides: slideCount, 
     maxSlides: slideCount, 
     slideMargin: 50 
    }); 

    // when we resize the window, just recalculate number of slides 
    // and if it has changed, reload the slider 

    $(window).resize(function() { 
     var newSlideCount = calculateSlides(); 
     if (newSlideCount != slideCount) { 
      slideCount = newSlideCount; 
      mySlider.reloadSlider({ 
       minSlides: newSlideCount, 
       maxSlides: newSlideCount 
      }); 
     } 
    }); 

}); 

我還添加了一些小的優化，使瀏覽器不會在每個窗口大小調整重建整個滑蓋組件（通過拖動邊緣調整窗口時，每秒觸發多次），但僅限於幻燈片的實際數量發生變化的時刻。

希望這會有所幫助。