禁用单击bxslider寻呼机

Question

我想在不触及核心bxlslider文件的情况下禁用bxslider寻呼机上的click事件。

可能吗.. ？请指导我正确的方向。
提前谢谢。

Answer 1

简单来说，我可以使用CSS来禁用点击，使用pointer-events: none，如：

.bx-pager {
  pointer-events: none;
}

<强>段

$(function() {
  $("#bxslider").bxSlider({
    maxSlides: 1,
    slideWidth: 200
  });
});

* {
  margin: 0;
  padding: 0;
  list-style: none;
}
.bx-pager {
  pointer-events: none;
}

<script src="https://code.jquery.com/jquery-2.2.4.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.5/jquery.bxslider.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.5/vendor/jquery.easing.1.3.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.5/vendor/jquery.fitvids.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.5/jquery.bxslider.min.js"></script>
<ul id="bxslider">
  <li><img src="http://placehold.it/200?text=Slide+1" alt=""></li>
  <li><img src="http://placehold.it/200?text=Slide+2" alt=""></li>
  <li><img src="http://placehold.it/200?text=Slide+3" alt=""></li>
  <li><img src="http://placehold.it/200?text=Slide+4" alt=""></li>
  <li><img src="http://placehold.it/200?text=Slide+5" alt=""></li>
</ul>

Answer 2

根据我的理解，您只想使用项目符号来表示当前幻灯片。这不是bxslider的寻呼机子弹的目的。我建议采用这种方法：

1. 禁用bxslider的寻呼机子弹
2. 添加包含n个ul元素的自定义li元素，其中n是幻灯片的数量。您可以使用javascript动态生成li元素。
3. 根据您的设计要求，使用css将所有li元素设为空心圆。
4. 现在，使用bxslider的onSlideAfter回调，添加一个类，例如将“有效”类添加到相应的li元素，同时将其从所有同级li元素中删除。使用css突出显示此“有效”li项。

如果您发现此方法有用，我可以发布代码。