slider - 如果 bxslider 只有 1 张幻灯片，则隐藏寻呼机

Question

如果滑块只有一张幻灯片显示，而实际上没有滑动，我正在尝试向寻呼机添加一个“禁用”类。

我正在滑动一个 div，而不是一个列表。

这只是一个基本的div：

<div class="bxslider2">
    <div class="wrap">
        ...
    </div>
</div>

这是滑块的jQuery：

 $('.bxslider2').bxSlider({
   mode: 'horizontal',
   speed: '180',
   pagerType:'full',
   pager:'true',
   captions: false
 });

如果只有一张幻灯片显示，我不想显示寻呼机。

谢谢你的帮助！

贾斯汀

Answer 1

我遇到了同样的麻烦，这是我的解决方案：我们应该计算 .bxslider2 块下有多少子元素

$(".bxslider2>.wrap").length

如果只有一个，则将选项设置为“假”，否则设置为“真”。

$('.bxslider2').bxSlider({
   mode: 'horizontal',
   speed: '180',
   pagerType:'full',
   pager: ($(".bxslider2>.wrap").length > 1) ? true: false,
   captions: false
 });

希望它会有所帮助。

Answer 2

我使用 css 来实现这一点。

.bx-pager-item:first-of-type:last-of-type { 
    display: none
}

Answer 3

如果页面上有多个 bxslider，这是一个解决方案。

    $('.bxslider').each(function() {
      var options = {
        mode: 'fade',
      };
      if ($(this).find('li').length === 1) {
        options.pager = false;
      }
      $(this).bxSlider(options);
    });

遍历每个滑块并查找它是否只有一个 li。如果是这样，添加pager: false到传递给的对象bxSlider。

Answer 4

解决这个问题的一个好方法是像这样重新加载对象并更改每个项目数量的控件：

    var slideQty = $('.bxslider').bxSlider({
        minSlides: 1,
        maxSlides: 3,
        slideWidth: 110,
        slideMargin: 0,
        adaptiveHeight: true,
        pager: false,
        moveSlides: 1,
        onSlideAfter: function ($slideElement, oldIndex, newIndex) { NextSlide(oldIndex, newIndex); }

    });



    var count = slideQty.getSlideCount();
    if (count < 7) {
        slideQty.reloadSlider({
            controls : false,
            minSlides: 1,
            maxSlides: 3,
            slideWidth: 110,
            slideMargin: 0,
            adaptiveHeight: true,
            pager: false,
            moveSlides: 1,
            onSlideAfter: function ($slideElement, oldIndex, newIndex) { NextSlide(oldIndex, newIndex); }
        });
    }

    return false;

Answer 5

试试这个它对我有用！

var slider = $('#slider').bxSlider();

$('.bx-next, .bx-prev, .bx-pager a').click(function(){
     // time to wait (in ms)
     var wait = 1000;
     setTimeout(function(){
     slider.startAuto();
  }, wait);
});