Question

我尝试使用reloadSlider()使滑块动态更改幻灯片数量（maxslide / minslide）。但它复制了包装器。

有趣的是，它并不总是重复，有时显示正确（我的意思是重新加载浏览器页面后）。

以下是我的不良界限：

(function($) {
$(document).ready(function(){

  // init product slider
  if($('.slider-product-wrap').length>0){
  var slider_product=$('.slider-product-wrap .slider').bxSlider();      

  // product slider sets
  function sliderProduct(){

    var slideAmount=3;   

    // slide amount depends on window's width
    if($(window).width()<1000 && $(window).width()>=500) slideAmount=2;
    else if($(window).width()<500) slideAmount=1; 

    // set custom settings;
      slider_product.reloadSlider({
        minSlides: slideAmount,
        maxSlides: slideAmount,
        auto: false,
        slideWidth: 364,
        slideMargin: 28, 
        pause: 5000,
        nextText:'',
        prevText:'',
        autoHover: true,
        autoStart: true,
        pager: false,
        controls: true        
      });
  }

  sliderProduct(); // create new slider

  // reload slider to make it responsive
  $(window).resize(function(){ 
    sliderProduct(); 
  }); 
} 
}(jQuery));

我相信有一个聪明的解决方案，所以我等着你的帮助。

Answer 1

通常当您遇到间歇性行为时，可能会加载时间问题。在创建DOM元素时，例如div.bx-wrapper和div.bx-viewport bxSlider（以及大多数jQuery插件），需要更多时间。我喜欢使用回调或小超时，因为它给了我一个事件链中的占位符。这是我认为你想要的一个演示：bxSlider Reloads on Resize。

更改如下：

(function ($) {
    $(document).ready(function () {
        if ($('.bxWrap').length > 0) {
            var bxSlider = $('.bxWrap .bxSlider').bxSlider();
        }

        function bxInit() {
            var winSize = $(window).width(),
                sizeID;
            if (winSize < 1000 && winSize >= 500) {
                sizeID = 2;
            } else if (winSize < 500) {
                sizeID = 1;
            } else {
                sizeID = 3;
            }
            bxSlider.reloadSlider({
                minSlides: sizeID,
                maxSlides: sizeID,
                moveSlides: sizeID,
                auto: true,
                slideWidth: 364,
                slideMargin: 28,
                pause: 5000,
                nextText: '',
                prevText: '',
                autoHover: true,
                autoStart: true,
                autoDelay: 750,
                pager: false
            });
        }

        bxInit();

        $(window).resize(function () {
            bxSlider.stopAuto(true);
            bxInit();
        });
    });
}(jQuery));

我更改了名称，因为我更容易将对象与公共前缀相关联。我添加了autoDelay选项，它为bxSlider提供了重新加载的额外时间。在调整大小事件时，我在autoStop函数启动之前添加了bxInit()（这是您的sliderProduct()）。它第一次启动它时工作，我检查了额外的div并找不到。顺便说一下，我还添加了moveSlides选项，所以当它在3个幻灯片时它一次移动3个，2个移动2个，1个移动1.在水平旋转木马上，它运行得更顺畅幻灯片显示然后隐藏而不是显示2或3次然后隐藏。祝你好运。

bxSlider在reloadSlider（）

1 个答案: