當一個頁面上有多個傳送帶時，如何爲每個滑動滑塊創建自定義導航？

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>" 
});