Pocket

slick.jsをタブの切替のなかで使おうとしたら不具合がでました。

初期状態がdisplay:none;だと不具合を起こしてしまうようです。

公式サイトを参考したのですが、英語だしよくわからず散々しらべました・・久しぶりにハマりました。

で、助かったサイトがコチラです。

SLICK.JSを利用していて、初期状態をDISPLAY:NONE;にしたらレイアウト崩れる

slick.jsをモーダルなど、最初非表示のもので使うとき

忘れずにブログに書いておこうと思い、codepenに書いたらうまく動かなかった(泣)。

とりあえず、制作サイトでは問題ないので深い原因追及は後にします。

■使いやすいコンテンツスライダー slick.js

slick.jsでdisplay:none;で不具合(codepen) ※こちらでは修正が確認できてません

2017.06.09追記

以外に記事読んでいただいてるので、コード追加しました。

 $(document).ready(function() { 
 var slider = $(".slide_plan").slick({
 //パソコンの時のスライド
responsive: [
 {
 breakpoint: 599,
 settings: {
//モバイル時のスライド
 }}]
 });
//↓ここがポイント!タブの切替ボタンをクリックしたらsetPositionが動く
 $('.spplanbtn').click(function(){//クラス名を指定しました
 slider.slick('setPosition');
 });
 }); 
Pocket