クリックしたボタンに応じてスライダーイメージを変更する

Question

滑らかなスライダーを使用していくつかの画像を表示していますが、クリックされたボタンに応じて別の画像を表示する必要があります。

私の考えはdata-attrを通してやっていました。だから、私はアンカー（ボタンとして機能する）にdata-attrを追加し、そのボタンに属するスライドに同じdata-attrを追加しました。クリックすると、表示中のスライドをボタンに属するスライドに変更したいと思います。

私がこれまで行っていることは何も動作していないようです...滑らかなスライダを使用する必要があります。クライアントが現時点で使用しているものであり、変更することはできません。

HTML

<div class="sidebar col-xs-4"> 
    <a class="switch" href="#" data-attr="lion"> 
    <span class="text">The lion</span> 
    </a> 
    <a class="switch" href="#" data-attr="bear"> 
    <span class="text">The bear</span> 
    </a> 
    <a class="switch" href="#" data-attr="dog"> 
    <span class="text">The dog</span> 
    </a> 
    <a class="switch" href="#" data-attr="pigeon"> 
    <span class="text">The pigeon</span></a> 
</div> 
    <div class="mainBanner col-xs-8"> 
     <div class="slide" data-attr="lion"> 
     <img src="https://s29.postimg.org/uh5ln0yaf/lion.jpg" alt=""/> 
     <p class="text transpDark">The lion is the king of the animals</p> 
     </div> 
     <div class="slide" data-attr="bear"> 
     <img src="https://s27.postimg.org/qvo00fpvn/bear.jpg" alt=""/> 
     <p class="text transpDark">Bears sleep during the winter</p> 
     </div> 
     <div class="slide" data-attr="dog"> 
     <img src="https://s27.postimg.org/xw0gvt2hf/dog.jpg" alt=""/> 
     <p class="text transpDark">Dog is the most loyal friend you will ever have</p> 
     </div> 
     <div class="slide" data-attr="pigeon"> 
     <img src="https://s30.postimg.org/nd79rqnvl/pigeon.jpg" alt=""/> 
     <p class="text transpDark">Pigeons are flying rats</p> 
     </div> 
    </div> 

cssの明確なアイデア

https://jsfiddle.net/cyrz161r/1/

0用

.switch { 
    border: 1px solid green; 
    display: block; 
    padding:10px; 
    margin-bottom:10px; 
} 
.slide { 
    position: relative; 
} 
.text.transpDark { 
    position: absolute; 
    background-color: khaki; 
    color: black; 
    bottom:0; 
    left: 5px; 
} 

JS

$(".mainBanner").slick({ 
    arrows: false  
}); 
$('.sidebar').on('click', '.switch', function(e) { 
     e.preventDefault(); 
     var button = $(this).attr("data-attr"); 
     var slide = $(".mainBanner .slide"); 
     var dataArray = []; 
     $(slide).each(function() { 
     dataArray.push($(this).attr("data-attr")); 
     }); 
    if($.inArray(button, dataArray) > -1){ 
     $(".mainBanner .slide").removeClass("slick-cloned slick-current slick-active").attr({ 
      "data-slick-index": "-1", 
      "aria-hidden": "true" 
     }); 
     $(".mainBanner .slide[data-attr="+ button +"]").addClass("slick-current slick-active").attr({ 
      "data-slick-index": "1", 
      "aria-hidden": "false" 
     }); 
} 
}); 

そしてここjsfiddle、

提案がありますか？

ありがとうございました！

Answer 1

slickGoToメソッドを使用する必要があります。どうもありがとう、https://jsfiddle.net/cyrz161r/8/