知らないと詰むやつ。
仕様の理解
slick.jsは、というか他のスライドでもあるんだけど、初期状態で非表示にしてあってクリックしたら表示する系のやつに仕込むとスライドが表示されない。というか、スライド内の画像が表示されない。
これはバグというよりは仕様で、読み込み時にスライドの高さとか幅とかが無いもんだから表示領域を確保できないんで、だから表示されない。スライドのサイズに実数を入れても非表示（display:none;）が勝つのでどうしようもない。
「要素を表示したときにスライドを表示する」って動作が必要になる。スライド自体は本来元々表示されるものだから違和感があるけど、「表示する」というコマンドが必要になると理解する。
表示させるためのトリガー
slick.jsの導入はすっ飛ばして要点だけ。
「setPosition」というのを読ませる。
$(function(){
var sliderShow = $('.slider');
sliderShow.slick({
arrows:true,
});
$('#btn_show').click(function () {
sliderShow.slick('setPosition');
});
});こんな感じ。これでタブに仕込むとか、ポップアップに仕込むとかしたときも表示されるようになる。タブ毎にslick.jsを仕込む場合、タブ毎に指定するように作ったほうが安心。
これで表示されない場合
コンテンツの表示を.fadeIn()でやると不安定になることを確認。.show()で安定する。
ふわっと出したいときもあるかもだけど、それはcssのanimationでやるのがいいかもね。classの付与をトリガーにしてopacityとかでやればいいんじゃないですか。すごくめんどくさそうだけど。
おまけ：slick.jsの無効化
仕様書を読めって話ではあるんだけどね。
例えばリキッドレイアウトのレスポンシブで組んだとして、PC表示だとスライド化、SP表示だとスライド解除ということもできる。こんな感じ。
$(function(){
var sliderShow = $('.slider');
sliderShow.slick({
arrows:true,
responsive: [ {
breakpoint: 768,
settings: 'unslick'
} ]
});
$(window).on('resize', function() {
if(window.matchMedia('(max-width:768px)').matches){
sliderShow.slick('resize');
}
});
});できることがいっぱいあるんでまずはやりたいことを考えて、ちゃんとできるかできないか調べるところからやっていきましょう。
おまけ：オプションの変数化
js触ってたら分かるだろうけどね。
$(function(){
var sliderArray = {
arrows: true,
dots: false,
infinite: true,
};
$('.slider01').slick(sliderArray);
$('.slider02').slick(sliderArray);
$('.slider03').slick(sliderArray);
});複数のスライドを設置したとき、それぞれのオプション設定が被る場合は変数でまとめて読み込んじゃったほうが記述がスッキリするので便利。
コメント