slickの使い方
slickはスライドショーを簡単に作ることができるプラグイン。
自分書くことができるなら、使わなくても大丈夫だけど、もしスライドショーの導入に時間がかかってしまうなら、このプラグインを導入してしまった方が良い。
まずは、
公式サイトからダウンロードする。
【公式サイトのURL】
http://kenwheeler.github.io/slick/
slickを導入するために、必要なファイルは、
slick.css
slick-theme.css
slick.min.js
フォント（html、cssをいじることができるならcssファイルをいじって指定箇所を削除してしまっても良い。もしいじれないのであれば、フォントも一緒にサーバーにあげよう。）
※slick.jsをミニファイしているけど、納品先によっては、ミニファイの.が許可されていないところもあるから、slick_min.jsとかにしておいても良いかもしれない。
これとは別にjQueryを読み込まないと動かないから、jQueryを読み込む。
使い方
ただ動かすだけであれば
|
1 2 3 |
$(function(){ $('動かしたいスライド').slick(); }); |
で動かすことができるようになる。
もしスライドを自分の任意の形にしたいのであれば、値を色々と指定する必要が出てくる。
編集したいのであれば、値が公式のドキュメントにまとめられている。
https://webdesignday.jp/inspiration/technique/jquery-js/3847/
サンプル
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
$('#slick').slick({ autoplay: true, //自動再生 autoplaySpeed: 7000, //スピード arrows: true, //左右のページ送り slidesToShow: 1, //ページ送り１枚 slidesToScroll: 1, dots: true, //ページUI speed: 500, easing: 'ease-out', infinite: true }); //slickのページ送り $('.page_prev').on('click',function(){ $('#fee_slick').slick('slickPrev'); }); $('.page_next').on('click',function(){ $('#fee_slick').slick('slickNext'); }); |
slickの縦並び表示の防ぎ方
slickを使う時に、最初に画像が縦並びに表示されてしまう。
#slickをdisplay:none;にしておいて、#slick.slick-initializedをdisplay:block;にしておけば、slickが用意されたところで表示される。（classが付与されたタイミング）
slick-initializedは、スライダーが初期化（読み込み完了）した時点で付与されるclass。
html/css
javascript
wordpress