Glide.js

JavaScript

軽量・フレキシブル・高速なスライダー&カルーセル実装「Glide.js」

Glide.jsは軽量・フレキシブル・高速なJavaScript ES6によるスライダー&カルーセルを実装できます。jQueryなどへの依存関係もなく、22KB以下(圧縮版で7KB以下)と軽量なところがいいですね。

Glide.js

デモ

デモではスライダー・カルーセルが横幅いっぱいに表示されていて、自動でスライドしていくようになっています。左右には前後移動できる矢印ボタンも設置されているので、ここから任意でスライドさせることも可能です。

また、スライダーの上にマウスオーバーするとカーソルが手のアイコンになり、ドラッグすることで前後にスライドさせるといったこともできます。

マークアップもシンプルに記述できるので手軽に使えるのもグッドです。ファイル容量も軽量なことから、スマホやタブレットなどモバイルからの閲覧にも最適ですね。

ライセンスはMITになっています。

Glide.js

no-image3Dキューブによる画像ギャラリー「3D Cube Image Gallery」前のページ

ホバーによるシンプルなドロップダウンメニューを実装できる「Bootstrap Dropdown Hover」次のページBootstrap Dropdown Hover

関連記事

  1. NO IMAGE

    JavaScript

    フレキシブルで軽量なJavaScriptモーダル実装「Vanilla Modal」

    Vanilla Modalは、フレキシブルでファイル容量も軽量なCSS…

  2. no-image
  3. jquery.inputmask

    JavaScript

    テキスト入力のマスク(入力補助)を作成する「jquery.inputmask」

    jquery.inputmaskは、ウェブページでのテキスト入力のマス…

  4. Tip

    JavaScript

    シンプルなUIで使いやすいツールチップ実装「Tip」

    TipはシンプルなUIによる使いやすいツールチップを実装することができ…

  5. FREVR

    JavaScript

    シンプルな無限スクロールを実装できるjQueryプラグイン「FREVR」

    FREVRはシンプルで軽量な無限スクロールの機能を実装することができる…

  6. JavaScript

    文字の半分をスタイルすることができるjQueryプラグイン「Splitchar」

    SplitcharというjQueryプラグインを使えば、文字の半分をス…

最近の記事

  1. ダミアン・ハースト 桜
  2. パッキングエリア
  3. あらびきソーセージパイ
  4. REACH フロス
PAGE TOP