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

【问题标题】：Initialize Slick Slider by the image just clicked通过刚刚单击的图像初始化 Slick Slider
【发布时间】：2015-07-02 14:33:17
【问题描述】：

我需要一个功能来完成我的滑块图像。我使用 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>

【问题讨论】：

请将您的代码作为工作示例发布在小提琴中。在那里帮助你会更容易！
我会这样做，但我尝试了几次尝试来使小提琴工作，但我不明白。并且代码依赖于外部库。老实说，我不确定如何处理它。因为我依赖光滑。但我会尝试

标签： javascript jquery html slick.js

【解决方案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)">

注意事项：

第一张幻灯片是 0，第二张是 1，依此类推...
您使用的 Foundation 非常棒。您不需要像使用 small-4 时那样添加 medium-4 和 large-4。 Foundation 规则是“小”= 小而大。

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

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

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

【讨论】：