スライダー＆カルーセルのデザインパターンに、「左寄せ右チラ見せ」がある。画面左にピッタリ寄せて、右がわずかに見えている形態のものだが、これの実装が思いのほか面倒くさい。
左右チラ見せするプラグインならばいくつか思いつくのだが、片一方というのがなかなか候補にあがらない。これまでは前者の左右チラ見せできるプラグインで、苦労しながらもカスタマイズして片寄せを実現させてきた。カスタマイズといっても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ならば一貫性のあるソースコードが書けるはずだ。
このエントリーが、あなたのクリエイティビティを刺激するものであると期待したい。