Velo by Wix CMSとスライドショー

Wix専門のWeb制作会社、合同会社アクトワンのVelo開発部です！
今回はWixのスライドショーパーツをVeloコーディングを用いてCMSコレクションに接続する方法について解説致します。
ちなみに、スライドショーはノーコードでのCMS接続が不可です。
データセットに接続するアイコン自体存在しません。
(プロギャラリーアプリを使用する方法もありますが、コンテナではないため、ボタンパーツを配置したりといったアレンジができません。)

ホームぺージ制作 アクトワン | 大阪府 和泉市 | Wix専門 Web制作

スライドショーとは

スライドショーは画像やテキスト等をスライドの形で表示してくれる便利なエレメントです。
特に自動再生をONにしておくと自然にユーザーの目を引き非常に効果的です。
表示されるスライドは枚数や背景等をあらかじめ手動で設定できるようになっています。

スライドショーについて詳しく解説した動画はコチラ

Veloを使うことでも、その背景やスライド上のエレメントを設定することが可能です。
ここではスライドの背景にCMSに登録している画像を使ってみましょう。以下のようにCMS(slideCollection)には３つの画像が登録されています。この画像フィールドのキーは image になっています。

３つの画像を持つ slideCollection

この画像を表示するための以下のようにスライドショー(slideshow)をページ上に設置します。画像は３つなのでスライドも３枚用意しておきます。

３枚のスライドを持つスライドショー

このスライドショーに、以下のコーディングを行います。要点は９行目と１０行目で、各スライドに forEach( ) メソッドでCMSの画像をポピュレートするところです。

スライドに画像をポピュレイト

任意個数の画像をスライドショーに表示する

さて、スライドショーのスライドの枚数は手動でしか設定できません。従ってVeloを使ってCMSの画像を設定する場合は、スライドの枚数とCMSに登録されている画像の個数が一致していなければいけません。VeloでCMSの状況に応じてスライドの枚数を調整する事は出来ないのです。上記コード７行目のプロパティ .slides は読み取り専用で書き込みはできません。

では、CMS画像の個数が日々変化する場合、その画像をスライドショーにするにはどうすればよいのでしょうか。まさかその度にスライドの枚数を手動で変えるなんてことは止めましょう。

この問題を解決するためにはプリセットの自動再生ではなく、コーディングでスライドを切り替えて自動再生のように見せかける擬似自動再生を作ります。スライドショーには onChange( ) イベントと next( ) メソッドがありますのでこれを利用します。

コーディングの原理

CMS画像は何個あっても構いませんし、その個数が日々変動しても構いません。一方、スライドショーのスライドは２枚以上であれば何枚でも構いません。ですので最小の２枚にしておきます。

５つの画像を持つ slideCollection

２枚のスライドを持つスライドショー

擬似自動再生のためのコーディング原理は以下の２つで、非常に単純です。
（１）ページの読み込み時に next( ) メソッドを実行する。
（２）onChange( ) イベントが発動されたら next( ) メソッドを実行する。

next( ) を実行するとスライドが変わるので onChange( ) イベントが発動します。また next( ) では最終スライドの次は先頭スライドに戻ります。従ってこの２つのコーディングでスライドショーが永遠に再生されます。後は、表示されるスライドにCMSの画像を次々とポピュレートするだけです。

ただ、CMS画像も無限ではありませんのでそこは工夫が必要です。CMSの全画像の表示が終われば最初の画像に戻ってループしなければいけません。その制御には if 文でもよいですが、余りの計算が大変便利です。以下にコーディングを見てみましょう。

$w.onReady( ) のコーディング