#Flickity
今まではスライダーといえば、bxsliderを使っていたのですが、スマホアクションやループの仕様等で案件と合わなかったり、使いづらく思うことがあったのでなにかないかな〜といろいろ調べていたところ、「Flickity」という良さげなスライダープラグインを見つけたので紹介します。
どなたかのお役に立つといいなと思います。
このスライダーのいいところはユーザーがストレスを感じない動きや反応をしてくれるところです。特にスマホのフリックやループの動き、ドラッグアンドドロップのスライドの動きがスムーズです。
また、jqueryなしで単体でも動いてくれます。
公式サイト
##主な機能
####・スマホ対応
タッチデバイスへの対応です。左右にビューっと動かせて、慣性スクロールも自然で操作していて気持ちいいところがFlickityを使いたくなる主な理由と言ってもいいかもしれません。
また、デフォルトでブレイクポイントごとにCSSでスライドの幅を変更していてもきちんとスライド全体をリサイズしてくれます。
####・フィット
1つ1つのセルの幅と高さを自動で取得し、いい感じのスライドコンテンツにまとめてくれます。もちろん、指定することもできます。
####・自動スクロール
自動スクロールの有効、無効、秒数を設定することができます。自動スクロールは手動操作をしたタイミングで無効になり、操作を邪魔せずスムーズです。
####・ナビメニュー
下部のドットボタンやPrev、Nextのボタンなどのナビメニューを有効、無効にできます。
####・インフィニティスクロール
一番最後の次は一番最初、一番最初の前は一番最後といったように、無限にスライドさせるか否かを指定できます。bxsliderのような戻る感じではなく本当に無限に続いてるように感じるスムーズさです。
####・HTML対応
画像だけではなく、HTMLを1つのセルとして自由にデザインし、スライドコンテンツを構成することができます。
####・イベント設定
「スライドを動かしたら〜する」「このセルをクリックしたら〜する」などの細かいイベント設定ができます。
####・jQuery不要
Wordpressなどでjqueryの競合や案件によってはjQueryを使えないなどの条件下でも問題なく使えます。両方に対応しているのは大きいですね。
#基本のスライダーのデモ
##使い方
###1.ライブラリを読み込む
<!--cdnバージョン-->
<head>
<!-- CSSの読み込み -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/flickity/2.2.0/flickity.min.css"/>
<!-- JavaScriptの読み込み -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/flickity/2.2.0/flickity.pkgd.min.js"></script>
</head>
###2.HTMLの準備
<!-- 画像ギャラリー -->
<div class="main-carousel">
<div class="slide slide1"></div>
<div class="slide slide2"></div>
<div class="slide slide3"></div>
<div class="slide slide4"></div>
<div class="slide slide5"></div>
<div class="slide slide6"></div>
</div>
###3.JavaScriptのスクリプトを記述
スライドのコンテンツをエレメント指定して、Flickity()というコンストラクタを使用します。
HTML内にある全てのmain-carouselというクラス名の付いた要素をスライドコンテンツにするには次のように記述します。
var flkty = new Flickity( '.main-carousel', {
// options
});
#オプション
様々なオプションを指定することができます。
##オプション一覧
主なオプションを紹介します。
全てのオプションを確認するには、公式をご参照ください。
cellAlign
子要素を「左揃え」「中央揃え」「右揃え」のいずれかに指定できます。
デフォルトの値は'center'です。
「左揃え」または「右揃え」にするケースは極めて稀だと思いますが、'left'か'right'で設定できます。
wrapAround
子要素をループさせるかどうか。
'true'か'false'で、デフォルトではループしない'false'が設定されています。
contain
子要素の余分なスクロールを防ぐための設定。
デフォルト値は'false'になっています。また、この設定は「wrapAround:false」のときは効果がありません。
freeScroll
「freeScroll」の設定を'true'にすると、子要素の横幅に影響を受けず、特定の位置で固定させずにスクロールさせることができます。
autoPlay
自動でスクロールさせるかどうか。デフォルト値は'false'で、自動スクロールさせたい場合は'true'を指定します。
imagesLoaded
画像の読み込みを制御するjQueryプラグイン［imagesLoaded］を組み込む設定です。
accessibility
キーボード入力「←」「→」でスライダーを制御します。
デフォルトは'true'です。
draggable
モバイル端末のドラッグやフリック入力を許可するか否か。デフォルトは'true'で、これらの入力に対応しています。
pageDots
スライダーを制御するページネーションを表示させるか否か。
prevNextButtons
こちらも同じく、スライダーを制御する「前へ」「次へ」のボタンを表示するか否かの設定です。
##オプション指定方法
以下のように任意のオプションを指定することでオプションを使用することができます。
var flkty = new Flickity( '.main-carousel', {
// options
});
↓
var flkty = new Flickity( '.main-carousel', {
// options
wrapAround: true
});
こちらがデモ
https://codepen.io/ShimokawaChan/pen/MdgBQr
#メソッド
メソッドの指定でスライドの処理を幅広くコントロールできます。
全てのメソッドを確認するには、公式をご参照ください。
##主なメソッド
####destroy()
Flickityを終了(解除)し、スライドコンテンツを元のHTML通りに戻します。
####reloadCells()
セルを構成し直します。
####getCellElements()
セルの要素を配列形式で取得します。
##メソッドの使用方法
以下のように変数に起動したFlickityを代入します。
var flkty = new Flickity( '.main-carousel', {
// options
wrapAround: true
});
destroy()というメソッドを使用するには次の通りです。
flkty.destroy();
#イベントバインド
##主なイベントバインド
イベントのバインドを幅広く設定することができ、「〜したときに〜する」の処理をオプションで設定することができます。
すべてのバインドを確認する場合は公式をご参照ください。
イベントバインド公式
https://flickity.metafizzy.co/events.html
####ready
スライドが読み込まれて準備ができたときに起動するバインド
####change
スライドが変わったときに起動するバインド
##バインドの設定
以下はスライドの準備ができたとき、スライドが変わったときにconsole.logが起動するように設定します。
var slideelm = new Flickity( '.carousel', {
on: {
ready: function() {
console.log('Flickity is ready');
},
change: function( index ) {
console.log( 'Slide changed to' + index );
}
}
});
こちらがデモ
#参考