当一个页面上有多个传送带时，如何为每个滑动滑块创建自定义导航？

Question

我有一个有两个轮播的页面。我使用的滑动滑块插件，我需要创建自定义导航，分别针对每个旋转木马。

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

任何帮助，将不胜感激。

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

既然您定位。测试因此所有与测试类的元素是越来越光滑方法。我把它改为DOM穿越使用亲（）

Answer 2

你可以做类似下面

$('.each-div').slick({ 
    infinite: true, 
    slidesToShow: 3, 
    slidesToScroll: 1, 
    prevArrow: "<span class='slick-prev pull-left carousel-btns'><i class='fa fa-angle-left fa-3x' aria-hidden='true'></i></span>", 
    nextArrow: "<span class='slick-next pull-right carousel-btns'><i class='fa fa-angle-right fa-3x' aria-hidden='true'></i></span>" 
});