[JS]タッチ操作にも対応した快適なスライダー・カルーセルを実装する軽量スクリプト -Glide.js

jQueryなどのスクリプトやアニメーションのCSSに依存せずに、レスポンシブ対応の快適なスライダー・カルーセルを実装する軽量のスクリプトを紹介します。

スライダーは最後を表示した際に1枚目に巻き戻し、カルーセルは最後を表示した際に巻き戻さずにそのまま1枚目を表示します。

サイトのキャプチャ

Glide.js
Glide.js -GitHub

Glide.jsの特徴

Glide.jsは他のスクリプトに依存性がないJavaScript ES6で実装されたスライダー・カルーセルです。軽量で快適に動作し、カスタマイズ性にも優れています。

  • 依存性はなし
    スライダー・カルーセルに必要なものはすべて含まれています。
  • 超軽量
    22kb(gzip: 7kb)にすべての機能が搭載されています。
  • モジュール式
    スクリプトはモジュール式。必要のない機能を削除すると、さらに軽量に。
  • 拡張機能
    機能を追加したい場合は、プラグインとして加えることもできます。
  • バンドル対応
    WebPackやRollupにも対応しています。
  • デザインのカスタマイズ
    Sassが用意されており、デザインのカスタマイズも容易です。
  • 商用利用無料
    MITライセンスです。

Glide.jsのデモ

デモでは、Glide.jsの快適なスライダー・カルーセルを楽しめます。

サイトのキャプチャ

Glide.jsのドキュメント

オプションも豊富で、さまざまな機能が用意されています。
デモ下のセレクトボックスで、機能を変更できます。

サイトのキャプチャ

Glide.jsのドキュメント: オプション

Glide.jsの使い方

Step 1: 外部ファイル

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

Step 2: HTML

HTMLの基本構成です。
「data-glide-el="track"」を加えるのを忘れないようにしてください。

Step 3: JavaScript

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

sponsors

top of page

©2018 coliss