slickのindex番号を取得することで、slickの中にモーダルウィンドウのボタンにより、全画面でモーダルを開けるようにしたい

Question

前提

slickを使用して、PC時は３個、SP時は１個スライドが並ぶようなスライダーを作成しました。

実現したいこと

slickで作成したスライド画像の一部に、モーダルウインドウが開くボタンを設置しており、クリックすると開くようにしています。
slickスライダーのインデックス番号と同じ番号のモーダルウィンドウを表示するようにしたいのですが、slickのメソッドである「slickCurrentSlide」を使用してインデックス番号を取得すると、スライドが３つ並んでいる時は、最初に表示されている３つすべてがインデックス番号「０」になってしまいます。４つめ以降のスライドには、０、１、２、３、４、０、１、２、３…と順番になっているのですが…
最初に表示される３つのスライドにも、０、０、０ではなく、０、１、２とインデックス番号をつけたいのですが、調べても思うような答えが得られませんでした。

モーダルウィンドウは全画面で表示されるようにしたいので、インデックス番号を使わずに兄弟要素取得などで実装しようかとも思ったのですが、スライダーの大きさやpositionの関係で、インデックス番号を使ってやるのがいいかと思いました。

slickCurrentSlideをしようして実装しようとしていますが、他にも方法があるならこだわりません。

該当のソースコード

<!--モーダルウィンドウ-->
<div class="mordal__wrap">
  <div>1つめ</div>
  <div>２つめ</div>
  <div>３つめ</div>
  <div>４つめ</div>
  <div>５つめ</div>
</div>

<!--スライダー-->
<div class="slider">
  <div class="slider__item">
    <img src="...">
    <div class="js-open">モーダルウインドウが開くボタン</div>
  </div>
  <div class="slider__item">
    <img src="...">
    <div class="js-open">モーダルウインドウが開くボタン</div>
  </div>
  <div class="slider__item">
    <img src="...">
    <div class="js-open">モーダルウインドウが開くボタン</div>
  </div>
  <div class="slider__item">
    <img src="...">
    <div class="js-open">モーダルウインドウが開くボタン</div>
  </div>
  <div class="slider__item">
    <img src="...">
    <div class="js-open">モーダルウインドウが開くボタン</div>
  </div>
</div>
                

$(function(){
    $('.slider').slick({
        arrows: false,
        dots: true,
        slidesToShow: 3,
        responsive: [
            {
              breakpoint: 1023,
              settings: {
                slidesToShow:1
              }
            }
        ]
    });
      $('.js-open').click(function(){
        var i = $('.member__slider').slick('slickCurrentSlide');
        $('.mordal__inner').eq(i).children('div').fadeIn();
      });
    $('.js-close').click(function () {
      $('div').fadeOut();
    });
});

試したこと

jqeuryで.index()を使ったり、
スライダーの中にモーダルウィンドウをいれたり、いろいろやってみましたが、できませんでした。

補足情報（FW/ツールのバージョンなど）

HTMLのソースコードは簡略化しています。

Answer 1

slick('slickCurrentSlide')は現在表示されているスライドのインデックス番号を取得しますが、複数のスライドが標示されているときは、左端のスライドのインデックス番号を取得します。表示されている2番目や3番目のスライドをクリックしても一番左のスライドのインデックス番号になります。ですので、これは使えません。

jQueryの`index()‘で何番目の要素か取得できますが、slick は要素を複製して並べ替えたりしますので、これも使えません。

HTMLの方でボタンにデータ属性でインデックスを持たせて、それを参照するのが一番確実だと思います。

<!--スライダー-->
<div class="slider">
  <div class="slider__item">
    <img src="https://placehold.jp/150x150.png?text=1">
    <div class="js-open" data-id="1">モーダルウインドウが開くボタン</div>
  </div>
  <div class="slider__item">
    <img src="https://placehold.jp/150x150.png?text=2">
    <div class="js-open" data-id="2">モーダルウインドウが開くボタン</div>
  </div>
  <div class="slider__item">
    <img src="https://placehold.jp/150x150.png?text=3">
    <div class="js-open" data-id="3">モーダルウインドウが開くボタン</div>
  </div>
  <div class="slider__item">
    <img src="https://placehold.jp/150x150.png?text=4">
    <div class="js-open" data-id="4">モーダルウインドウが開くボタン</div>
  </div>
  <div class="slider__item">
    <img src="https://placehold.jp/150x150.png?text=5">
    <div class="js-open" data-id="5">モーダルウインドウが開くボタン</div>
  </div>
</div>

      $('.js-open').click(function(){
        var i =  $(this).data("id");
        console.log(i); //確認用
        $('.mordal__inner').eq(i).children('div').fadeIn();
      });

Comments

[usaki]

先に回答してくださった方の方法で、解決できましたが、JavaScriptがスッキリしていてわかりやすいので、参考にさせていただきます！

データ属性でインデックス番号をつけたことがなかったので、勉強になりました。

本当にありがとうございます！

Answer 2

開くボタンにデータ属性でインデックス番号をあらかじめ振っておき、
そのインデックス番号と一致するi番目のdivをモーダルで表示するという手法はいかがでしょうか？

• 動作確認用サンプル：https://jsfiddle.net/fzckj3ne/

<!--モーダルウィンドウ-->
<div class="mordal__wrap">
  <div class="modal-item">1つめ<button class="js-close">x</button></div>
  <div class="modal-item">２つめ<button class="js-close">x</button></div>
  <div class="modal-item">３つめ<button class="js-close">x</button></div>
  <div class="modal-item">４つめ<button class="js-close">x</button></div>
  <div class="modal-item">５つめ<button class="js-close">x</button></div>
</div>

<!--スライダー-->
<div class="slider">
  <div class="slider__item">
    <img src="https://placehold.jp/150x150.png">
    <button class="js-open" data-slide-index="0">モーダルウインドウが開くボタン</button>
  </div>
  <div class="slider__item">
    <img src="https://placehold.jp/150x150.png">
    <button class="js-open" data-slide-index="1">モーダルウインドウが開くボタン</button>
  </div>
  <div class="slider__item">
    <img src="https://placehold.jp/150x150.png">
    <button class="js-open" data-slide-index="2">モーダルウインドウが開くボタン</button>
  </div>
  <div class="slider__item">
    <img src="https://placehold.jp/150x150.png">
    <button class="js-open" data-slide-index="3">モーダルウインドウが開くボタン</button>
  </div>
  <div class="slider__item">
    <img src="https://placehold.jp/150x150.png">
    <button class="js-open" data-slide-index="4">モーダルウインドウが開くボタン</button>
  </div>
</div>

$(function() {
  $('.slider').slick({
    arrows: false,
    dots: true,
    slidesToShow: 3,
    responsive: [{
      breakpoint: 1023,
      settings: {
        slidesToShow: 1
      }
    }]
  });
  
  // ページロード時、モーダル全て非表示にする
  // （一瞬ちらついて見えるのがお嫌でしたら、CSSであらかじめdisplay:noneにしておく）
  $('.modal-item').hide();
  
  // 開くボタンを押した時
  $('.js-open').click(function() {
  	// 押したボタンのデータ属性data-slide-indexの値（数字）を取得
    const index = $(this).data('slide-index');

    $('.modal-item').each(function(i) {
    	// 全ての.modal-itemを非表示にし
    	$(this).hide();
      
      // divのi番目とデータ属性の数字が一緒だったら
      if (i == index) {
      	$(this).fadeIn(); // そのdivをフェードインする
      }
    })
  });
  
  $('.js-close').click(function() {
    $('.modal-item').fadeOut();
  });
});

Comments

[usaki]

コードを参考にさせていただき、データ属性でインデックス番号をあらかじめ振ったら、できました！
この方法を知らなかったので、とても助かり、勉強になりました。

本当にありがとうございます！！