【jQuery】カルーセルスライダーslickの使い方とサンプル集

【jQuery】カルーセルスライダーslickの使い方とサンプル集

どうも、ジャングルオーシャンのミケです。

今日はカルーセルスライダーが実装できるslickのご紹介!

カルーセルスライダーは

ウェブサイトのファーストビューなどでよく使われている

何枚かの画像がスライドしたりして切り替わる機能のことだよ。

slickを使ったサンプルデモを用意したので

具体的なイメージはこちらを見てみてね。

コピペして使ってもらって大丈夫だよ!

サンプルデモページはこちら




slickとは

slickはjQueryのプラグインの一つで

簡単にカルーセルスライダーを実装する事ができるよ。

JavaScriptやjQueryが書けなくても大丈夫なので

カルーセルスライダーの実装を考えている人は

slickも検討してみてね。

slickの使い方

まずはslickの公式サイトにアクセス!

slick公式ページはこちら

まずはナビゲーションの「get it now」をクリックしてね。
slick-getitnow

下にスクロールするから

「Download Now」ボタンをクリックしてね。

slick-downloadnow

ダウンロードされたzipファイルを解凍してね。

使うファイルは以下のものになるよ。
slick-theme.css
slick.css
slick.min.js
fontsフォルダ
slick.min.js

htmlファイルを作成してそれぞれのファイルを読み込ませるよ。

まず、headタグ内にcssを読み込ませるよ。

次にbodyタグの中にスライダーの枠を記述するよ。

最後にbodyタグの閉じタグの前にscriptを記述してね。

「スライダーのクラス名」には好きなクラスを入れてね。
「オプション」と「値」にはこのページの下の方に書いてあるオプション一覧を参照してね。

1.画像を1枚表示するスライダー

HTML

CSS

jQuery

サンプルデモを見る

クラス名はsingle、オプションは自動再生されるように設定してあるよ。一番シンプルなカルーセルスライダーだね。

2.複数枚の画像を表示するスライダー

HTML

CSS

jQuery

サンプルデモを見る

スマホだと画像が小さくなりすぎるからレスポンシブにしているよ。ブレークポイントは768px480pxで指定しているよ。

3.画像の切り替えをフェードにしたスライダー

HTML

CSS

jQuery

サンプルデモを見る

オプションのfade:trueを使うことで画像が切り替わる時のアニメーションをフェードにしているよ。

4.サムネイルがついているスライダー

HTML

CSS

jQuery

サンプルデモを見る

メイン画像を表示するスライドとナビゲーションを表示するスライドの2種類のスライドを使ってサムネイル付のカルーセルスライダーを実装しているよ。
サムネで現在選択されている画像の表示はslick-currentクラスがつくことを利用してcssopacityの設定をしているよ。

5.両サイドに画像を表示するスライダー

HTML

CSS

jQuery

サンプルデモを見る

centerMode:trueで中央寄せにして両サイドの画像が見えるようにしているよ。

6.縦のスライダー

HTML

CSS

jQuery

サンプルデモを見る

vertical:trueを設定してスライドを縦に設定して、cssで前後の矢印が上下にくるように設定しているよ。

オプション一覧

ここからは設定できるオプションの一覧を書いていくよ。
さっきも書いたけど

このソースコードの中の
オプションと値にそれぞれ入れるようにしてね。

accessibility
矢印キーで操作の有効(true)と無効(false)。
初期値:true
adaptiveHeight
スライド毎に高さを変更する(true)変更しない(false)。
初期値:false
autoplay
自動再生を有効(true)にするか無効(false)にするか。
初期値:false
autoplaySpeed
自動再生の速度(ミリ秒)。小さいほど速くなる。
初期値:3000(3秒)
arrows
前/次の矢印の表示(true)非表示(false)。
初期値:true
asNavFor
スライダを他のスライダのナビゲーションになるように設定します(クラス名またはID名)
asNavFor: ‘.クラス名’
初期値:null
appendArrows
矢印の場所を変更する。
appendArrows: $(‘.矢印を生成するhtmlの場所のクラス名’)
初期値:$(element)
appendDots
ドットナビゲーションを付ける場所を変更する。dots:trueを忘れずに。
初期値:$(element)
prevArrow
「前へ」矢印のカスタマイズができます。
初期値
nextArrow
「次へ」矢印のカスタマイズができます。
初期値
centerMode
前後のスライドを部分的に表示する(true)。値には奇数を使用してください。
初期値:false
centerPadding
センターモードの時の両サイドのパディングをpxまたは%で指定します。
初期値:’50px’
cssEase
CSS3のアニメーションイージングを指定します。
‘ease-in’、’ease-out’、’linear’などがあります。
初期値:’ease’
customPaging
ドットナビゲーションを変更します。
以下の例を使うとドットが数字になります。

