メニューをページトップに配置し、その直下にスライダーを置く。メニューは水平方向へスライドすることができ、溢れたメニュー項目は非表示になる。この構造はメニュー項目数の制限を与えない。メニューをスワイプ(またはマウス・ドラッグ)させて非表示の項目を引き出して、該当のメニュー項目をタップ(またはクリック)してコンテンツ部分をスクロールさせて表示する。コンテンツ部分はスワイプ(またはマウス・ドラッグ)させても捲れるように表示させる。
以上のようなことが想定される要件を満たすものでであり、これをプラグインまたはCSSでどこまで実現できるかをメインに置いて検証していこう。
事前情報として、マウス・ドラッグでスクロールさせるには、jQueryやJavaScriptが不可欠である。これに代わる解決策があればアプローチしていきたい。また、今日此の頃のノートパソコンはWindows 10を搭載していれば、タッチパッドを装備しているのでマウス操作に対して過敏になる必要が減ってきたかもしれないのだが…。
既に作成して使い込んだものが五つ(slick.js、CSS Slider 1、Slider Pro、reveal.js、swiper)、新規に起こしたものが三つ(flickity.js、jQuery+scroll-snap、CSS Slider 2)あり、スライダーに関連する全てのものを取り上げた。メニュー、マウス・ドラッグ、スワイプ、スライダーという組み合わせの集大成での比較となる。上のタブを選択すると各スラーダーのリンクが表示される。
メニュー項目とスライダーをマウス・ドラッグとスワイプでスライドできる(flickity.js)…今回の希望する範疇の機能を全て満たした。メニューでは右側の一つ目か二つ目をタップ(またはクリック)すれば項目が繰り下がる。また、左側の一つ目か二つ目をタップ(またはクリック)すれば項目が繰り上がる。
タッチパッドが搭載されていないデスクトップPC、タブレット、スマートフォン、全てのデバイスで快適に動作させるには最適な構成になっている。
メニュー項目をマウス・ドラッグとスワイプでスライドできる、スライダーはスワイプできる(slick.js)…コンテンツが収まるスライダーのマウス・ドラッグの機能が足りないが、多くのオプションが使いやすさを万全なものにしている。slick.jsを使ったスライダーでは多くの機能を盛り込んで、共存できるものを検証した。
メニュー項目とスライダーをスワイプできる(CSS Slider 1)…各々のスライダーの上に順番を変更したメニューを一つずつ設置しているのがポイントであり、scroll-snap-typeとscroll-behaviorを使っている。項目を順番にタップ(またはクリック)すると項目がひとつ繰り上がる。
メニュー部分にスクロールをマウス・ドラッグで可能にする(jQueryプラグイン)を取り入れてCSS Slider 1と合体させたもの…状況次第で更に改善していく予定である。全てのブラウザでscroll-behavior: smooth;が使えるようになることを祈るばかりだが、果たしてどうだろう？
メニュー項目よりタップ(またはクリック)するとスライダーがスクロールする(CSS Slider 2)…scroll-behavior: smooth;を解釈しないブラウザにCSSだけでスクロールの演出を加えた部分が特筆すべき強味である。
スワイプの機能は上下左右に機能する。マウス・ドラッグも使える(swiper)…サイズを定めたパネル・スライダーであるから、高さのあるものは収まらない。
スワイプの機能は上下左右に機能する。pinch in(Esc)とpinch out(Esc)で一覧の開閉ができる(reveal.js)…マウス・ドラッグは使えない。矢印をクリックするかスワイプする。プレゼンテーション向き。
イメージ・スライダーの代表格。過去にとてもお世話になった(Slider Pro)…メニュー、スライダー共にマウス・ドラッグ(スワイプ)が使える。溢れたメニュー項目は非表示になり、非表示近辺のメニューをタップ(またはクリック)するとメニューがひとつ繰り上がる(または繰り下がる)。デジタルサイネージや館内案内向き。動画、レスポンシブ対応。
Slider Pro を実装する方法については GitHub をご覧ください…イメージ・ギャラリーという位置づけが定着している Slider Pro だが、コンテンツ・スライダーとしても当然使える。何が出来るかを始めるときは、手始めに上のリンクがとても役に立つ。