skrollr 冲突 bx 滑块自定义寻呼机？

Question

这是我第一次在这里提问，我是个菜鸟，所以如果我搞砸了，请不要生我的气。

问题是，我正在做一个基于 skrollr 的单页网页：https://github.com/Prinzhorn/skrollr

我使用了这个名为 BX Slider 的奇妙滑块：http://bxslider.com/

我已经放了我需要的三个滑块中的两个（效果很好）。当我尝试使用 BX 滑块为我提供的 HTML 代码在第三个滑块中制作自定义寻呼机时出现问题：

<ul class="bxslider">
  <li><img src="/images/730_200/tree_root.jpg" /></li>
  <li><img src="/images/730_200/houses.jpg" /></li>
  <li><img src="/images/730_200/hill_fence.jpg" /></li>
</ul>

<div id="bx-pager">
  <a data-slide-index="0" href=""><img src="/images/thumbs/tree_root.jpg" /></a>
  <a data-slide-index="1" href=""><img src="/images/thumbs/houses.jpg" /></a>
  <a data-slide-index="2" href=""><img src="/images/thumbs/hill_fence.jpg" /></a>
</div>

问题是，当我单击其中一个寻呼机项目时，它会将我重定向到 index.html，不允许我与实际的滑块进行交互。

您可能知道，Skrollr 库使用 HTML5 data- 属性来定义多组样式（它们称每个样式为关键帧）并在它们之间插入 skrollr。在 skrollr 基本示例中...

<div data-0="background-color:rgb(0,0,255);" data-500="background-color:rgb(255,0,0);">
WOOOT
</div>

所以我的猜测是......可能它们与两个代码中的 data- 属性冲突吗？如果是这样，当代码在默认的 bx-slider 寻呼机中时，为什么不打扰我？？

我该如何解决这个问题？有什么想法吗？

感谢您的帮助！！ :)

Answer 1

HTML 只需要：

<ul class="bxslider">
  <li><img src="/images/pic1.jpg" /></li>
  <li><img src="/images/pic2.jpg" /></li>
  <li><img src="/images/pic3.jpg" /></li>
  <li><img src="/images/pic4.jpg" /></li>
</ul>

你应该初始化结构，调用 .bxslider() on

$(document).ready(function(){
  $('.bxslider').bxSlider();
});

然后，您可以尝试更改 css 样式以改善外观：

.bx-pager-link{
    width: 30px;
    height: 30px;
    background-image: url('/images/pic1.jpg');
    background-position: center center;
    background-repeat: no-repeat;
    background-color: transparent;
    background-size: 100%;
    border-radius: 0;
}