XPagesでカルーセルを作成しよう

今回もIBM Notes/Domino 9.0.1 FP8関連の情報をお届けします。

本編では、手軽に設定できてビジュアルにもインパクトのあるカルーセルコントロールについて紹介します。

※カルーセル[carousel]とは、メリーゴーランドや空港の回転コンベアーなど、くるくると回るもので
狭いエリアに複数のコンテンツを表示させることができるすぐれものです。

有名なサイトだとapple社のトップページの部分に使われていますね。

XPagesでカルーセルを実装してみよう

カルーセルを実装するには以下の設定が必要です。

・アプリケーションのテーマを「Bootstrap」に設定する

この設定によりカルーセルに必要なjsファイル等が適用されます。

カルーセルが設定されたXPageを作成しよう

XPageを新規作成し、カルーセルを配置します。
カルーセルはレスポンシブコントロールの中にあります。

XPageにドラッグ＆ドロップします。

以下の設定を行います。

すべてのプロパティ→基本→autoCycleをtrueに設定、slideIntervalに次の画像にスライドするまでの時間を入力します。（mSec）

これで、自動的に画像が設定した時間で切り替わるようになります。

次はslideNodesを設定します。

以下の画像の赤枠をクリックするとslideNodesを追加/削除できますので、追加しましょう。

追加されたslideNodesを展開すると以下のようなプロパティが設定できるようになります。
カルーセルの主役となる画像を選択してみましょう。

slideNodes内のプロパティにあるbackgroundSrcにあるフォルダアイコンをクリックします。

イメージの選択をします。イメージがない場合は[追加]ボタンから追加することが出来ます。

以上で1スライド分の設定は完了です。

slideNodesをいくつか追加してXPageを保存します。

XPageをブラウザで表示させてみよう

作成したXPageをブラウザで閲覧してみましょう。

問題なく設定されていればカルーセルがうまく動いていると思います。
どうでしょうか？簡単に設定できたのではないでしょうか？

例えば「画像付き文書新着5件分の画像をカルーセルに読み込ませる」ということも出来ますので
工夫次第でDesignerで変更しなくても画像を変更することも可能ですね。

とても簡単な設定で実装できますので、是非開発してみてください。

手軽に設定できてビジュアルにもインパクトのある「カルーセル」コントロールについての紹介でした。