[JS]タッチ操作にも対応した快適なスライダー・カルーセルを実装する軽量スクリプト -Glide.js
Post on:2018年4月16日
sponsors
jQueryなどのスクリプトやアニメーションのCSSに依存せずに、レスポンシブ対応の快適なスライダー・カルーセルを実装する軽量のスクリプトを紹介します。
スライダーは最後を表示した際に1枚目に巻き戻し、カルーセルは最後を表示した際に巻き戻さずにそのまま1枚目を表示します。
Glide.jsの特徴
Glide.jsは他のスクリプトに依存性がないJavaScript ES6で実装されたスライダー・カルーセルです。軽量で快適に動作し、カスタマイズ性にも優れています。
-
- 依存性はなし
- スライダー・カルーセルに必要なものはすべて含まれています。
-
- 超軽量
- 22kb（gzip: 7kb)にすべての機能が搭載されています。
-
- モジュール式
- スクリプトはモジュール式。必要のない機能を削除すると、さらに軽量に。
-
- 拡張機能
- 機能を追加したい場合は、プラグインとして加えることもできます。
-
- バンドル対応
- WebPackやRollupにも対応しています。
-
- デザインのカスタマイズ
- Sassが用意されており、デザインのカスタマイズも容易です。
-
- 商用利用無料
- MITライセンスです。
Glide.jsのデモ
デモでは、Glide.jsの快適なスライダー・カルーセルを楽しめます。
オプションも豊富で、さまざまな機能が用意されています。
デモ下のセレクトボックスで、機能を変更できます。
Glide.jsの使い方
Step 1: 外部ファイル
当スクリプトとスタイルシートを外部ファイルとして記述します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<head> <!-- コア スタイルシート --> <link rel="stylesheet" href="css/glide.core.min.css"> <!-- オプション: テーマ用スタイルシート --> <link rel="stylesheet" href="css/glide.theme.min.css"> </head> <body> ... コンテンツ ... <script src="js/glide.min.js"></script> </body> |
Step 2: HTML
HTMLの基本構成です。
「data-glide-el="track"」を加えるのを忘れないようにしてください。
|
1 2 3 4 5 6 7 8 9 |
<div class="glide"> <div data-glide-el="track" class="glide__track"> <ul class="glide__slides"> <li class="glide__slide"></li> <li class="glide__slide"></li> <li class="glide__slide"></li> </ul> </div> </div> |
Step 3: JavaScript
ラッパーを指定し、スクリプトを実行します。
|
1 2 3 |
<script> new Glide('.glide').mount() </script> |
sponsors
