javascript - 当一页上有多个轮播时，如何为每个光滑 slider 创建自定义导航？

Question

我的页面有两个轮播。我正在使用光滑的 slider 插件，我需要创建分别针对每个轮播的自定义导航。

我正在努力弄清楚我该如何做到这一点。目前，如果您单击任何轮播的导航，它会更改所有轮播中的幻灯片。

如有任何帮助，我们将不胜感激。

这是演示 - http://jsfiddle.net/81t4pkfa/154/

JS

$('.test').each(function (idx, item) {
    var carouselId = "carousel" + idx;
    this.id = carouselId;

    $(this).slick({
        slide: "#" + carouselId +" .option",
        arrows: false
    });

    $(".tabs li a").click(function(){
       var slideIndex = $(this).parent().index();
       $('.test').slick('slickGoTo', parseInt(slideIndex));
    });
});

Answer 1

解决方案在这里 http://jsfiddle.net/81t4pkfa/153/

$('.test').each(function (idx, item) {
    var carouselId = "carousel" + idx;
    this.id = carouselId;
    $(this).slick({
        slide: "#" + carouselId +" .option",
        arrows: false
    });
});
    $(".tabs li a").click(function(){
      var slideIndex = $(this).parent().index();
     $(this).parent().parent().parent().slick('slickGoTo', parseInt(slideIndex));
    });
//});

.effect {
    margin: 5px 0;
    height: 70px;
    width: 320px;
    text-align: center;
}
.option {
    border: 1px solid grey;
    height: 50px;
    width: 150px;
    background: #eee;
}
.prev_next a { display: inline-block; width:80px; text-align:center; margin: 2px; border: 0; padding: 4px; background-color: #666; color: #fff; }

<link href="https://rawgit.com/kenwheeler/slick/master/slick/slick.css" rel="stylesheet"/>
<div class="test">
    <div class="prev_next"></div>
    <div class="option">
        <p>Test 1</p>
    </div>
    <div class="option">
        <p>Test 1 -</p>
    </div>
    <ul class="tabs">
      <li class="tab slide-0">
        <a href="#">Regular</a>
      </li>
      <li class="tab slide-1">
        <a href="#">Athletic</a>
      </li>
    </ul>
</div>
<div class="test">
    <div class="prev_next"></div>
    <div class="option">
        <p>Test 2</p>
    </div>
    <div class="option">
        <p>Test 2 -</p>
    </div>
    <ul class="tabs">
      <li class="tab slide-0">
        <a href="#">Regular</a>
      </li>
      <li class="tab slide-1">
        <a href="#">Athletic</a>
      </li>
    </ul>
</div>
<div class="test">
    <div class="prev_next"></div>
    <div class="option">
        <p>Test 3</p>
    </div>
    <div class="option">
        <p>Test 3 -</p>
    </div>
    <ul class="tabs">
      <li class="tab slide-0">
        <a href="#">Regular</a>
      </li>
      <li class="tab slide-1">
        <a href="#">Athletic</a>
      </li>
    </ul>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://rawgit.com/kenwheeler/slick/master/slick/slick.min.js"></script>

由于您的目标是 .test，因此所有具有 test 类的元素都获得了 slick 方法。我使用 parent() 将其更改为 DOM 遍历