[JS]ユーザーが快適に操作できることにこだわった、タッチデバイスにも対応のスライダーを実装するスクリプト -Flickity

Post on:2015年1月29日

画像やコンテンツのスライダーをスマホ・タブレットなどのタッチデバイスでの標準操作にも対応したいと考えている人にぴったりの単体で動作するスクリプトを紹介します。
※jQueryのプラグインとして利用することも可能です。

iPadで試してみたところ、タッチもフリックも非常に快適！
デスクトップでは、キーボードでの操作やドラッグにも対応しています。

サイトのキャプチャ

Flickity
Flickity -GitHub

Flickityのデモ

デモはスマホ・タブレットのタッチ・フリック操作だけでなく、デスクトップのクリック・ドラッグやキーボード操作にも対応しています。

デモのキャプチャ

デモページ: images

スライダーはスクリプトのオプションで、簡単にさまざまなスタイルを実装できます。

デモのキャプチャ

デモページ: セルのスタイル

デモのキャプチャ

デモページ: 無限スクロール

デモのキャプチャ

デモページ: 前と次のボタン

デモのキャプチャ

デモページ: ナビゲーション

Flickityの使い方

Step 1: 外部ファイル

当スクリプトとスタイルシートを外部ファイルとして記述します。
※jQueryのプラグインとして利用する時は、jquery.jsを加えます。

<head>
  ...
  <link rel="stylesheet" href="/path/to/flickity.css" media="screen">
  <script src="/path/to/flickity.pkgd.min.js"></script>
</head>

Step 2: HTML

各スライドをdiv要素などで実装し、ラッパーで内包します。

<div id="main-gallery">
  <div class="gallery-cell">...</div>
  <div class="gallery-cell">...</div>
  <div class="gallery-cell">...</div>
  ...
</div>

Step 3: JavaScript

ラッパーを指定し、スクリプトを実行します。

var elem = document.querySelector('#main-gallery');
var flicky = new Flickity( elem, {
  // options
  cellAlign: 'left',
  contain: true
});

jQueryを使うと、記述が少しだけ簡単になります。

$('#main-gallery').flickity({
  // options
  cellAlign: 'left',
  contain: true
});

スクリプトのオプションは、こんな感じです。

accessibility: true,
// キーボード操作（左右の矢印キー）

cellSelector: undefined,
// セル要素のセレクタ

draggable: true,
// ドラッグやフリック操作

initialIndex: 0,
// 最初に表示されるセル

percentPosition: true,
// ピクセルではなくパーセントでの配置

pageDots: true,
// ドットナビゲーション

prevNextButtons: true,
// 前・次のボタン

resizeBound: true,
// リサイズされた時のサイズ変更の有無

rightToLeft: false
// 右から左への言語への対応

sponsors

top of page

©2024 coliss