1. React用JS SDK Search

回転木馬

日本語翻訳に関する免責事項

このページの翻訳はAIによって自動的に行われました。可能な限り正確な翻訳を心掛けていますが、原文と異なる表現や解釈が含まれる場合があります。正確で公式な情報については、必ず英語の原文をご参照ください。

Carouselプリミティブコンポーネントは、コンテンツのコレクション内を移動するスライドショーです。一連の画像、テキスト、またはカスタムマークアップで動作します。前/次のコントロールをサポートします。このコンポーネントは、スライドの寸法を自動的に正規化しません。そのため、コンテンツのサイズを適切に設定するために、追加のユーティリティまたはカスタムスタイルを使用する必要があります。

このトピックでは、CardViewSwitcherプリミティブ コンポーネントの解剖学、APIリファレンス、およびバリエーションについて説明します。

解剖学

 
import { Carousel } from '@sitecore-search/ui';

const MyCarouselComponent = () => (
  <Carousel.Root>
    <Carousel.Slides>
      <Carousel.Slide aria-label="Slide 1">
        Slide 1
      </Carousel.Slide>
      <Carousel.Slide aria-label="Slide 2">
        Slide 2
      </Carousel.Slide>
    </Carousel.Slides>

    <Carousel.Previous aria-label="Show previous">
      Previous
    </Carousel.Previous>

    <Carousel.Next aria-label="Show next">
      Next
    </Carousel.Next>
  </Carousel.Root>
);

コンポーネントの使用

このセクションでは、Carouselプリミティブ コンポーネントの使用方法について説明します。これらのコードブロックをコピーしてReactアプリケーションに貼り付けることができます。

Screenshot of a styled Carousel primitive component.
() => {
  return (
    <StoryFrame>
      <div style={{ position: 'relative', width: '100%' }}>
        <Slider>
          <SliderWrapper tabIndex={0}>
            <SlideWrapper>
              <SlideContent style={{ background: 'red' }}18791275782<11879127578/SlideContent>
            </SlideWrapper>
            <SlideWrapper>
              <SlideContent style={{ background: 'blue' }}>2</SlideContent>
            </SlideWrapper>
            <SlideWrapper>
              <SlideContent style={{ background: 'yellow' }}>3</SlideContent>
            </SlideWrapper>
            <SlideWrapper>
              <SlideContent style={{ background: 'turquoise' }}>4</SlideContent>
            </SlideWrapper>
            <SlideWrapper>
              <SlideContent style={{ background: 'grey' }}>5</SlideContent>
            </SlideWrapper>
            <SlideWrapper>
              <SlideContent style={{ background: 'pink' }}>6</SlideContent>
            </SlideWrapper>
            <SlideWrapper>
              <SlideContent style={{ background: 'green' }}>7</SlideContent>
            </SlideWrapper>
          </SliderWrapper>

          <PreviousControl aria-label="Show previous demo" tabIndex={-1}>
            <ArrowLeftIcon />
          </PreviousControl>

          <NextControl aria-label="Show next demo" tabIndex={-1}>
            <ArrowRightIcon />
          </NextControl>
        </Slider>
      </div>
    </StoryFrame>
  );
}

APIリファレンス

カルーセル.ルート

Carousel.Root コンポーネントには、カルーセルのすべてのパーツが含まれています。

子供:Carousel.Slides、Carousel.Previous、およびCarousel.Next

名前

形容

onNavigationNext

次のボタンがクリックされたときに呼び出されるイベント ハンドラー。

({index}) => { //do something }

onNavigationPrev

前のボタンがクリックされたときに呼び出されるイベントハンドラ。

({index}) => { //do something }

カルーセルスライド

Carousel.Slidesコンポーネントには、すべてのCarousel.Slideコンポーネントが含まれています。

親：Carousel.Root

子供：Carousel.Slide

カルーセル.スライド

Carousel.Slideコンポーネントには、表示するコンテンツが含まれています。

親：Carousel.Slides

カルーセル.次へ

Carousel.Nextコンポーネントは、カルーセルの次のページをトリガーします。

親：Carousel.Root

カルーセル前

Carousel.Previousコンポーネントは、カルーセルの前のページをトリガーします。

親：Carousel.Root

この記事を改善するための提案がある場合は、 お知らせください!