在窗口大小调整的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);
...

希望这会有所帮助，再见