カルーセル

カルーセルは複数のアイテム（画像、コンテンツ等）をスライド形式で表示するコンポーネントです。自動スライド機能を持ちます。
v4.0.0で追加されました。

プロパティ

No	項目	入力値	デフォルト値	アクションプロパティ	タイプ	アクションデフォルト値	説明
1	ID	文字列	自動設定	id	string	自動設定	`[id]`プロパティはアクションで設定はできません。
2	幅	文字列	300	width	string	300	コンポーネントの幅
3	高さ	文字列	200	height	string	200	コンポーネントの高さ
4	X	文字列		x	string		X座標位置
5	Y	文字列		y	string		Y座標位置
6	アイコン色	文字列		iconColor	string		画像未設定時に表示されるアイコンの色
7	背景色	文字列		backgroundColor	string		画像未設定時に表示される背景色
8	イメージ表示方法	選択 1.全体埋め 2.全体表示 3.拡大縮小なし	全体埋め	objectFit	string	cover	イメージの表示方法
9	次へスライドを許可	真偽	ON	allowSlideNext	boolean	true	次のスライドへ進むことが可能
10	前へスライドを許可	真偽	ON	allowSlidePrev	boolean	true	前のスライドへ戻ることが可能
11	タッチ操作を許可	真偽	ON	allowTouchMove	boolean	true	スライドのタッチ操作設定
12	自動再生	オブジェクト	{enabled: false, delay: 3000}	autoPlay	object	{enabled: false, delay: 3000}	enabled：自動再生の設定 delay：スライド間の時間間隔（ミリ秒）このパラメータを設定しない場合、自動再生は無効になります。
13	エフェクト	選択 1.スライド 2.フェード 3.キューブ 4.カバーフロー 5.フリップ 6.カード	スライド	effect 1. slide 2. fade 3. cube 4. coverflow 5. flip 6. cards	string	slide	画像スライド時のエフェクト設定 1.スライド - スライドする 2.フェード - 画像がフェード 3.キューブ - 画像が回転する 4.カバーフロー - 中央のスライドを強調し、前後が立体的に並ぶ 5.フリップ - カードをめくるように回転して切り替わる 6.カード - カードが重なり、次のカードが前に出る
14	切り替え速度	数値	300	speed	number	300	スライド間の遷移時間（ミリ秒）
15	フリーモード	オブジェクト	{enabled: false, momentum: true, sticky: false}	freeMode	object	{enabled: false, momentum: true, sticky: false}	フリーモードの設定 enabled：フリーモードの有効化設定 momentum：慣性スクロールの有効化設定 sticky：スライド終了時に近いスライドで停止する
16	ループ	真偽	OFF	loop	boolean	false	スライドのループ設定
17	スライド方向	選択 1.水平 2.垂直	水平	direction 1.horizontal 2.vertical	string	horizontal	スライド方向の設定
18	ナビゲーション	真偽	ON	navigation	boolean	true	前へ・次へボタンの表示/非表示ボタンデザインについては変更できません。
19	同時表示スライド数	数値	1	slidesPerView	number	1	同時に表示するスライドの数
20	スライド移動単位	数値	1	slidesPerGroup	number	1	スライド移動単位の設定
21	スライド間隔	数値	0	spaceBetween	number	0	スライド間の余白の設定（px）
22	スワイプ感度	数値	5	threshold	number	5	スワイプ操作時に次のスライドへ移動する際の閾値
23	ページネーション	オブジェクト	{enabled: true, clickable: false, type: ‘bullets’}	pagination	object	{enabled: true, clickable: false, type: ‘bullets’}	ページネーションの設定 enabled：ページネーションの有効設定 clickable：ページネーションのクリック有効設定 type：ページネーションの種類（bullets、fraction、progressbarから選択可能）
24	スクロールバー	オブジェクト	{enabled: true, hide: true}	scrollbar	object	{enabled: true, hide: true}	スクロールバーの設定 enabled：スクロールバーの有効設定 hide：ユーザー操作時のみスクロールバーを表示する設定
25	表示	真偽	ON	visibility	boolean	true	コンポーネントの表示/非表示
26	値	オブジェクト配列	`[詳細1]`	value	array of object	`[詳細1]`	表示イメージの設定
27	初期スライド	数値	0	initialSlide	number	0	最初に表示するスライド `値`の最初に設定されたスライドが0となります。
28	クリックイベント	選択 1. なし 2. アクション	なし	clickEvent	string	none	クリック時のイベント
29	選択済みスライド	オブジェクト	`[詳細2]`	selected	object	`[詳細2]`	クリックしたスライド情報

[幅]、[高さ]プロパティ値には下記を入力できます。 px表示したい場合は数値のみ、%表示したい場合は単位に%を指定してください。下記以外を入力した場合の動作はサポート外になります。
- 数値
- 数値%
- calc()関数
[X]、[Y]プロパティ値には下記を入力できます。 px表示したい場合は数値のみを指定してください。下記以外を入力した場合の動作はサポート外になります。
- 数値
- calc()関数
calc()関数はCSSの関数で、計算を可能にする関数です。（例：calc(100% - 30px)） calc()関数で使用できる単位は 「%」と 「px」です。それ以外の単位（例：em,remなど）はサポート外になります。
calc()関数を用いてサイズを指定した際は、エディタ上の表示とアプリ上の見た目が異なることがあります。プレビューを用いてご確認ください。
[自動再生]がONの場合、指定した間隔で自動的にスライドが切り替わります。
[ループ]がONの場合、最後のスライドから次へボタンを押すと最初のスライドに戻ります。
[初期表示スライド]は0から開始します（0番目のスライドから表示）。

[詳細1] 値 (value)

デフォルトの状態は以下のように登録されています。[ADD]ボタンから登録します。削除する場合は、[選択]チェックボックスを選択して、[DELETE]ボタンをクリックします。
設定可能な文字列に制限はありません。

選択	ID	画像	タイトルバー	タイトル	サブタイトル	ポジション
チェックボックス	01	/carousel/image_01.png	チェックボックス：true			bottom
チェックボックス	02	/carousel/image_02.png	チェックボックス：true			bottom

valueはオブジェクトの配列形式になります。

[
  {
    "id": "01",
    "image": "/carousel/image_01.png",
    "titleBar": true,
    "title": "WebPerformer-NX カルーセルコンポーネント",
    "subTitle": "カルーセルは複数のアイテム（画像、コンテンツ等）をスライド形式で表示するコンポーネント",
    "position": "bottom"
  }
]

[詳細2] 選択済みスライド (selected)

selectedはオブジェクト形式になります。

{
  "id": "01",
  "image": "/carousel/image_01.png",
  "titleBar": true,
  "title": "WebPerformer-NX カルーセルコンポーネント",
  "subTitle": "カルーセルは複数のアイテム（画像、コンテンツ等）をスライド形式で表示するコンポーネント",
  "position": "bottom"
}

イベント

イベント名	説明
onclick	クリックした時にアクションを実行します。