カルーセル機能とは、アプリのフリーレイアウト内で画像などのコンテンツを横にスライドさせて表示ができる機能です。
よりアプリらしい表現ができるようになります。

※画像は参考イメージです

上部画像でいうと、右の「フリーレイアウト機能」で設定いただいた3枚の画像が、左のカルーセル機能内で横にスライドして表示されます。
ループの指定や自動スクロール、時間指定など細かな設定も可能ですので、アプリ上の魅せ方は多岐に渡ります。

必要なアプリのバージョン

本機能をご利用いただくには、アプリが以下のバージョンとなっている必要がございます。

設定を行う前に、必ずアプリのバージョンをご確認ください。

対応しているバージョン未満の場合、管理画面の「アプリ登録」より『再申請』をいただくと、弊社にてバージョンアップの対応をさせていただきます。

★対応バージョン★
・iPhone…7.35以降
・Android…5.5.7以降

カルーセル内で表示できるもの

• 画像（バナーなど）
• 文字

※フリーレイアウト内のオプション機能（テキストコピー/エンベッド動画/ポップアップ等）は現在ご利用いただけません。

カルーセル内で指定できる要素

• ループの指定
  コンテンツが最後まで表示されたあとに最初の画像を表示するかどうかのループの有無を設定

• ページングの指定
  コンテンツを手動でスクロールし中途半端な位置で止まった場合に、画面内にコンテンツが収まるように吸着する動作の有無を設定

• コンテンツの揃え位置の指定
  コンテンツのサイズが異なる場合、上揃え・中央揃え・下揃えのいずれで表示するかを設定

• 自動スクロールの指定
  コンテンツの自動スクロールの有無を指定

• スクロールするまでの時間の指定
  スクロールするまでの時間（秒単位）を指定

【注意事項】
※ループ無しで設定した場合は自動スクロールを有にしても自動スクロールしない仕様となっております。
※自動スクロールは手動で動かした後はスクロールしない仕様となっております。（Androidは他タブ遷移でスクロールいたします）

カルーセル機能の使い方

機能を設定するための全体の流れとしては

1. 「カルーセル機能」内で表示させる「フリーレイアウト機能(表示元)」を作成する
2. 「カルーセル機能」を表示させたい「フリーレイアウト機能(表示先)」で設定をする

となります。

•  「カルーセル機能」内で表示させる「フリーレイアウト機能(表示元)」を作成する

  1. 新しいフリーレイアウト機能を用意し、コンテンツ管理から編集画面に移動します。

  2. 1ブロック目に、1枚目に表示される画像や文字を設定します。
     アピアランスも反映されるので、必要に応じてマージンやパディングといった余白やカラムなどもご設定ください。
     
     ※フリーレイアウト内のオプション機能（テキストコピー/エンベッド動画/ポップアップ等）はご利用いただけません

  3. 2ブロック目以降は、手順2のセルを複製し、追加していきます。
     ※セルを複製せずに新規セルを使った場合、カルーセルでの表示が崩れる可能性があります
     ※フリーレイアウト内のオプション機能（テキストコピー/エンベッド動画/ポップアップ等）はご利用いただけません

  4. 設定が完了したら、ページの下にある「保存する」ボタンを押します。

• 「カルーセル機能」を表示させたい「フリーレイアウト機能(表示先)」で設定をする

  1. コンテンツ管理画面の右上あたりにある「リンク生成」ボタンを押します。
     ※「プッシュ通知」の左隣にあるボタンです

  2. 先ほど作成した、カルーセル元になるフリーレイアウト機能を押します。

  3. 上に表示されたB内「/tab/bio/xxxxxx」の文字列が必要なコードになるので、コピーして控えます。
     xxxxxxはコンテンツごとにユニークなIDになりますので、以下はあくまで参考例となります。
     

  4. コンテンツ管理から、カルーセルを設置したいフリーレイアウト機能を開きます。

  5. カルーセルを設定する位置に空のブロックを用意し、そのブロックのタイトルに
     horizontal_scroll(カルーセル元ページのコード,カルーセルで指定できる要素 ①,②,③,④,⑤)を入れます。
     
     各設定の詳細は以下となります。

     ① ループの指定	（0：ループしない、1：ループする）
     ② ページングの指定	（0：ページングしない、1：ページングする）
     ③ コンテンツの揃え位置の指定	（0：センター 、1：トップ、2：ボトム）
     ④ 自動スクロールの指定	（0：自動スクロールしない、1：自動スクロールする）
     ⑤スクロールするまでの時間を指定	（例）5  → 5秒でスクロールさせる ※推奨は4〜7秒程度です）

  6. 設定が完了したら、ページの下部にある「保存する」ボタンを押して完了になります。