[jQuery]カルーセルを作るプラグイン1 – slick.js

[2017.07.28] サムネイル画像とカルーセルの画像を変更しました。やっぱり猫はとてもとてもカワイイ。

slick.jsを使ってよくあるカルーセルを実装する方法をまとめておきます。スマホのスワイプなどにも対応しています。

カルーセルを作るプラグイン1

1.slick.jsを使う準備をする

1.必要なファイルをDL

まず、公式サイトから必要なファイルをDLします。
slick(公式サイト)

DLしたフォルダを解凍し、slickフォルダの中にある次のファイル等をサーバーにUPします。
※この時、各ファイルの階層を変えてしまうと、後でパスの書き換えが必要となるところが出てくるので、不要なファイルのみ削除した状態のslickフォルダをそのままサーバーに上げる方が後々楽だと思います。

  • fontsフォルダ
  • ajax-loader.gif
  • slick.css
  • slick-theme.css
  • slick.min.js

2.ファイルを読み込む

必要なファイルを読み込みます。

2.基本のカルーセルの作り方

まず、DEMOのような一つのスライドを表示させる、基本のカルーセルの作り方を記載しておきます。
DEMO

1.カルーセル用のdivを用意

  • ※class名「slider」は任意のもので構いませんが、後で記述するslick.jsを実行するjQueryのセレクタと合わせてください。
  • ※画像名は任意で構いません。
  • ※タグはdiv以外でも大丈夫なそうですが、親要素の直下に自動でdivタグやbuttonタグが入るので、ulじゃない方がいいと思います。ただ、タグはオプションで変えられるようです。

2.slick.jsを実行する

jsファイルを用意して、slick.jsを実行させます。この時のセレクタは先程指定したclass名にしてください。

※自動再生あり、ナビゲーションありのオプションをつけています。必要なければ削除。

3.CSSで外観を整える

後は、CSSで形を整えるだけです。これは必要に応じて行ってください。

  • ※NEXTボタン・PREVボタンをデフォルトからFont AwesomeのWEBアイコンに変更しています。
  • ※「slickの初期化完了まで非表示」は初期化が完了するまで、一瞬表示が乱れるのを隠すためです。

3.左右が少し見えるカルーセルの作り方

左右のスライドが少し見えているタイプのカルーセルです。
左右のスライドの表示幅は、jQueryで指定する中央スライドのパディングで決まりまるようです。
ブラウザサイズを大きくした時に中央のスライドの幅と高さを固定したまま左右のスライドを広げていく方法が分かりませんでした。できるのかな…?
DEMO

1.カルーセル用のdivを用意

これは2章の時と同じです。

2.slick.jsを実行する

jsファイルを用意して、slick.jsを実行させます。

3.CSSで外観を整える

CSSで形を整えます。これは必要に応じて行ってください。

4.サムネイルを持つカルーセルの作り方

サムネイルと連動するタイプのカルーセルです。
DEMO

1.カルーセル用のdivを用意

※サムネイルとカルーセル本体の画像は同じものでも構いません。

2.slick.jsを実行する

jsファイルを用意して、slick.jsを実行させます。

3.CSSで外観を整える

CSSで形を整えます。これは必要に応じて行ってください。

5.複数アイテムのカルーセルの作り方

アイキャッチ以外でなら、こんなのもよく使われますよね。
DEMO

1.カルーセル用のdivを用意

これも2章の時と同じです。

2.slick.jsを実行する

jsファイルを用意して、slick.jsを実行させます。

3.CSSで外観を整える

CSSで形を整えます。これは必要に応じて行ってください。

6.slick.jsのオプション設定

たくさんあるので、よく使いそうなものだけ。
詳しくはこちらで紹介されています。
どこよりも詳しい万能スライダーjQueryプラグインslick.jsの使い方 | ITハット

まず、設定方法はこんな感じです。

オプションの種類(一部)

そして設定できるオプションはこんな感じ。

自動再生に関するオプション

自動再生(※初期値:false)
autoplay: true,
自動再生でスライドが移動する時間(※初期値:3000)
autoplaySpeed: 4000,
autoplayがtrueの時、マウスフォーカスで一時停止(※初期値:true)
pauseOnFocus: false,
autoplayがtrueの時、マウスホバーで一時停止(※初期値:true)
pauseOnHover: false,
autoplayがtrueの時、ドットナビのマウスホバーで一時停止(※初期値:false)
pauseOnDotsHover: true,

ドットナビに関するオプション

ドットナビの表示(※初期値:false)
dots: true,
ドットナビのclass名(※初期値:slick-dots)
dotsClass: ‘carousel-nav’,

PREVボタン・NEXTボタンに関するオプション

PREVボタン・NEXTボタンの表示(※初期値:true)
arrows: false,
PREVボタンの挿入コード(※初期値:'<button type=”button” class=”slick-prev”>Previous</button>’)
prevArrow: ‘<a href=”#” class=”prevbtn”>PREV</a>’,
NEXTボタンの挿入コード(※初期値:'<button type=”button” class=”slick-next”>Next</button>’)
nextArrow: ‘<a class=”slick-next” href=”#”>次へ</a>’,

アニメーションに関するオプション

スライドアニメーションのスピード(※初期値:300)
speed: 400,
スライド時のアニメーションをフェード(※初期値:false)
fade: true,

その他のオプション

ループ(※初期値:true)
infinite: false,
表示させるスライドの数(※初期値:1)
slidesToShow: 3,
最初のスライドをどれにするか(※初期値:0)
initialSlide: 2,
一度にスライドさせる数(※初期値:1)
slidesToScroll: 3,
slidesToShowが奇数の時、アクティブなスライドを中央表示(※初期値:false)
centerMode: true,
centerModeがtrueの時のアクティブなスライドの左右パディング(※初期値:’50px’)
centerPadding: ‘100px’,

※左右のスライドを少し見せたい時はこの値で幅を調整する

マウスドラッグでのスライド(※初期値:true)
draggable: false,
スワイプでのスライド(※初期値:true)
swipe: false,