Question

使用pagerCustom时，

BX-Slider活动类无法正常工作。寻呼机也是具有红色边框的活动类的滑块。知道怎么解决吗？

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>
  <li><img src="http://bxslider.com/images/730_200/tree_root.jpg" /></li>
  <li><img src="http://bxslider.com/images/730_200/hill_fence.jpg" /></li>
  <li><img src="http://bxslider.com/images/730_200/trees.jpg" /></li>
</ul>
<div id="bx-pager">
  <a data-slide-index="0" href=""><img src="http://bxslider.com/images/730_200/hill_trees.jpg" width="100" /></a>
  <a data-slide-index="1" href=""><img src="http://bxslider.com/images/730_200/me_trees.jpg" width="100" /></a>
  <a data-slide-index="2" href=""><img src="http://bxslider.com/images/730_200/houses.jpg" width="100" /></a>
  <a data-slide-index="3" href=""><img src="http://bxslider.com/images/730_200/tree_root.jpg" width="100" /></a>
  <a data-slide-index="4" href=""><img src="http://bxslider.com/images/730_200/hill_fence.jpg" width="100" /></a>
  <a data-slide-index="5" href=""><img src="http://bxslider.com/images/730_200/trees.jpg" width="100" /></a>
</div>

Jquery的：

$('.bxslider').bxSlider({
  pagerCustom: '#bx-pager'
});

$('#bx-pager').bxSlider({
  mode: 'horizontal',
  pager: false
});

https://jsfiddle.net/w259nfeu/

Answer 1

顶部滑块没有控制，它的移动被绑定到第二个滑块/寻呼机。第二个滑块看起来很奇怪，只有一个滑块，所以我做了一个旋转木马，每次有3个滑块移动一个。轮换是：

箭头上的每次点击都会使两个滑块向同一方向前进。
在一个方向上每6次点击将使顶部滑块返回到与第二个滑块的中间滑块相同的滑块。
单击第二个滑块的一个滑块将使第一个滑块跳转到相应的幻灯片。

由于某种原因，堆栈代码存在DNS问题，因此请查看

演示：http://plnkr.co/edit/IytWudzqeXyYMzwIQnbA?p=preview

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>SO35203571</title>
  <link rel="stylesheet" href="http://cdn.jsdelivr.net/bxslider/4.2.5/jquery.bxslider.css" />
  <style>
    #bx-pager {
      left: 25px;
    }
    .bx-wrapper a.active {
      border: 2px solid red;
    }
    .bx-controls-direction a {
      top: -100% !important;
    }
  }
  </style>
</head>

<body>
  <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>
    <li>
      <img src="http://bxslider.com/images/730_200/tree_root.jpg" />
    </li>
    <li>
      <img src="http://bxslider.com/images/730_200/hill_fence.jpg" />
    </li>
    <li>
      <img src="http://bxslider.com/images/730_200/trees.jpg" />
    </li>
  </ul>
  <div id="bx-pager">
    <a data-slide-index="0" href="">
      <img src="http://bxslider.com/images/730_200/hill_trees.jpg" width="100" />
    </a>
    <a data-slide-index="1" href="">
      <img src="http://bxslider.com/images/730_200/me_trees.jpg" width="100" />
    </a>
    <a data-slide-index="2" href="">
      <img src="http://bxslider.com/images/730_200/houses.jpg" width="100" />
    </a>
    <a data-slide-index="3" href="">
      <img src="http://bxslider.com/images/730_200/tree_root.jpg" width="100" />
    </a>
    <a data-slide-index="4" href="">
      <img src="http://bxslider.com/images/730_200/hill_fence.jpg" width="100" />
    </a>
    <a data-slide-index="5" href="">
      <img src="http://bxslider.com/images/730_200/trees.jpg" width="100" />
    </a>
  </div>
  <script src="http://cdn.jsdelivr.net/jquery/2.2.0/jquery.min.js"></script>
  <script src="http://cdn.jsdelivr.net/bxslider/4.2.5/jquery.bxslider.min.js"></script>
  <script>
    $(function() {

      var bx = $('.bxslider').bxSlider({
        pagerCustom: '#bx-pager',
        controls: false
      });

      var cx = $('#bx-pager').bxSlider({
        mode: 'horizontal',
        maxSlides: 3,
        minSlides: 3,
        moveSlides: 1,
        slideWidth: 275,
        slideMargin: 40,
        pager: false,
        onSlideBefore: bxMove
      });

      function bxMove($ele, from, to) {
        var idx = parseInt(to, 10) - 1;
        bx.goToSlide(idx);
      }

    });
  </script>
</body>

</html>

与pagerCustom一起使用时，BX-Slider活动类不起作用，它也是滑块

1 个答案: