スライダー&カルーセルで左寄せとかできるvanilla JS製「Glide.js」の使い方

スライダー&カルーセルのデザインパターンに、「左寄せ右チラ見せ」がある。画面左にピッタリ寄せて、右がわずかに見えている形態のものだが、これの実装が思いのほか面倒くさい。

左右チラ見せするプラグインならばいくつか思いつくのだが、片一方というのがなかなか候補にあがらない。これまでは前者の左右チラ見せできるプラグインで、苦労しながらもカスタマイズして片寄せを実現させてきた。カスタマイズといってもCSSの打ち消しが関の山なのだが。

そんな苦労を解消してくれそうなプラグイン「Glide.js」を提案させてほしい。

Glide.jsとは

Glide.jsは、スライダー&カルーセルライブラリだ。モジュール方式の実装により他のJavaScriptライブラリに依存しない。さらにvanilla JavaScriptおよびES6で記述された当該ライブラリは、極めて軽量で、高速に動作するとされている。

特徴

  • 他ライブラリに依存しない
  • モジュール読み込みができる
  • vanilla JavaScriptで極めて軽量
  • MITライセンス

インストール

Glide.jsの導入は、3種類の方法がある。プロジェクトの都合でいずれかを選択するとよいだろう。

npm

$ npm install @glidejs/glide

ダウンロード

CDN

使い方

Glide.jsを使うには、JavaScriptとStylesheet、スライダーを構成するHTMLの記述が必要となる。あなたのコーディングルールに従い、対象ページに配置してもらえると有り難い。

なおnpmでインストールしたケースを想定している。ローカルに設置している場合は、ファイルパスを修正してほしい。

Stylesheet

<link rel="stylesheet" href="node_modules/@glidejs/glide/dist/css/glide.core.min.css">
<link rel="stylesheet" href="node_modules/@glidejs/glide/dist/css/glide.theme.min.css">

HTML

<div class="glide">
  <div class="glide__track" data-glide-el="track">
    <ul class="glide__slides">
      <li class="glide__slide">0</li>
      <li class="glide__slide">1</li>
      <li class="glide__slide">2</li>
    </ul>
  </div>
</div>

JavaScript

<script src="node_modules/@glidejs/glide/dist/glide.min.js"></script>
<script>
  new Glide('.glide').mount();
</script>

Glide.jsの必要最低限の記述は以上となる。果たして、スタンダードなスライダーを実装することができた。

「左寄せ右チラ見せ」にする

そしてこのエントリー主題は「左寄せ右チラ見せ」だった。引き続き「左寄せ右チラ見せ」のカスタマイズをご覧いただこう。

new Glide('.glide', {
  startAt: 1,
  perView: 1,
  peek: {
    before: 0,
    after: 50
  }
}).mount();

左右の表示幅を制御するにはpeekプロパティを使用する。peekには、beforeとafterを与えることで、左右の見え幅を調整できる。上の例では、beforeに左側の見え幅を、afterに右側の見え幅を指定して、左寄せ右チラ見せを再現している。

まとめ

Glide.jsには依存関係がない。すでに前述しているのだが、これがとても良い。jQueryプラグインのようにjQueryがなければ使えないものと違って、Glide.js単独でスライダーorカルーセルを実装できるのだ。

これは昨今のフロントエンド開発において、非常に重要な要素ではないだろうか。一貫して「jQueryプラグインで!」ってわけにもいかないことは理解してもらえると思う。Reactを使うケースもあれば、Vue.jsが向いているときもある。

それぞれの状況に応じてスライダー&カルーセルプラグインを選定しておくのも悪くないが、Glide.jsならば一貫性のあるソースコードが書けるはずだ。

このエントリーが、あなたのクリエイティビティを刺激するものであると期待したい。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です