1

我在这里使用一种旋转木马（bxslider）http://bxslider.com/

如果我再次调用滑块，我会遇到问题。滑动图像的行为很奇怪。有时它向前移动有时向后移动。但是，如果仅在行为正常时调用它。下面是我的html和脚本。我还在这里提供了 jsfiddle

HTML

<ul class="bxslider">
  <li><img src="http://bxslider.com/images/730_200/hill_trees.jpg" /></li>
  <li><img src="http://bxslider.com/images/730_200/me_trees.jpg" /></li>
  <li><img src="http://bxslider.com/images/730_200/houses.jpg" /></li>
</ul>

脚本

var slider=$('.bxslider').bxSlider({
  auto: true
});
slider.destroySlider();
slider.startAuto();
4

2 回答 2

2

您可以像这样重新加载滑块：

slider.reloadSlider();

您还可以在重新加载时添加新选项。有关更多信息，请参阅文档。


就我而言，这并没有起到作用。我需要滑块根据屏幕宽度响应加载不同的选项。不是最干净或最优雅的解决方案，但这是我所做的：

var slider = { };
var sliderActive = false;
var sliderSize = " ";

$(window).resize(function(){
    if($(window).width() > 740 && sliderSize != 'large') {
        if(sliderActive === true) {
            slider.reloadSlider({
                minSlides: 2,
                maxSlides: 2,
                slideWidth: 570,
                slideMargin: 30,
                controls: true,
                pager: false,
                moveSlides: 1,
                auto: true,
                onSliderLoad: function(){
                    sliderSize = 'large';
                }
            });
        } else if(sliderActive === false) {
            slider = $(".bxslider").bxSlider({
                minSlides: 2,
                maxSlides: 2,
                slideWidth: 570,
                slideMargin: 30,
                controls: true,
                pager: false,
                moveSlides: 1,
                auto: true,
                onSliderLoad: function(){
                    sliderActive = true;
                    sliderSize = 'large';
                }
            });
        } 
    } else if($(window).width() <= 740 && sliderSize != 'small') {
        if(sliderActive === true) {
            slider.reloadSlider({
                controls: true,
                pager: false,
                auto: true,
                onSliderLoad: function(){
                    sliderSize = 'small';
                }
            });
        } else if(sliderActive === false) {
            sliderActive = true;
            slider = $('.bxslider').bxSlider({
                controls: true,
                pager: false,
                auto: true,
                onSliderLoad: function(){
                    sliderActive = true;
                    sliderSize = 'small';
                }
            });
        }
    }
});

// Call window resize to fire the function on document ready
$(window).resize();

断点是 740px。代码非常臃肿，因为您需要为 reloadSlider() 和 bxSlider() 包含两次选项。我不知道该怎么做。

于 2014-07-23T16:00:03.303 回答
0

我有同样的问题并以这种方式修复它。基本上，它检查滑块的父级是否具有 bx-viewport 类，以确保在销毁之前加载 bxslider。

HTML 

<ul class="bxslider">
  <li><img src="http://bxslider.com/images/730_200/hill_trees.jpg" /></li>
  <li><img src="http://bxslider.com/images/730_200/me_trees.jpg" /></li>
  <li><img src="http://bxslider.com/images/730_200/houses.jpg" /></li>
</ul>

JS

var slider=$('.bxslider').bxSlider({
  auto: true
});
if (slider.parent().hasClass('bx-viewport')){
    slider.destroySlider();
    slider.startAuto();
}
于 2018-04-27T10:16:02.257 回答