3.5.5. Views slideshow - Views を通じて jQuery のスライドショーとカルーセルを表示する。
Drupal 7 では、さまざまな jQuery スライドショーを Drupal と統合するモジュールが多くありました。おそらく最も人気で便利だったのは Views Slideshow です。Views Slideshow モジュールの Drupal 7 版には 1 つ欠点がありました。レスポンシブではなかったのです。Drupal 8 版ではこれが修正されたので、まさに Views Slideshow でスライドショーを作りましょう。
まず、Views Slideshow モジュール自体をダウンロードしてインストールする必要があります。また、Views Slideshow Cycle サブモジュールも有効にする必要があります:
https://www.drupal.org/project/views_slideshow
追加の jQuery ライブラリも必要です。それらは libraries フォルダーに置く必要があります。サイトのルートに libraries フォルダーがない場合は、作成します。
/libraries/jquery.hoverIntent/jquery.hoverIntent.js
https://github.com/briancherne/jquery-hoverIntent
/libraries/jquery.cycle/jquery.cycle.all.js
http://malsup.github.io/jquery.cycle.all.js
/libraries/json2/json2.js
https://raw.githubusercontent.com/douglascrockford/JSON-js/master/json2.js
これらのライブラリを追加したので、Views Slideshow を通じた出力で Views を追加できます。まず、素材タイプを作成するか、画像フィールドを持つ既存の素材タイプを使います。例えば、私はこのコンテンツタイプ Gallery と Photo フィールドを持っています。
次に Views を作成し、display 形式で Views Slideshow (Slideshow) を指定します:
これで、幅広い設定を持つスライドショーができます。Format 列の Settings をクリックして、Views Slideshow モジュールの機能を分析しましょう。
Row class row Views のデフォルト設定は、この場合 views-row がスライドです。ここでスライドのクラスを設定できます。
Style。
Skin。ここで Views Slideshow のデザインオプションを追加・選択できます。最初はデフォルトオプションだけが利用できますが、Views Slideshow のデザイン用に追加モジュールを入れられると思います。
https://www.drupal.org/node/909020
Slides。
スライドショーのタイプ。Views Slideshow が動作する jQuery プラグインを選択します。例えば FlexSlider Views Slideshow:
https://www.drupal.org/project/flexslider_views_slideshow
Slideshow Type。
ここにスライド切り替え設定があります。
Effect。スライドの切り替えはさまざまなエフェクトで行えます。scrollHorz に注目してください。これを設定すると、スライドショーは jQuery カルーセルのように見えます。
View Transition Advanced Options。
Timer delay。 スライド切り替えの間の時間。
Speed。 スライド切り替えの直接の時間。
Initial slide delay offset。 最初の遅延時間までのカウントダウン時間。おそらく、サイトの読み込みに時間がかかっていて、ユーザーがスライドが切り替わる前に最初のスライドを見る時間を持てるようにするために必要です。
Random。 スライドをランダムな順序で出力できます。
Action
ここでは、スライドショーの一時停止を調整したり、スライドショーの高さを調整したりできます。
Pause On Click。 スライドがクリックされたときに一時停止。
Pause on mouse click。 クリックでスライドショーを停止。
View Action Advanced Options
Start Slideshow Paused。 ホバーやマウスクリックで一時停止が解除されるまで、スライドショーは開始しません。
Start On Last Slide Viewed。 スライドショーの状態を記憶し、ユーザーがページに移動したときに現在のスライドを再び見られるようにします。
Pause When the Slideshow is Not Visible。 ユーザーがスライドショーを見ていない場合に停止します。ページの真ん中あたりにスライドショーがあるランディングページに便利です。
End slideshow after last slide。 スライドショーは最後に到達し、それ以上動作しません。
Make the slide window height fit the largest slide。 これはかなり興味深い設定です。スライドの高さが常に同じとは限りません。例えば、スライドショーの高さがスライドの高さに依存する場合、スライドを切り替えると、コンテンツがスライドショーに引っかかって絶えず動きます。これは煩わしいことがあります。しかし、最大のスライドが他よりずっと大きい場合、スライドショーとコンテンツの間の大きな隙間も見栄えが悪いかもしれません。したがって、スライドをおおよそ同じ高さに保つようにしてください。
Items per slide。 ここで 1 の代わりに一度に複数のスライドを表示するように設定すると、Views Slideshow を jQuery カルーセルのように見せられます。そしてこれに scrollHorz エフェクト（上記参照）を追加すると、これもカルーセルのように見えます。
Wait for all the slide images to load。 すべての画像が読み込まれるまで、スライドショーは切り替わりません。巨大な画像がある場合は、このチェックボックスを無効にすべきかもしれません。
Internet Explorer Tweaks
スライドショーにテキストや背景色がない場合は、これらの設定を含めなくても構いません。それに、これらの設定は IE でのみ機能します。
Advanced jQuery Cycle Plugin Settings 追加の jQuery Cycle カスタマイズについては、別のレッスンを行うつもりです。
Widgets 上と下の両方にスライド切り替えを表示できます。
Controls。 Next / Previous テキストリンクを含められます。追加の CSS を使って、これらのテキストリンクを戻る/進むにして、スライドショーを美しく見せられます。Views Slideshow のスタイリングは、Bootstrap ベースのテーマ作成のレッスンで見ていきます。
Slide counter。 スライドが全部でいくつあり、現在何が表示されているかを表示します。
Pager。 この設定を通じて、スライドショーの切り替えポイントを作成できます。そのために、Views result counter フィールドを出力に追加し、次にこのフィールドを Page Navigator フィールドで出力に選択します。ポイント切り替えの作り方も、Drupal 8 以降の Bootstrap テーマ作成のレッスンで見ていきます。
それまでは、Views Slideshow をベースにスライドショーを作ってみてください。うまくいかない場合は、コメントに書いてください。