slick.jsがタブ切り替えやモーダルで不具合

木村太一

8年前

[av_textblock size=” font_color=” color=”]
slick.jsをタブの切替のなかで使おうとしたら不具合がでました。

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

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

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

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

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

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

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

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

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

[av_textblock size=” font_color=” color=” admin_preview_bg=”]
2017.06.09追記

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

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

[/av_textblock]