1. HOME
  2. javascript
  3. slickの使い方

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を読み込む。

使い方

ただ動かすだけであれば

で動かすことができるようになる。
もしスライドを自分の任意の形にしたいのであれば、値を色々と指定する必要が出てくる。

編集したいのであれば、値が公式のドキュメントにまとめられている。
https://webdesignday.jp/inspiration/technique/jquery-js/3847/

サンプル

slickの縦並び表示の防ぎ方

slickを使う時に、最初に画像が縦並びに表示されてしまう。
#slickをdisplay:none;にしておいて、#slick.slick-initializedをdisplay:block;にしておけば、slickが用意されたところで表示される。(classが付与されたタイミング)

slick-initializedは、スライダーが初期化(読み込み完了)した時点で付与されるclass。

他のカテゴリーの記事をみる