(2016年6月15日若干修正)

レスポンシブウェブデザイン化する際に重宝され始めた、ぬるっと画像がスライドするカルーセル表示。

そのカルーセルを簡単に導入する事ができるJQueryプラグインslickの導入方法を紹介する。

デモページ

導入に際して、結構な数のブログでその方法を紹介していたけど、矢印が表示されない、ナビゲーションのドットが表示されない等の不具合が出るやり方をこぞって紹介していた。

ということで、上のスライドのようにちゃんと動作するやり方を試行錯誤の末やっと見つけたのでシェア♪
(といっても、やり方は超簡単だったけどw)

 

導入方法

①ファイルをダウンロード

公式ページからファイルをダウンロードする。
(ctrl+Fで「Download Now」をページ内検索すれば、DL先が簡単に見つかる)

 

②ファイルをアップロード

cssディレクトリに以下をアップ。

  • slick.css
  • slick-theme.css
  • fontフォルダ
  • ajax-loader.gif

続いて、slick.min.js(内容を変更したいならslick.js)をjsディレクトリにアップする。

(注)他サイトでslick.cssだけで導入するような説明をされている場合があるが、そうすると、矢印が「Next」になったり、ナビゲーションの「・」が番号になったりする。
また、slick-theme.cssを編集しようとすると、文字コードがおかしくなって誤動作を起こす事が多々ある。

 

③ファイルの読み込み

上記CSSとJavascriptをJQUERYとともに読み込ませる。

 

④htmlの準備

カルーセル表示させるためのhtmlを記述。

 

⑤プラグインの実行

コードを任意の場所(</head>の直前等)に設置。
以下コードはクラス名をhogeとし、レスポンシブデザイン対応(ブレークポイント=640pxと960px)した場合の例。

 

以下、必要になる可能性が高そうなオプションを列挙(赤文字はデフォルト)。
この他にもいろんなオプションがあるので、必要ならば公式ページでどうぞ♪

オプション名 説明
arrows true/false 前へ/次へのナビゲーション有/無
autoplay true/false オートプレイの有/無
autoplaySpeed 数字(3000 スライド切り替わり時間(ms)
cssEase ease/linear/ease-in/ease-out/ease-in-out アニメーション効果
dots true/false スライド下のナビゲーションドットの有/無
draggable true/false ドラッグの有/無
fade true/false フェードイン表示の有/無
infinite true/false 無限ループの有/無
initialSlide 数字(0 最初のスライド位置
pauseOnHover true/false ホバーした際に自動再生を止めるかどうか
responsive 上記参照(null レスポンシブ表示設定
slide タグ名(div スライドする要素を内包するタグ名
slidesToShow 数字(1 いくつスライドが見えている状態にするか
slidesToScroll 数字(1 スライドする数
speed 数字(300 スライドアニメーションにかかる時間(ms)
swipe true/false タッチスワイプの有/無
touchMove true/false タッチでスライドの有/無
vertical true/false 縦方向のスライドの有/無

 

以上、動きがスムーズでオプションも多く、安定しているjQueryプラグインslickの導入方法でした☆


このブログの現在の順位はこちら→∩(´∀`)∩