Carouselパターン

点をカスタマイズする

CSSを使用して点のルックアンドフィールをカスタマイズできます。

例1:

.carousel .carousel-dots-container .carousel-dot.active {
     opacity: 1;
    width: 16px;
    height: 2px;
    margin-top: 2px;
    transition: opacity 275ms ease-out;
}


.carousel .carousel-dots-container .carousel-dot {
    border-radius: 0;
    height: 1px;
    margin: 3px 3px;
    width: 8px;
    transition: opacity 275ms ease-out;
}

例2:

.carousel-dots-container .carousel-dot {
     background: #fff;
    border: 0px solid #fff;
    height: 4px;
    margin: 3px;
    opacity: .5;
    width: 4px;
}


.carousel-dots-container .carousel-dot.active {
    background: transparent;
    border: 1px solid #fff;
    opacity: 1;
}

列内でカルーセルを使用する

Columnsパターン内でCarouselを使用する場合、以下のスタイルをCSSに追加して列のオーバーフローを修正する 必要があります。

.col {
    overflow: hidden;
}

カルーセルアイテムのCurrentPositionを取得する

1. 画面でIntegerローカル変数（Positionなど）を作成します。

2. ブロックのOnItemChangeイベントで、ハンドラに対応する新しいクライアントアクションを作成します（CarouselCurrentPosition）。
   a. アクションは変数Indexを受け取ります。これはCarousel内での現在の位置を示すイベントです。

3. Assignノードをドラッグし、Position（ローカル変数）をIndexに設定します。

Carouselパターンを使用してオンボーディング画面を作成する

一般的なオンボーディング画面では、画面全体の高さで表示されるカルーセルを使用していくつかのアイテムのスライドを表示し、最後のスライドにアプリの使用開始ボタンを表示します。

カルーセルを使用して独自のオンボーディング画面を作成するには、以下の手順を実行します。

移動ボタンを含むカルーセルを作成する

このパターンにはパブリックアクションが含まれます。このアクションはCarouselの独自のナビゲーション（Next、Previous、GoTo）なしで使用できます。 このユースケースでは、カルーセル内を移動するボタンのみを使用します。

1.アクションを作成し、Next、Previous、GoToのいずれかのパブリックアクションをドラッグします。

2.ボタンを作成し、onClickイベントと作成したアクションを関連付けます。

3.以下の画像は、使用可能なすべてのアクションを示しています。

CarouselでListRemoveを作成する

このパターンには、パターン内のすべての変数と位置を更新するUpdateCarouselパブリックアクションが含まれています。

1.アクションを作成し、ListRemoveアクションおよびCarouselUpdateアクションをドラッグします。

2.ListRemoveOnClickボタンを作成し、作成したアクションを関連付けます。

3.以下の画像に例を示します。