スライダー「slick」を適用すると、scriptで指定した「n番目」の取得ができない

Question

よろしくお願いいたします。

表題通りなのですが、複数のモーダルを利用したjsに、slickにてカルーセル表示にすると
モーダルjsの「n番目」の取得ができずに困っています。

以下にコードを記載します。

<!--コンテンツ要素-->
<div class="slider_style modal_trigger">
    <div class="modal_btn">１つ目の要素（画像）</div>
    <div class="modal_btn">２つ目の要素（画像）</div>
    <div class="modal_btn">３つ目の要素（画像）</div>
</div>
<!--モーダルウィンドウ部分（コンテンツの内容）-->
<div class="modal_area">
    <!--１つ目の要素の内容-->
    <div class="modal_box">
        <div class="modal_bg"></div>
        <div class="modal_inner">
            <div class="modal_block">
                １つ目の要素の内容
            </div>
            <div class="modal_close">×</div>
        </div>
    </div>
    <!--/１つ目の要素の内容-->
    <!--２つ目の要素の内容-->
    <div class="modal_box">
        <div class="modal_bg"></div>
        <div class="modal_inner">
            <div class="modal_block">
                ２つ目の要素の内容
            </div>
            <div class="modal_close">×</div>
        </div>
    </div>
    <!--/２つ目の要素の内容-->
    <!--３つ目の要素の内容-->
    <div class="modal_box">
        <div class="modal_bg"></div>
        <div class="modal_inner">
            <div class="modal_block">
                ３つ目の要素の内容
            </div>
            <div class="modal_close">×</div>
        </div>
    </div>
    <!--/３つ目の要素の内容-->
</div>

$(function() {
　// モーダルのボタンをクリックした時
　$('.modal_trigger .modal_btn').on('click', function() {
　var btnIndex = $(this).index(); // 何番目のモーダルボタンかを取得
　$('.modal_area .modal_box').eq(btnIndex).fadeIn(); // クリックしたモーダルボタンと同じ番目のモーダルを表示する
});

// ×やモーダルの背景をクリックした時
$('.modal_close , .modal_bg').click(function() {
　$('.modal_box').fadeOut(); // モーダルを非表示にする
　});
});

// カルーセル表示
$('.slider_style').slick({
　　infinite: true, //スライドのループ有効化
　　dots: true, //ドットのナビゲーションを表示
　　centerMode: true, //要素を中央寄せ
　　centerPadding: '10%', //両サイドの見えている部分のサイズ
　　autoplay: true, //自動再生
　　slidesToShow: 3, //768px以上のサイズに適用
　　responsive: [{
　　breakpoint: 768, //767px以下のサイズに適用
　　settings: {
　　slidesToShow: 1
　　}
　}]
});

この状態ですと、どの項目をクリックしても、１つ目の要素の内容が表示されてしまいます。
どこを変更すればいいのか、slickを使用する限り無理なのか、ご教授いただけますと幸いです。

Answer 1

自動取得だとどうしても上手くいかなかったので、モダールの親と子に「data-id」で振って、jsで紐づくようにスクリプトを変更して対応いたしました。

Answer 2

$(this).index()

$('.modal_trigger .modal_btn').index(this)

Comments

[toremy]

ありがとうございます！
ご教授いただいた内容に変更したところ、１つ目の要素の内容以外が表示されるようになったのですが、項目と内容が２つほどズレて表示されてしまいます…。
カルーセルを使うとループ機能があるので、順番の取得は難しいのでしょうか。。