通过刚刚单击的图像初始化Slick Slider

Question

我需要一个功能来完成我的滑块图像。我使用Slick.js构建了我的滑块，并在用户点击静态图像时启动的模式中显示了一些HTML和CSS。好吧，我需要滑块中显示的第一张幻灯片是用户刚刚点击的那个。我认为这是世界滑块中一个非常常见的特征。但是经过大量的搜索，我还没有找到做这件事的方法。我这么问是因为可能有人以前用过Slick，他也遇到过同样的情况。我想我必须使用的设置是initialSlide，但不知道如何在初始化滑块的同时存储图像的引用。我知道这是一个棘手的问题，但我只是想以防万一。感谢您在高级

这就是我初始化滑块的方式

<script>
  $(document).ready(function(){
    $('.slider-gallery').slick({
      lazyLoad: 'ondemand',
      slidesToShow: 1,
      slidesToScroll: 1
    });
    $(".slick-prev").hide();
    $(".slick-next").hide();
  });
  $('#prev').click(function(){
    $(".slider-gallery").slick('slickNext');
  });
  $('#next').click(function(){
    $(".slider-gallery").slick('slickPrev');
  });
</script>

这是静态图库图像的html

<div class="large-6 medium-6 small-12 columns">
<div class="main-img"><a href="#openGallery">
<img src="assets/images/2.png" alt=""></a>
</div>
<div class="thumbnails">
  <img class="large-4 medium-4 small-4 columns" src="assets/images/1.png" alt="">
  <img class="large-4 medium-4 small-4 columns" src="assets/images/2.png" alt="">
  <div class="thumbnail-hover"><a href="#openGallery">
    <div class="hover-gallery">23fotos</div>
    <img class="large-4 medium-4 small-4 columns" src="assets/images/3.png" alt=""></a>
  </div>
</div>

这是滑块的html

<div id="openGallery" class="item-gallery">
  <div class="row">
    <a href="#close" title="Close" class="close-gallery">X</a>
    <div class="large-1 medium-1 columns">
      <button class="button-slider-gallery previous-button fa fa-chevron-left" id="prev" value="prev"></button>
    </div>
    <div class="large-10 medium-10 columns">
      <div class="slider-gallery">
        <div class="image">
          <img id="image-slider" class="width-images" data-lazy="assets/images/1.png">
        </div>
        <div class="image">
          <img id="image-slider" class="width-images" data-lazy="assets/images/2.png">
        </div>
        <div class="image">
          <img id="image-slider" class="width-images" data-lazy="assets/images/3.png">
        </div>
      </div>
    </div>
    <div class="large-1 medium-1 columns">
      <button class="button-slider-gallery next-button fa fa-chevron-right" id="next" value="next"></button>
    </div>
  </div>
</div>

Answer 1

一种方法是使用每个点击图像附带的slickGoTo（）函数。

<img class="small-4 columns" src="assets/images/1.png" alt="" onclick="$('.slider-gallery').slickGoTo(0)">
<img class="small-4 columns" src="assets/images/2.png" alt="" onclick="$('.slider-gallery').slickGoTo(1)">

注：

1. 第一张幻灯片是0，第二张是1，所以
2. 你正在使用的基金会，这是真棒。你不需要像使用小型4时那样添加中型4和大型4。基础规则是"小"=小而大

如果这不起作用，请尝试安装以下语法：

onclick="$('.slider-gallery').slick('slickGoTo', 0);"

这取决于你使用的光滑版本。