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

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

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

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

Flicking
Flicking -GitHub

Flickingの特徴

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

Flickingの特徴
  • 実装が簡単で、高性能なスライダー・カルーセル。
  • 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のドキュメント

sponsors

top of page

©2021 coliss