javascript - クリックした画像で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>