【jQuery非依存】Flickityスライダー

てっちゃん
てっちゃん

jQuery非依存スライダー「Flickity」を紹介します！

Flickityはプラグインを設置したら、あとはHTMLとCSSでカンタンに設定を変更できるスライダーです。
マウスタッチやフリック操作もできちゃうので便利ですよ～

デモページ

1.準備

Flickity

Flickityの公式サイトからjsとcssをダウンロードしてきます！
https://flickity.metafizzy.co/
もしくはGitHubにも公開されてるので、チェックしてみてください
https://github.com/metafizzy/flickity

必要なファイル

flickity.pkgd.min.js

flickity.css

この2つのみ！

2.設置

早速設置していきましょ～

先ほどダウンロードしてきたファイルを<head>～</head>内で読み込みます。

HTML：<head>～</head>内

ファイルのパスは任意です。都度変更してください。

<link rel="stylesheet" href="css/flickity/flickity.css">
<script src="js/flickity/flickity.pkgd.min.js"></script>

HTML：コンテンツ内

上記準備ができたら、コンテンツ内の親要素にclass="js-flickity"を追加するだけ！

<div>
	<ul class="js-flickity">
		<li>SLIDER-01</li>
		<li>SLIDER-02</li>
		<li>SLIDER-03</li>
		<li>SLIDER-04</li>
		<li>SLIDER-05</li>
	</ul>
</div>

これだけで完成～！
とってもカンタンですね！感動しちゃいます

3.オプション

オプション設定もとってもカンタン！
HTMLのデータ属性にdata-flickity-optionsを追加していきます！

オプション例

オプション："wrapAround": true , "autoPlay": trueを追加してみました
無限ループと自動スクロールのオプションです

デモページ

<div>
	<ul class="js-flickity" data-flickity='{ "wrapAround": true , "autoPlay": true }'>
		<li>SLIDER-01</li>
		<li>SLIDER-02</li>
		<li>SLIDER-03</li>
		<li>SLIDER-04</li>
		<li>SLIDER-05</li>
	</ul>
</div>

オプション一覧

公式サイトでも紹介されています
https://flickity.metafizzy.co/options.html

wrapAround
子要素の無限ループ：true or false(デフォルト)
autoPlay
自動スクロール：true or false(デフォルト)
trueのデフォルト設定は3秒。1000などミリ秒での数値で指定も可能
draggable
マウスドラッグ操作：true(デフォルト) or false
prevNextButtons
「前へ」「次へ」のナビボタン：true(デフォルト) or false
pageDots
スライダー下のドットナビ：true(デフォルト) or false
cellAlign
セル寄せ方向：center(デフォルト) or left or right
imagesLoaded
jQueryプラグイン［imagesLoaded］の使用：true(デフォルト) or false

関連記事