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

我正在使用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>

我已经尝试了下面的代码，它可以工作，但是每次我必须重新加载页面时，有人能帮我吗。先谢谢你。
如果（$（窗口）.width（）<480）{
$（文档）.ready（函数（）{
$（'#slider1'）.bxSlider({
滑动宽度：280，
米斯利德斯：2，
maxSlides:2，
开始滑动：0，
幻灯片摘要：10
});
});
}
else if（$（窗口）.width（）>480）{
$（文档）.ready（函数（）{
$（'#slider1'）.bxSlider({
滑动宽度：280，
米斯利德斯：4，
maxSlides:4，
开始滑动：0，
幻灯片摘要：10
});
});
}
否则{
$（文档）.ready（函数（）{
$（'#slider1'）.bxSlider({
滑动宽度：280，
米斯利德斯：4，
maxSlides:4，
开始滑动：0，
幻灯片摘要：10
});
});
}           

首先将您的滑块放入一个var（更好地用于以后的“重新加载滑块”），然后通过为您的设置创建var-s（因为您将至少需要它们两次），使您的生活更轻松

最后，您需要一个$（window）.resize函数

看看它是否能工作（我没有测试它，但应该能工作，因为我刚刚完成了我的测试-显示它有点复杂）

试试这个（顺便说一句，我看到“中等”和“大”尺寸有相同的设置…）：

如果你不这样做，你将重新加载它吨的时间

一些额外的帮助可能是为“全局设置”设置一个对象，因为您的对象几乎都是相同的：

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

最后“连接”它们（当然是在正确的位置，即“如果”）：

希望这能有所帮助，

---

再见nIc（“#slider1”）.bxSlider（{slideWidth:280，minSlides:2，maxSlides:4，startslides:0，slideMargin:10}）；只有这样才行，没有必要把它放在每一个尺寸上。我已经试过了，但如果我在Ipad上看到的话，它会切断图像。。感谢@rrugbys Plz检查此链接并调整窗口大小图像将被剪切经过几个小时的搜索，找到此问题的好解决方案，找到您的答案终于结束了我的搜索。这真是太棒了。你太棒了！伟大的工作，所以干净，可见，易于遵循。祝贺你，非常感谢。

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 }

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