モーダルウィンドウ内にslickを使ってスライドショーを実装したい

Question

＜実現したいこと＞

モーダルウィンドウ内でslickを使ってスライドショーを実装したいです。
具体的には、
・画像をクリックしたら同じ画像がモーダルウィンドウ内でスライド画像の最初として出てくる
・モーダルウィンドウ内では左右の矢印をクリックして画像のスライドをさせる

＜現状できていること＞

・モーダルウィンドウの実装
・左右矢印をクリックしたら画像がスライドする

＜発生している問題＞

「画像をクリックしたら同じ画像がモーダルウィンドウ内でスライド画像の最初として出てくる」
の実装がうまくいかない状態です。
現状のコードだと、let slideNum = $(this).data('slide');でslideNumに値が入るところまではできているのですが、その後の$('[data-slide="' + slideNum + '"]').click(function() {・・・}が処理されず、スライダーが機能されていない状況です。

＜試したこと＞

slickのオプション設定でinitialSlideを使うと最初に出てくるスライドを制御できることが分かり、直接initialSlideの値を設定すると実現できました。
この値をslideNumという変数によってクリックした画像が最初に出てくるようにしたいが上手くいかず。。
各画像にdata-slideというカスタムデータ属性を設定して、その値によってslideNumの値を入れ替えて実装できればとやってみたが上手くいかず。。

<div class="works-area">
  <ul class="gallery">
    <li><img src="img/works_1.jpg" alt="" class="modal-open" data-slide="1"></li>
    <li><img src="img/works_2.jpg" alt="" class="modal-open" data-slide="2"></li>
    <li><img src="img/works_3.jpg" alt="" class="modal-open" data-slide="3"></li>
    <li><img src="img/works_4.jpg" alt="" class="modal-open" data-slide="4"></li>
  </ul>
</div>

<!-- モーダルウィンドウ -->
<div class="modal-container">
  <div class="modal-body">
    <!-- 閉じるボタン -->
    <div class="modal-close">×</div>
    <!-- モーダル内のコンテンツ -->
    <div class="modal-content">
      <ul class="slider">
        <li>
          <a href="" target="_blank"><img src="img/works_1.jpg" alt=""></a>
          <div class="modal-content-text">
            <h3><a href="#">タイトル</a></h3>
            <p>ダミーテキスト</p>
          </div>
        </li>
        <li>
          <a href="" target="_blank"><img src="img/works_2.jpg" alt=""></a>
          <div class="modal-content-text">
            <h3><a href="" target="_blank">タイトル</a></h3>
            <p>ダミーテキスト</p>
          </div>
        </li>
        <li>
          <a href="" target="_blank"><img src="img/works_3.jpg" alt=""></a>
          <div class="modal-content-text">
            <h3><a href="" target="_blank">タイトル</a></h3>
            <p>ダミーテキスト</p>
          </div>
        </li>
        <li>
          <a href="" target="_blank"><img src="img/works_4.jpg" alt=""></a>
          <div class="modal-content-text">
            <h3><a href="" target="_blank">タイトル</a></h3>
            <p>ダミーテキスト</p>
          </div>
      </ul>
    </div>
  </div>
</div>

$('.gallery img').click(function() {
  let slideNum = $(this).data('slide');

  $('[data-slide="' + slideNum + '"]').click(function() {
    $('.slider').slick({
      fade: true,
      speed: 1000,
      infinite: true,
      slidesToShow: 1,
      slidesToScroll: 1,
      arrows: true,
      prevArrow: '<div class="slick-prev"><span></span></div>',
      nextArrow: '<div class="slick-next"><span></span></div>',
      dots: false,
      initialSlide: slideNum - 1,
    });
  });
});

Answer 1

initialSlide: slideNum - 1,とすればいいかと思います。

Comments

[kzy27]

ご回答ありがとうございます。
自分の書き方が悪くすみません。
initialSlide: slideNum - 1,のインデックスのズレは単なる表記ミスでした。。
問題となっているのがjQueryのところでして、現状のコードだと、let slideNum = $(this).data('slide');でslideNumに値が入るところまではできているのですが、その後の$('[data-slide="' + slideNum + '"]').click(function() {・・・}が処理されず、スライダーが機能されていない状況です。
こちらのコードの書き方や構造も含めてアドバイスございましたらいただけると幸いです。

[Lhankor_Mhy]

ご提示のコードで動作しているようでしたが。