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

.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，为了更清晰的想法

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

有什么建议吗？

谢谢！

Answer 1

您应该使用slickGoTo方法。使用dataArray.indexOf()

获取幻灯片的索引

我更新了你的js小提琴：https://jsfiddle.net/cyrz161r/8/

根据单击的按钮更改滑块图像

1 个答案: