これなら簡単！フリック操作に対応したスライダー・カルーセルを実装できるJavaScriptライブラリ -Flicking

フリック操作に対応したスライダー・カルーセルを実装できるJavaScriptライブラリを紹介します。スマホのフリック操作だけでなく、デスクトップのクリックやドラッグ操作にも対応しています。

シンプルなHTMLで簡単に実装でき、Vue、React、Angularもサポート、単体でも動作するJavaScriptです。

Flicking
Flicking -GitHub

• Flickingの特徴
• Flickingのデモ
• Flickingの使い方

Flickingの特徴

Flickingはその名の通り、フリック操作に対応したスライダー・カルーセルを簡単に実装できるJavaScriptライブラリです。新しくなったFlicking 3はフレキシブルで、さまざまな拡張機能を備えており、無限フリック・フリースクロール・スナップ・バウンドをはじめ、異なるサイズのパネル、静止位置のカスタマイズなどもできます。

• 実装が簡単で、高性能なスライダー・カルーセル。
• 3つのオプション(renderOnlyVisible、isEqualsSize、isConstantSize)で、カルーセルのパフォーマンスを向上させることができます。
• スクロールの移動にはさまざまなタイプが揃っています。
• 主要なフレームワーク (Vue、React、Angular) をサポート。
• MITライセンスで、商用プロジェクトでも無料で利用できます。

Flickingのデモ

デモではFlickingのさまざまなフリック（スマホだけでなく、デスクトップのドラッグにも対応）を楽しめます。まずは、シンプルなデモから。

See the Pen
Flicking 3.0 try by egjs (@egjs)
on CodePen.

前述のアニメーションgifのデモ。下記のサイズだとちょっと厳しいので、右上の「Edit on CodePen」をクリックしてご覧ください。

See the Pen
Flicking examples full page by egjs (@egjs)
on CodePen.

デモは他にもたくさん用意されています。

Flickingの特徴

Flickingのプロジェクト

Flickingの使い方

インストール

NPM経由でインストールできます。

外部ファイル

HTMLに当スクリプトを外部ファイルとして記述します。

HTML

カルーセルを実装するための最小限のHTMLは、下記の通りです。
パネルにposition: absolute;を使用するため、ラッパーまたはパネルのいずれかの高さの値を固定する必要があります。

もしくは

JavaScript

スクリプトを初期化して、実行します。

詳しい実装方法は、ドキュメントをご覧ください。

Flickingのドキュメント