carousel - カルーセル

アプリケーションに追加可能なスライドショーコンポーネントを提供します。

カテゴリ

レスポンシブ

構文

<xe:carousel id="id_text">content & slide nodes</xe:carousel>

このコンポーネントを使用すると、カルーセルの複数のスライドの自動循環または手動循環 (あるいはその両方) が可能になります。このコントロールは、さまざまな背景およびテキスト情報を表示するようにカスタマイズ可能なカルーセルのスライドノードをサポートします。カルーセルの左右には、スライドを手動でナビゲートするための矢印ボタンが用意されています。また、下部に一連のインディケータの円があり、その 1 つによって現在アクティブなスライドを示します。このインディケータの円をクリックして、特定のスライドに直接ジャンプすることもできます。

表 1. 必須プロパティ
プロパティ 説明
slidenodes スライドノードをカルーセルに追加することができます。カルーセルに追加できるスライドノードの数に制限はありません。各スライドには、設定可能な複数のプロパティがあります。それらのプロパティは「このトピック」にリストされています。
表 2. すべてのプロパティ
カテゴリ プロパティ 説明
basics autoCycle ブール値。 ユーザー介入なしでカルーセルによってスライドを自動的に循環させるかどうかを示します。 デフォルト値は false です。
  pause String 型。autoCycle が有効になっている場合に、マウスポインタがカルーセルに移動した際に自動循環を一時停止するかどうかを示します。autoCycle も有効になっている場合にこのプロパティを「true」または「hover」に設定すると、この機能が有効になります。これにより、エンドユーザーはカルーセルの循環を一時停止して、特定のスライドに集中し、カルーセルのナビゲーションを制御できます。デフォルト値は "hover" です。
  slideInterval 整数。スライド間を自動的に循環する際の間隔をミリ秒単位で定義します。このプロパティは、autoCycle が有効になっている場合にのみ適用されます。 デフォルト値は 5000 (5 秒) です。
  wrapped ブール値。 最後のスライドから最初のスライドにカルーセルが循環するかどうかを指定します。有効にした場合、自動循環か手動循環かにかかわらず、カルーセルは最後のスライドに達した後に次の循環要求で最初のスライドに戻ることになります。デフォルト値は、true です。
  heightExtraSmall 特に小さいデバイス (携帯電話など) に表示する際のカルーセルの高さを指定します。「極小」は Bootstrap が定義するサイズであり、768 ピクセル幅より小さい画面幅を持つデバイスに相当します。
  heightSmall 小さいデバイス (タブレットなど) に表示する際のカルーセルの高さを指定します。「小」は Bootstrap が定義するサイズであり、768 ピクセル幅から 992 ピクセル幅の間の画面幅を持つデバイスに相当します。
  heightMedium 中くらいのデバイス (ノート PC やデスクトップのモニタなど) に表示する際のカルーセルの高さを指定します。「中」は Bootstrap が定義するサイズであり、992 ピクセル幅から 1200 ピクセル幅の間の画面幅を持つデバイスに相当します。
  heightLarge 大きいデバイス (大型の高解像度モニタなど) に表示する際のカルーセルの高さを指定します。「大」は Bootstrap が定義するサイズであり、1200 ピクセル幅より大きい画面幅を持つデバイスに相当します。
  slidenodes スライドノードをカルーセルに追加することができます。カルーセルに追加できるスライドノードの数に制限はありません。各スライドノードには、設定可能な複数のプロパティがあります。それらのプロパティは「このトピック」にリストされています。
styling indicatorStyle CSS スタイルプロパティ。カルーセル上のインジケータサークルのビジュアルスタイルを定義します。
  indicatorStyleClass CSS スタイルクラスプロパティ。カルーセルのインジケータサークルに割り当てる CSS クラスを定義します。
  スタイル (style) CSS スタイルプロパティ。カルーセルのビジュアルスタイルを定義します。
  styleClass CSS スタイルクラスプロパティ。カルーセルに割り当てる CSS クラスを定義します。

使用法

特定のプロパティの詳細については、設計モードの際に [すべてのプロパティ] をクリックし、それぞれのカテゴリの下で目的のプロパティを探します。

例

このコードの例は、3 つのスライドノードを持つカルーセル制御を示しています。
<xe:carousel id="carousel1"
	autoCycle="true"
	slideInterval="3000"
	pause="true"
	wrapped="true"
	heightLarge="600px"
	heightMedium="500px"
	heightSmall="400px"
	heightExtraSmall="300px">
	<xe:this.slideNodes>
		<xe:slide headingText="Slide 1" 
			captionText="Caption 1"
			descriptionText="Description for the first slide"
			backgroundSrc="img1.jpg" 
			buttonHref="page1.xsp"
			buttonLabel="Learn More">
		</xe:slide>
		<xe:slide headingText="Slide 2" 
			captionText="Caption 2"
			descriptionText="Description for the second slide"
			backgroundSrc="img2.jpg>
		</xe:slide>
		<xe:slide headingText="Slide 3"
			backgroundColor="#428BCA" 
			buttonHref="page2.xsp"
			buttonLabel="Learn More">
		</xe:slide>
	</xe:this.slideNodes>
</xe:carousel>