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

注意：

第一张幻灯片是0，第二张是1，所以......
你正在使用很棒的基金会。你不需要像小4一样添加medium-4和large-4。基金会规则是“小”=小而大。

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

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

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

通过刚刚点击

1 个答案: