タブ切り替え時にslickスライダーが崩れる問題を3行で解決

レスポンシブに対応しているスライダーとして有名なslickを導入した際、タブ内に設置したら表示崩れが起きてしまい、沼にはまってしまいました。

私なりに解決策を考えてみたので参考になれば幸いです。

スライダープラグイン「slick」について
タブ切り替えの方法
そもそも何が起こるのか
解決策
1. 触ったのはjsのみ
  1. 悪い例
  2. 良い例
2. スライダーのリセット処理
応用編
最後に

スライダープラグイン「slick」について

まず、今回使用するプラグインの「slicik」について簡単にご紹介します。

slick - the last carousel you'll ever need

slick is a responsive carousel jQuery plugin that supports multiple breakpoints, CSS3 transitions, touch events/swiping & much more!

slickはレスポンシブ完全対応、オプションも豊富、設置も簡単と非常に使いやすいスライダープラグインです。

このスライダーの使い方は他のサイトでも多数紹介されているので、今回は割愛します。

本記事ではこのスライダープラグインを使用して、タブ分けしても正常に動作する記述を紹介していきます。

タブ切り替えの方法

タブの切り替え方法ですが、今回私は、

【CSS】CSSだけでタブ切り替えを作る方法 - bagelee（ベーグリー）

今回はCSSだけでタブ切り替え...

こちらのサイトを参考に、CSSのみでタブ切り替えを実装しました。

詳しい設定は上記のサイトを参照ください。

本記事ではこのタブの中にslickスライダーを実装している前提で話を進めていきます。

そもそも何が起こるのか

現在表示されているタブ以外はdisplay:noneが適用されます。

どうやらこれが悪さをしているらしく、スライダーが正しくレンダリングされません。

下記の例は先にご紹介したタブの方法で、Slickスライダーを設置した例です。

See the Pen Tab & Slick 悪い例 by 腰塚晃＠”A” In Hello,World! (@koshizuka_akira) on CodePen.0

タブ2、タブ3に切り替えた際にスライダーが正常にレンダリングされていないのがわかるかと思います。

こちらを解消していきます。

解決策

まず、解決している例をご覧ください。

See the Pen Tab & Slick 良い例 by 腰塚晃＠”A” In Hello,World! (@koshizuka_akira) on CodePen.0

先ほどと同様にタブを切り替えても、正しくレンダリングされているのがわかるかと思います。

触ったのはjsのみ

今回編集したのはjsの記述のみです。

では、比較してましょう。

悪い例

$(document).ready(function(){
  $('.slide').slick({
    dots: false,
    infinite: false,
    speed: 300,
  });
});

$(document).ready(function(){

$('.slide').slick({

dots: false,

infinite: false,

speed: 300,

});

良い例

$(document).ready(function(){
  var slider = $('.slide').slick({
    dots: false,
    infinite: false,
    speed: 300,
  });
  $('input[name="tab_item"]').change(function() {
     slider.slick('setPosition');
  });
});

$(document).ready(function(){

var slider = $('.slide').slick({

dots: false,

infinite: false,

speed: 300,

});

$('input[name="tab_item"]').change(function() {

slider.slick('setPosition');

});

違う部分は2行目の変数の宣言と7〜9行目の処理です。

2行目はただの宣言なので、7〜9行目をメインに解説をしていきたいと思います。

スライダーのリセット処理

$('input[name="tab_item"]').change(function() {
   slider.slick('setPosition');
});

$('input[name="tab_item"]').change(function() {

slider.slick('setPosition');

});

1行目の記述で、name=”tab_item”に該当するチェックが切替わった際に発火させます。

今回使用しているタブはラジオボタンで構成されているので、ボタンが切替わったら発火します。

$('input[name="tab_item"]').change(function() {
   slider.slick('setPosition');
});

$('input[name="tab_item"]').change(function() {

slider.slick('setPosition');

});

2行目で、先ほど宣言した変数にsetPositionというメソッドを呼び出します。

これは、slickスライダーのサイズや位置をリセットするメソッドです。

基本的には自動的に実行されるメソッドですが、ここで言うサイズや位置は、親要素を元に計算されるため、親要素が非表示のタブ（display:none）の場合はそれが正しく生成されません。

これが今回の不具合の主な理由です。

そのため、非表示のタブがアクティブになる（1行目の発火条件）度にこのメソッドを呼び出すことで、アクティブになったタブの情報を元に、スライダーが初期化される、という処理をしています。

応用編

同ページ内で複数のタブを設置したい場合、サンプルコードのHTMLにある、

<input id="tab01" type="radio" name="tab_item" checked>
<label class="tab_item" for="tab01">タブ1</label>
<input id="tab02" type="radio" name="tab_item">
<label class="tab_item" for="tab02">タブ2</label>
<input id="tab03" type="radio" name="tab_item">
<label class="tab_item" for="tab03">タブ3</label>

inputのnameを違うものに設定します（仮にtab_item02とします）

その上で、jsに先と同じように追記します。

$(document).ready(function(){
  var slider = $('.slide').slick({
    dots: false,
    infinite: false,
    speed: 300,
  });
  $('input[name="tab_item"]').change(function() {
     slider.slick('setPosition');
  });
  $('input[name="tab_item02"]').change(function() {
     slider.slick('setPosition');
  });
});

$(document).ready(function(){

var slider = $('.slide').slick({

dots: false,

infinite: false,

speed: 300,

});

$('input[name="tab_item"]').change(function() {

slider.slick('setPosition');

});

$('input[name="tab_item02"]').change(function() {

slider.slick('setPosition');

});

これで複数のタブにスライダーを設置しても対応できます。

最後に

タブの設置方法、スライダーの設置方法はいくつも存在します。

今回はその中で私がピンポイントで沼にはまった事例を紹介しました。

もっとスマートな方法もあるかもしれませんが、一例として参考になれば幸いです。