初期値:n/a
dots
ドットナビゲーターの表示(true)非表示(false)
初期値:false
dotsClass
ドットナビゲーションのクラス名を指定できます。
初期値:’slick-dots’
draggable
マウスドラッグ操作の有効(true)無効(false)。
初期値:true
fade
フェード機能の有効(true)無効(false)。
初期値:false
focusOnSelect
スライドをクリックするとフォーカスします(true)。
初期値:false
easing
jQueryのanimate()のeasingを追加します。
‘linear’と’swing’があります。
初期値:’linear’
edgeFriction
スライドがループでない時の端をスワイプするときの抵抗値が指定できます。
infinite: falseを忘れずに。
初期値:0.15
infinite
スライドのループを有効(true)、無効(false)にします。
初期値:true
initialSlide
最初に表示するスライドを選択します。
initialSlide:5 //この場合6枚目が最初に表示されます。
初期値:0
lazyLoad
遅延読み込みの設定ができます。
‘ondemand’と’progressive’があります。
初期値:’ondemand’
mobileFirst
レスポンシブ設定の際、一番幅の狭い設定のものを反映します(true)。
初期値:false
pauseOnFocus
フォーカスをすると自動再生を一時停止する(true)。
autoplay: trueを忘れずに。
初期値:true
pauseOnHover
スライドにホバーした時に自動再生を一時停止する。
autoplay: trueを忘れずに。
初期値:true
pauseOnDotsHover
ドットナビゲーションにホバーした時に自動再生を一時停止する。
autoplay: true, dots:trueを忘れずに。
初期値:false
respondTo
レスポンシブ設定時のブレークポイントの基準を選択します。
‘window’、 ‘slider’、’min’(windowかsliderのどちらか小さい方)が選択できます。
初期値:’window’
responsive
レスポンシブの設定ができます。
サンプル(768pxと480pxにブレークポイントを設定)

初期値:none
rows
2以上に設定すると、グリッドモードになります。
slidesPerRowを使用して、各行のスライド数を設定できます。
初期値:1
slide
スライドとして使用する要素を指定することができます。
初期値:”
slidesPerRow
グリッドモードの時に、各行のスライド数を設定できます。
初期値:1
slidesToShow
一度に表示するスライドの数を指定できます。
初期値:1
slidesToScroll
スライドをした際にスクロールされるスライドの数を指定できます。
初期値:1
speed
スライドやフェードの時のアニメーションの速度を指定します。
初期値:300(0.3秒)
swipe
スワイプを有効(true)、無効(false)に変更できます。
初期値:true
swipeToSlide
ユーザーが直接ドラッグまたはスワイプできるようにする(true)。
初期値:false
touchMove
タッチ操作でスライドがスクロールするようにします(true)。
初期値:true
touchThreshold
スワイプでスライドを移動させる為の長さを指定します。
(1 / touchThreshold)*スライダーの幅
初期値:5
useCSS
CSS transitionを有効(true)/無効(false)にする。
初期値:true
useTransform
CSS transformを有効(true)/無効(false)にする。
初期値:true
variableWidth
スライド幅の変更を有効(true)/無効(false)にします。
初期値:false
vertical
スライドが縦にスクロールするようにします(true)。
初期値:false
verticalSwiping
縦のスワイプを有効(true)/無効(false)にします。
初期値:false
rtl
スライドの方向を右から左に変更する(true)。
初期値:false
waitForAnimate
スライドをスクロールする際のアニメーション中に次のスライドに進む要求を無視します(true)。
初期値:true
zIndex
スライドのz-indexが設定できます。IE9以下の対応に役立ちます。
初期値:1000

まとめ

カルーセルスライダーは実装できたかな?

オプションを記入するだけで簡単に実装できるから

まだ試したことのない人はぜひ試してみてね。

もし何かわからないことなどがあったら連絡してね。

それじゃまた今度!

TwitterやFacebookのフォローよろしくね!

Twitter
@michelgorilla

Facebook
ミケランジェロ




プログラミングカテゴリの最新記事