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);
...

希望这可以提供帮助，再见

在窗口调整大小时更改bx滑块中的图像数量

1 个答案: