Flickityスライダーの使い方

PCはもちろん、スマホやタブレットのタッチデバイス操作にも対応したスライダーです。

まずはデモページをご覧ください。

⇒デモページ

ファイルは公式サイトよりダウンロードします。

⇒公式サイト

※以下、パスはファイルの場所に応じて変更してください。

◆html

<div id="main-gallery">
<div class="gallery-cell"><img src="img/01.jpg"></div>
<div class="gallery-cell"><img src="img/02.jpg"></div>
<div class="gallery-cell"><img src="img/03.jpg"></div>
</div>

◆cssの読み込み

<link href="css/flickity.css" rel="stylesheet" type="text/css">

◆jsの読み込み

<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>

<script src="js/flickity.pkgd.min.js"></script>

◆主なオプション

<script>
jQuery(function($){
$('#main-gallery').flickity({
accessibility: true,
// キーボード矢印キー操作
percentPosition: false,
// ピクセルではなくパーセントでの配置
wrapAround: true,
// 無限スクロール
contain: true,
// trueでラッパー要素の中で収まるようにスクロールする
cellAlign: 'center',
// セルの基準値
draggable: true,
// ドラッグやフリック操作
rightToLeft: false,
// trueでスライドの始まりが右
prevNextButtons: true,
// 前へ次へのボタン表示
pageDots: true,
// ドットナビゲーション表示
resize: true,
// サイズ変更
autoPlay: 5000,
// 秒間隔の自動スクロール
});
});
</script>

⇒デモページ

⇒デモページのファイル一式のダウンロードはこちら

Web担当屋サイトのメインビジュアルでも利用しています。