在窗口大小調整的bx滑塊中更改圖像編號

Question

我正在使用bx滑塊，但問題是當我調整窗口大小時，滑塊中的圖像應根據窗口大小而變化。

I have tried the below code and it works but every time I have to reload the page, can anybody help me please. And thanks in advance.

<script type="text/javascript">
   if ($(window).width() < 480 ) {  
       $(document).ready(function(){
       $('#slider1').bxSlider({
    slideWidth: 280,
    minSlides: 2,
    maxSlides: 2,
    startSlide: 0,
    slideMargin: 10
      });
        });
   }

   else if ($(window).width() > 480 ) {

$(document).ready(function(){
$('#slider1').bxSlider({
   slideWidth: 280,
   minSlides: 4,
   maxSlides: 4,
   startSlide: 0,
   slideMargin: 10
  });
});
    }
else {
$(document).ready(function(){
  $('#slider1').bxSlider({
  slideWidth: 280,
  minSlides: 4,
  maxSlides: 4,
  startSlide: 0,
  slideMargin: 10
 });
});
}           
</script>

Answer 1

首先，將滑塊放入var中（最好稍后再使用“ reloadSlider”），然后通過為設置創建var-s來簡化生活（因為您至少需要兩次）。

最后，您需要一個$（window）.resize函數。

看看它是否有效（我沒有測試它，但是應該成功了，因為我剛剛完成了我的工作-顯示起來有點復雜）。

嘗試一下（順便說一下，我看到“中”和“大”尺寸具有相同的設置...）：

<script type="text/javascript">
   var slider;

   var defsOne   = { slideWidth: 280, minSlides: 2, maxSlides: 2, startSlide: 0, slideMargin: 10 }
   var defsTwo   = { slideWidth: 280, minSlides: 4, maxSlides: 4, startSlide: 0, slideMargin: 10 }
   var defsThree = { slideWidth: 280, minSlides: 4, maxSlides: 4, startSlide: 0, slideMargin: 10 }
   var myDefs = {};

   $(document).ready(function(){
       if ($(window).width() < 480 ) {  
           myDefs = defsOne;
       }

       else if ($(window).width() > 480 ) {
           myDefs = defsTwo;
       }
       else {
           myDefs = defsThree;
       }
       slider = $('#slider1').bxSlider(myDefs);
   });


   $( window ).resize(function() {
       var ww = $(window).width();
       if ($(window).width() < 480 ) {  
           myDefs = defsOne;
       }

       else if ($(window).width() > 480 ) {
           myDefs = defsTwo;
       }
       else {
           myDefs = defsThree;
       }

       slider.reloadSlider( myDefs );

   });

</script>

實際上，我不會在每次調整大小時（在每個窗口像素改變時）都使用slider.reloadSlider（），在某處放置一個標志來檢查大小是否與以前使用的實際改變了，然后才進行重新加載：

if ( sizeReallyChanged ) {
    slider.reloadSlider( myDefs );
}

如果不這樣做，您將要重新加載它很多次...

其中一些額外的幫助可能是為“全局設置”設置對象-因為您的對象幾乎都相同，然后：

var defsGlobal = { slideWidth: 280, startSlide: 0, slideMargin: 10 }
var defsOne    = { minSlides: 2, maxSlides: 2 }
var defsTwo    = { minSlides: 4, maxSlides: 4 }

最后“連接”所有它們（在正確的位置，即“ if”）：

...
   wholeDefs = $.extend( {} , defsOne, defsGlobal);
...
   slider = $('#slider1').bxSlider(wholeDefs);
...

希望這會有所幫助，再見