javascript - 根据窗口大小在 jQuery slider 上调用新参数

Question

我正在使用 bxslider.js 在我的页面上制作一个 slider 。由于我的网站是响应式的，我的代码允许根据窗口的大小为 slider 设置不同的参数。例如，当窗口超过 768px 时， slider 显示 2 张幻灯片。当它低于 768 时，它显示 1 张幻灯片，当它低于 480 时， slider 功能完全停止。这一切都很好。但是它只适用于负载。我希望它也适用于调整大小。我玩过 window.resize 函数，但我没有足够的编程背景来真正了解我在做什么或执行此操作的最佳方法是什么。谁能告诉我如何让它在加载和调整大小时都能正常工作？

var sliderWidth = $('#testimonialSlider').width();

if ($(window).width() > 768) {

  doubleslider = $('#testimonialSlider').bxSlider({
    minSlides: 2,
    maxSlides: 2,
    slideWidth: sliderWidth / 2,
    auto: false,
    moveSlides:2,
    autoHover:true,
    pager:true
  });     

} else if ($(window).width() < 480) {   
    singleslider.destroySlider();

} else{
  singleslider = $('#testimonialSlider').bxSlider({
    minSlides: 1,
    maxSlides: 1,
    slideWidth: sliderWidth,
    auto: false,
    moveSlides:1,
    autoHover:true,
    pager:true
  });
}

Answer 1

您不仅需要在 window.load 函数中包含您的代码，还需要在 window.resize() 函数中包含您的代码。

这里检查this solution

我试图通过使用 setTimeout 函数来消除重复的 window.resize 调用。此外，即使在 destroySlider 之后，包含 slider 对象的变量也不会设置为 null。因此也添加了代码来检查 slider 对象的可用性。您可以按原样使用代码或进一步微调它以满足您的要求。

  var sliderWidth,slider,id;

  $(window).resize(function() {
     clearTimeout(id);
     id = setTimeout(sliderResize, 1000);  //settimeout to invoke resize just once
  });

  $(window).load(function() {
    sliderResize();    //Same function invoked during window.load and resize
  });

 function sliderResize(){
   sliderWidth = $('.bxslider').width();

   if ($(window).width() > 768) {
      /* check if slider object is set, else multiple sliders are created*/
      if(slider == null || slider == undefined){    
         slider = $('.bxslider').bxSlider({
         minSlides: 2,
         maxSlides: 2,
         slideWidth: sliderWidth / 2,
         auto: false,
         moveSlides:2,
         autoHover:true,
         pager:true
         });
      }
      else{    //else just reload the existing slider with new parameters
         slider.reloadSlider({
         minSlides: 2,
         maxSlides: 2,
         slideWidth: sliderWidth / 2,
         auto: false,
         moveSlides:2,
         autoHover:true,
         pager:true
         });
       }

     } else if ($(window).width() < 480) {
         /* destroy the slider only if already created*/   
         if(slider != null || slider != undefined){
          slider.destroySlider(); 
         }
     } else{
       /* check if slider object is set, else multiple sliders are created*/
       if(slider == null || slider == undefined){
       slider = $('.bxslider').bxSlider({
         minSlides: 1,
         maxSlides: 1,
         slideWidth: sliderWidth,
         auto: false,
         moveSlides:1,
         autoHover:true,
         pager:true
       });
       } else{
         slider.reloadSlider({
         minSlides: 1,
         maxSlides: 1,
         slideWidth: sliderWidth,
         auto: false,
         moveSlides:1,
         autoHover:true,
         pager:true
         });
       } 
     }
    }