この文章は Salesforce 機械翻訳システムを使用して翻訳されました。詳細はこちらをご参照ください。

lightning:carousel

一度に 1 つずつ表示される画像のコレクション。

lightning:carousel コンポーネントは 1 つのコンテナに一連の画像を表示します。一度に表示される画像は 1 つだけで、カルーセルインジケータをクリックすることで他の画像を選択できます。カルーセルはデフォルトで自動��にスクロールします。自動スクロールは disableAutoScroll="true" を設定することで無効にできます。

このコンポーネントは、Lightning Design System のカルーセルからスタイル設定を継承します。

このコンポーネントの追加スタイルを実装するには、Lightning Design System ヘルパークラスを使用します。

次の例では、3 つの画像を持つ基本的なカルーセルを作成します。

1<aura:component>
2   <lightning:carousel>
3     <lightning:carouselImage
4        src = "path/to/carousel-01.jpg"
5        header = "First card"
6        description = "First card description"
7        alternativeText = "This is a card"></lightning:carouselImage>
8    <lightning:carouselImage
9        src = "path/to/carousel-02.jpg"
10        header = "Second card"
11        description = "Second card description"
12        alternativeText = "This is a card">
13    </lightning:carouselImage>
14    <lightning:carouselImage
15        src = "path/to/carousel-03.jpg"
16        header = "Third card"
17        description = "Third card description"
18        alternativeText = "This is a card">
19    </lightning:carouselImage>
20   </lightning:carousel>
21</aura:component>

使用上の考慮事項

デフォルトでは lightning:carousel の最初の画像が表示されます。組織で画像を使用するには、静的リソースの設定ページで、画像を静的リソースとしてアップロードします。src 属性で {!$Resource.image}" 構文を使用します。ここで、image は、設定ページの Name 項目で指定した名前です。画像のパスが無効な場合や、ユーザがオフラインなどの理由で画像が読み込まれなかった場合は、画像の代わりに説明および代替テキストが表示されます。

属性

属性名	属性型	説明
`body`	Component[]	コンポーネントのボディ。マークアップでは、これはタグのボディに含まれるすべてを指します。
`class`	String	コンポーネントの基本クラスに加え、外部要素の CSS クラス。
`disableAutoRefresh`	Boolean	カルーセルの最後の項目が表示された後にまた最初からループすることを無効にするかどうかを指定します。デフォルト値は false です。
`disableAutoScroll`	Boolean	自動スクロールを無効にするかどうかを指定します。デフォルト値は false です。
`scrollDuration`	Integer	自動スクロールの表示時間。デフォルトは 5 秒で、5 秒後に次の画像が表示されます。
`title`	String	マウスポインタが要素に重ねられたときにツールチップテキストを表示します。

Lightning コンポーネント開発者ガイド

lightning:carousel

属性