slick：初期表示スライドを動的に変更したい

Question

前提・実現したいこと

・モーダル内で slickスライダーを表示させており、クリックしたボタンによって初期スライド位置を変更したいのです。
・ボタンをクリックするとすべて同一のモーダルが開きます。
・ボタンをクリックすると、初期表示するスライドの番号を取得します。
・その番号を slickSetOption で initialSlide の値としてセットしたいのですがうまくいきません。
※slick公式サイト: http://kenwheeler.github.io/slick/

現在の挙動

・表示したいスライド番号は取得できているが、どのボタンをクリックしても1番目のスライドが表示されてしまう。
・モーダルを開いた状態で、スライドを変更してからモーダルを閉じると、最後に表示されていたスライドが次回 初期表示される。

該当のソースコード

<ul>
  <li><button class="modal" data-tgt="modal1">スライド(1)</button></li>
  <li><button class="modal" data-tgt="modal1" data-slide="1">スライド(2)</button></li>
  <li><button class="modal" data-tgt="modal1" data-slide="2">スライド(3)</button></li>
  <li><button class="modal" data-tgt="modal1" data-slide="3">スライド(4)</button></li>
</ul>

var slideNum = 0;

// modal
$('.modal').on('click', function () {
  var $modal = $('#' + $(this).attr('data-tgt'));
  var $overlay = $('.modal_overlay');

  if($(this).attr('data-slide')) {
    slideNum = $(this).attr('data-slide');
    modalSlider.slick('slickSetOption', 'initialSlide', slideNum, true);
  }

  modalSlider.slick('setPosition'); // 初期化
  $overlay.fadeIn();
  $modal.show();
});


// modal slider
var modalSlider = $('.modal_slider').slick({
  autoplay: false,
  slidesToShow: 1,
  slidesToScroll: 1,
  infinite: true,
  arrows: true,
  initialSlide: slideNum
});

Comments

[kei344]

（質問文は編集できます）モーダルを含めプラグイン／ライブラリは公式配布サイトのURLを質問文に追記ください。（URLにはリンクを張ることができます）

[yokoh]

ご指摘ありがとうございます。追記しました。

[m.ts10806]

slideNum に０が固定で入っていますが、これは？

[yokoh]

デフォルトを設定しています。その下のボタンクリック時の function の中で slideNum を書き換えようとしています。「var slideNum = 0;」を「var slideNum;」としても挙動は変わらずです。

Answer 1

試しに、変更するオプションを initialSlide ではなく autoplay など他のものにしてみたら、ちゃんと変更されました。

modalSlider.slick('slickSetOption', 'initialSlide', slideNum, true);

slickSetOption で initialSlide を変更することはどうにもできなかったので、
slickGoTo でスライドを移動させることで対処しました。

$('.modal').on('click', function () {
  var $modal = $('#' + $(this).attr('data-tgt'));
  var $overlay = $('.modal_overlay');

  if($(this).attr('data-slide')) {
    slideNum = $(this).attr('data-slide');
    modalSlider.slick('slickGoTo', slideNum);
  }

  modalSlider.slick('setPosition'); // 初期化
  $overlay.fadeIn();
  $modal.show();
});

ただし、1回目にスライダーを表示させた時に slickGoTo のスライド移動の動きがチラッと出てしまうので（2回目以降は出ない）、スライドの動きを 「fade: true」 オプションでフェードにすると違和感がなくなりました。