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

Question

我正在使用 bxslider.js 在我的页面上制作一个滑块。由于我的网站是响应式的，因此我的代码允许根据 window 的大小为滑块设置不同的参数。例如，当 window 超过 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

函数滑块(){ 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();
});

Answer 2

您不仅需要在 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
         });
       } 
     }
    }

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

Call new parameters on a jQuery slider depending on window size

javascript

jquery

bxslider