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

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

我正在努力弄清楚如何做到这一点。目前，如果您单击任何转盘上的导航，它将更改所有转盘内的幻灯片。

任何帮助，将不胜感激。

继承人的演示-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));
    });
});

最佳答案

在这里，您使用解决方案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遍历

关于javascript - 当一页上有多个轮播时，如何为每个滑动滑块创建自定义导航？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/45080825/