Skip to main content

 

パターン

 

 

OutSystems

Carousel

コンテンツの一部を1か所で循環式のビューで強調表示することができる動的なウィジェットです。

Carouselでは、コンテンツの複数の部分を表示することができ、同時に画像のサブセットを循環式のビューで表示することで画面領域を最適化することができます。Carouselのナビゲーションコントロールは、表示されていない追加コンテンツを連想させます。これにより、ユーザーは確認を続けることができます。

使用方法

プレースホルダ内の要素は異なるアイテムに分割されます。動的コンテンツの場合は、プレースホルダ内で直接Listを使用します。デフォルトでは、リストアイテムがカルーセルアイテムになります。

  1. Carouselパターンをページにドラッグします。

  2. コンテンツをItemsプレースホルダ内に配置します。データベースのアイテムを含むカルーセルを使用するには、[Items]プレースホルダにListRecordsをドラッグしてカスタムコンテンツを作成します。

  3. パブリッシュしてテストします。

入力パラメータ

入力名 説明 必須 デフォルト値
Margin 各カルーセルアイテム間の距離。 Integer False 16
Padding 画面の端と画面上の表示項目との間の距離。 Integer False 0
Pagination Trueの場合、すべてのアイテムを表す点を設定します。これらをタップすると特定のアイテムに直接移動できます。 Boolean False True
Navigation Trueの場合、左右に移動する矢印を表示します。 Boolean False True
Autoplay Trueの場合、自動再生を有効化します。 Boolean False False
Rewind Carouselが最後に達してLoopが有効になっている場合、巻き戻しの効果を適用します。デフォルトの動作では、残りを巻き戻しせずに最初のアイテムを表示します。 Boolean False False
Loop Trueの場合、Carouselのスライドが最後になった後のスライドの連続表示を有効化します。 Boolean False False
InitialPosition 最初に表示する要素を設定します。 Integer False 0
ItemsDesktop デスクトップで同時に表示するアイテムの数。 DeviceConfig False 1
ItemsTablet タブレットで同時に表示するアイテムの数。 DeviceConfig False 1
ItemsPhone スマホで同時に表示するアイテムの数。 DeviceConfig False 1
ExtendedClass このブロックにカスタムスタイルクラスを追加します。Text False なし
AdvancedFormat 入力パラメータによって提供されるオプションのほかに、追加オプションを使用できます。.詳細については、https://github.com/ganlanyuan/tiny-sliderをご覧ください。例: { axis: 'vertical' } Text False なし

レイアウトおよびクラス

高度な設定

以下にウィジェットの高度なユースケースをいくつか示します。

矢印をカルーセルの外に配置する

矢印をカルーセルの外に配置するには、PaddingおよびMargin入力パラメータを変更します。この動作を実現するには、両方のパラメータを同じ値にする必要があります。パディングによってカルーセルの表示域の周囲にスペースができ、マージンによって要素が離れた位置に配置されるため、要素がカルーセル内に隠れます。

点のスタイルをカスタマイズする

カスタムCSSを使用して、カルーセルの点のスタイルを変更することができます。以下は、実行方法の2つの例です。アプリケーションで使用するには、CSSをコピーしてテーマ内に配置します。

例1:

.carousel .tns-nav > [aria-controls] {
    width: 16px;
    height: 2px;
    border-radius: 0;
}

例2:

.carousel .tns-nav > [aria-controls] {
    width: 12px;
    height: 6px;
    border-radius: 4px;
}

注記

ListRecordsのLine Separatorは[None]にする必要があります。

  • Was this article helpful?