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

这是我第一次在这里问问题，我是个笨蛋，所以如果我搞砸了，不要生我的气

问题是，我在一个基于skrollr的单页网页上：

我使用了一个叫做BX滑块的神奇滑块：

我已经把我需要的三个滑块中的两个放进去了（那些效果很好）。当我尝试使用BX slider提供的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>

所以我猜是。。。这两种代码中的数据属性是否存在冲突？？如果是这样的话，当代码在默认的bx滑块寻呼机中时，为什么这不困扰我呢

我怎样才能解决这个问题？有什么想法吗

谢谢你的帮助！！：）

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>

然后，您可以尝试更改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;
}

---

谢谢你的回答，dgomez，我的网站上已经有这样的功能了，问题是当我想使用带有缩略图的自定义寻呼机时，我需要使用代码的第二部分，但由于某种原因它不起作用。我认为这个问题与我在网站上使用的另一个jquery存在冲突。

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

.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;
}