カルーセル
Carousel UIパターンを使用すると、複数のアイテムを水平方向のスライドに表示できます。小さい画面で水平方向のスライドを作成する場合は、このパターンが適しています。プレースホルダ内に直接Listを配置して、動的コンテンツでこのパターンを使用することもできます。
Carousel UIパターンの使用方法
-
Service Studioのツールボックスで
Carouselを検索します。Carouselウィジェットが表示されます。
-
ツールボックスから、Carouselウィジェットをアプリケーション画面のメインコンテンツ領域にドラッグします。
デフォルトで、Carouselウィジェットには［Carousel Items］プレースホルダ、［list list-group］プレースホルダ、Imageウィジェットが含まれています。
-
［Carousel Items］プレースホルダにコンテンツを追加します。
この例では、list list-groupを削除し、Imageウィジェットを3つ追加しています。画像のリストを追加することもできます。
-
要素ツリーでImageウィジェットを選択し、［Properties］タブの［Image］ドロップダウンでCarouselに含める画像を選択またはインポートします。
注記: この例では、画像のTypeプロパティはLocal Imageに設定されています。外部およびバイナリデータの画像を追加することもできます。
-
Carouselに含める画像ごとに手順4を繰り返します。
-
要素ツリーでCarouselウィジェットを選択し、［Properties］タブで関連する（オプションの）プロパティを設定します。たとえば、ナビゲーション矢印やドットなどを設定します。
これらの手順を実行してモジュールをパブリッシュした後、アプリでパターンをテストできます。
プロパティ
| プロパティ | 説明 |
|---|---|
| Navigation（Boolean型）: オプション | 左右に移動する矢印ボタンを有効化または無効化します。 例
|
| Dots（Boolean型）:オプション | Carousel上のアイテムを表すナビゲーションドットを有効化または無効化します。 例
|
| Margin（Integer型）:オプション | 各カルーセルアイテム間の距離を設定します。 例
|
| Padding（Integer型）:オプション | 画面の端と画面上の表示項目との間の距離を設定します。 例
|
| AutoPlay（Autoplay Identifier型）:オプション | Carousel内のアイテムを自動的に表示する自動再生機能を有効化または無効化します。自動再生速度も設定できます。以下の自動再生の値が事前定義されています。
例
|
| Scale（Boolean型）:オプション | この設定はアクティブなカルーセルアイテムに対して使用します。Trueに設定すると、画像を移動する際に、アクティブなアイテムのサイズが減り始め、次にアクティブなアイテムになる要素のサイズが増えます。デフォルト値はFalse。 |
| Loop（Boolean型）:オプション | Trueに設定すると、Carouselが最後のアイテムに達すると最初のアイテムにループし、再びすべてのアイテムの表示が始まります。Falseに設定すると、最後のアイテムに達するとカルーセルアイテムのスライドが終了します。これがデフォルト値です。 |
| Center（Boolean形）:オプション | Trueに設定すると、Carouselのアクティブなアイテムが水平方向の中央に表示されます。Falseに設定すると、アクティブなアイテムが水平方向の中央に表示されません。これがデフォルト値です。 |
| InitialPosition（Integer型）:オプション | Carouselに最初に表示される要素を設定します。 例
|
| ItemsPhone（Integer型）:オプション | スマホ上で同時に表示されるカルーセルアイテムの数。 例
|
| ItemsTablet（Integer型）:オプション | タブレット上で同時に表示されるカルーセルアイテムの数。 例
|
| ItemsDesktop（Integer型）: オプション | デスクトップ上で同時に表示されるカルーセルアイテムの数。 例
|
他のパターンとの互換性
TabsやStacked Cardsなど、スワップイベントを使用するパターン内でのCarouselの使用は避けてください。
