レスポンシブ、スマホアクションに強いスライダー【Flickity】が便利！！

#Flickity

今まではスライダーといえば、bxsliderを使っていたのですが、スマホアクションやループの仕様等で案件と合わなかったり、使いづらく思うことがあったのでなにかないかな〜といろいろ調べていたところ、「Flickity」という良さげなスライダープラグインを見つけたので紹介します。
どなたかのお役に立つといいなと思います。

このスライダーのいいところはユーザーがストレスを感じない動きや反応をしてくれるところです。特にスマホのフリックやループの動き、ドラッグアンドドロップのスライドの動きがスムーズです。
また、jqueryなしで単体でも動いてくれます。

>公式サイト

>https://flickity.metafizzy.co/

##主な機能

####・スマホ対応
タッチデバイスへの対応です。左右にビューっと動かせて、慣性スクロールも自然で操作していて気持ちいいところがFlickityを使いたくなる主な理由と言ってもいいかもしれません。
また、デフォルトでブレイクポイントごとにCSSでスライドの幅を変更していてもきちんとスライド全体をリサイズしてくれます。

####・フィット
1つ1つのセルの幅と高さを自動で取得し、いい感じのスライドコンテンツにまとめてくれます。もちろん、指定することもできます。

####・自動スクロール
自動スクロールの有効、無効、秒数を設定することができます。自動スクロールは手動操作をしたタイミングで無効になり、操作を邪魔せずスムーズです。

####・ナビメニュー
下部のドットボタンやPrev、Nextのボタンなどのナビメニューを有効、無効にできます。

####・インフィニティスクロール
一番最後の次は一番最初、一番最初の前は一番最後といったように、無限にスライドさせるか否かを指定できます。bxsliderのような戻る感じではなく本当に無限に続いてるように感じるスムーズさです。

####・HTML対応
画像だけではなく、HTMLを1つのセルとして自由にデザインし、スライドコンテンツを構成することができます。

####・イベント設定
「スライドを動かしたら〜する」「このセルをクリックしたら〜する」などの細かいイベント設定ができます。


####・jQuery不要

Wordpressなどでjqueryの競合や案件によってはjQueryを使えないなどの条件下でも問題なく使えます。両方に対応しているのは大きいですね。

#基本のスライダーのデモ

https://codepen.io/ShimokawaChan/pen/OYLByB

##使い方

###1.ライブラリを読み込む

```HTML
<!--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の準備

```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というクラス名の付いた要素をスライドコンテンツにするには次のように記述します。

```JavaScript
var flkty = new Flickity( '.main-carousel', {
  // options
});
```

#オプション

様々なオプションを指定することができます。

##オプション一覧

主なオプションを紹介します。
全てのオプションを確認するには、公式をご参照ください。

>オプション一覧公式
>https://flickity.metafizzy.co/options.html

**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**
こちらも同じく、スライダーを制御する「前へ」「次へ」のボタンを表示するか否かの設定です。

##オプション指定方法

以下のように任意のオプションを指定することでオプションを使用することができます。

```JavaScript
var flkty = new Flickity( '.main-carousel', {
  // options
});
```
↓

```JavaScript
var flkty = new Flickity( '.main-carousel', {
  // options
  wrapAround: true
});
```

こちらがデモ
https://codepen.io/ShimokawaChan/pen/MdgBQr


#メソッド
メソッドの指定でスライドの処理を幅広くコントロールできます。
全てのメソッドを確認するには、公式をご参照ください。

>メソッド一覧公式
>https://flickity.metafizzy.co/api.html

##主なメソッド

####destroy()
Flickityを終了(解除)し、スライドコンテンツを元のHTML通りに戻します。

-----

####reloadCells()
セルを構成し直します。

-----

####getCellElements()
セルの要素を配列形式で取得します。

-----

##メソッドの使用方法

以下のように変数に起動したFlickityを代入します。

```JavaScript
var flkty = new Flickity( '.main-carousel', {
  // options
  wrapAround: true
});
```

destroy()というメソッドを使用するには次の通りです。

```JavaScript
flkty.destroy();
```

#イベントバインド

##主なイベントバインド

イベントのバインドを幅広く設定することができ、「〜したときに〜する」の処理をオプションで設定することができます。
すべてのバインドを確認する場合は公式をご参照ください。

>イベントバインド公式
>https://flickity.metafizzy.co/events.html

####ready

スライドが読み込まれて準備ができたときに起動するバインド

####change

スライドが変わったときに起動するバインド

##バインドの設定
以下はスライドの準備ができたとき、スライドが変わったときにconsole.logが起動するように設定します。

```JavaScript
var slideelm = new Flickity( '.carousel', {
  on: {
    ready: function() {
      console.log('Flickity is ready');
    },
    change: function( index ) {
      console.log( 'Slide changed to' + index );
    }
  }
});
```
こちらがデモ

https://codepen.io/ShimokawaChan/pen/oRvaZo


#参考

[Flickityの使い方！スマホ対応のスライドコンテンツを作ろう！](https://syncer.jp/how-to-use-flickity)

[【jQuery】レスポンシヴ対応のスライダー［flickity］は今後の定番になるでしょう。
](https://on-ze.com/archives/2147)