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

Posted 2023-02-26

【中文标题】skrollr 冲突 bx 滑块自定义寻呼机？

【英文标题】：skrollr conflicts bx slider custom pager?

【发布时间】：2015-05-31 12:03:55

【问题描述】：

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

问题是，我正在做一个基于 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 寻呼机中时，为什么不打扰我？？

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

感谢您的帮助！！ :)

【参考方案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;

【讨论】：

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