Question

我正在使用bxslider.js在我的页面上制作一个滑块。由于我的网站是响应式的，我所拥有的代码允许滑块的不同参数，具体取决于窗口的大小。例如，当窗口超过768px时，滑块显示2个幻灯片。当它低于768时，它显示1个幻灯片，当它低于480时，滑块功能完全停止。这一切都很好。但它只适用于负载。我希望它也能用于调整大小。我玩过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之后，包含滑块对象的变量也不会设置为null。因此添加了用于检查滑块对象可用性的代码。您可以按原样使用代码或进一步微调以满足您的要求。

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

Answer 2

function slider（）{ 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
});
};
};

$(window).load(function() {
slider();
});

$(document).resize(function() {
slider();
});

根据窗口大小在jQuery滑块上调用新参数

2 个答案: