Question

这是我第一次在这里问一个问题，我是个非常棒的人，所以如果我陷入困境，不要生我的气。

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

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

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

<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>

所以我的猜测是......它们是否与两个代码中的数据属性冲突？如果是这样，当代码在默认的bx-slider pager中时，为什么不打扰我？

我该如何解决这个问题？任何想法？

感谢您的帮助!! ：）

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（）

$(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;
}

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

1 个答案: