tab内にslickを配置したときに起きる不具合を修正する

  • 投稿日
  • 著者 アバター しんぺー
  • カテゴリー Code
  • カテゴリー JavaScript
  • カテゴリー jQuery
この記事で解決できるお悩み

タブの中にslickを入れているけど、切り替えたときに表示が崩れたりする。。
なぜ？

しんぺー

タブを切り替えたときにslickを初期化してあげるとうまくいきますよ。
解説していきますね。

サンプル

不具合のサンプルと、修正後の正しい動作のサンプルを用意しました。

不具合ありのサンプル

不具合のサンプルは下のCodePenでご確認ください。
でもそもそもなぜ不具合が起こるのでしょうか？

原因は？

タブを切り替えたときにslickが初期化されておらず、次のスライドに行くまで何も表示されません。

不具合の内容
  • タブ切り替え時にスライドが表示されない
  • 次のスライドに切り替わるタイミングで、ようやく表示される
  • autoplayをfalseにしていると何も表示されない
  • タブ切替時に表示が崩れることがある

See the Pen tab内にslickを配置【不具合あり】 by shimpei (@shimpei) on CodePen.

しんぺー

今回のサンプルではautoplay: true,にしていますがfalseになっていると何も表示されなくなります。

不具合を解消したサンプル

下に不具合のサンプルと、修正後のサンプルを用意しました。

主な修正内容
  • タブ切り替え時（タブのアイテムをクリックした時）にslickを初期化
    • スライドを1枚目に
    • スライドの位置をリセット

See the Pen tab内にslickを配置【不具合あり】 by shimpei (@shimpei) on CodePen.

しんぺー

リセットの方法はいくつかあるので、その時々にあった方法を実装してみてください。
今回は下記のコードでリセットしました。

'slickGoTo', 0 → 1枚目のスライドに移動
'setPosition' → 位置をリセット

setPositionだけ入れていることが多いかも。

修正したコードの全体像

$(document).ready(function () {
  var slider = $('.slide01, .slide02, .slide03').slick({
    fade: true,
    autoplay: true,
    dots: true,
    arrows: false,
    useCSS: false,
  });
  // タブ切り替え時に、スライドをリセット
  $('.menu .item').on('click', function () {
    slider.slick('slickGoTo', 0); // 最初のスライドへ
    slider.slick('setPosition');　// slickの位置を初期化
  });
});
このコードの概要

タブをクリックしたら、スライドの位置と枚数を1枚目にします。

  • var sliderのところで、slickの設定やオプションを変数に格納。
  • $('.menu .item').on('click', function(){...})でtabクリック時に、何かしらの処理を実行できるように。
  • 実行する処理は、変数に格納したsliderと'slickGoTo', 0（最初のスライドへ）、'setPosition'（位置の初期化）。

まとめ

タブ内に配置したSlickが表示されないときは、Slickを初期化しよう！
タブ切り替えのボタンをクリックしたときに、下記の処理を入れます。

// タブ切り替え時に、スライドをリセット
  $('.menu .item').on('click', function () {
    slider.slick('slickGoTo', 0); // 最初のスライドへ
    slider.slick('setPosition');　// slickの位置を初期化
  });