カルーセル

画像やテキストのスライドのように、要素を循環させるためのスライドショーコンポーネントです。

例

カルーセルは、スライドのサイズを自動的に調整しません。そのため、コンテンツのサイズを適切に調整するには、追加のユーティリティまたはカスタムスタイルを使用する必要がある場合があります。カルーセルは前/次のコントロールとインジケーターをサポートしていますが、明示的に必須ではありません。必要に応じて追加およびカスタマイズしてください。

結果

読み込み中…

ライブエディター

import Carousel from 'react-bootstrap/Carousel'; import ExampleCarouselImage from 'components/ExampleCarouselImage'; function UncontrolledExample() { return ( <Carousel> <Carousel.Item> <ExampleCarouselImage text="First slide" /> <Carousel.Caption> <h3>First slide label</h3> <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p> </Carousel.Caption> </Carousel.Item> <Carousel.Item> <ExampleCarouselImage text="Second slide" /> <Carousel.Caption> <h3>Second slide label</h3> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> </Carousel.Caption> </Carousel.Item> <Carousel.Item> <ExampleCarouselImage text="Third slide" /> <Carousel.Caption> <h3>Third slide label</h3> <p> Praesent commodo cursus magna, vel scelerisque nisl consectetur. </p> </Carousel.Caption> </Carousel.Item> </Carousel> ); } export default UncontrolledExample;

import Carousel from 'react-bootstrap/Carousel';
import ExampleCarouselImage from 'components/ExampleCarouselImage';

function UncontrolledExample() {
  return (
    <Carousel>
      <Carousel.Item>
        <ExampleCarouselImage text="First slide" />
        <Carousel.Caption>
          <h3>First slide label</h3>
          <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
        </Carousel.Caption>
      </Carousel.Item>
      <Carousel.Item>
        <ExampleCarouselImage text="Second slide" />
        <Carousel.Caption>
          <h3>Second slide label</h3>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        </Carousel.Caption>
      </Carousel.Item>
      <Carousel.Item>
        <ExampleCarouselImage text="Third slide" />
        <Carousel.Caption>
          <h3>Third slide label</h3>
          <p>
            Praesent commodo cursus magna, vel scelerisque nisl consectetur.
          </p>
        </Carousel.Caption>
      </Carousel.Item>
    </Carousel>
  );
}

export default UncontrolledExample;

制御

activeIndexプロップとonSelectハンドラーを使用して、カルーセルの状態を制御することもできます。

結果

読み込み中…

ライブエディター

import { useState } from 'react'; import Carousel from 'react-bootstrap/Carousel'; import ExampleCarouselImage from 'components/ExampleCarouselImage'; function ControlledCarousel() { const [index, setIndex] = useState(0); const handleSelect = (selectedIndex) => { setIndex(selectedIndex); }; return ( <Carousel activeIndex={index} onSelect={handleSelect}> <Carousel.Item> <ExampleCarouselImage text="First slide" /> <Carousel.Caption> <h3>First slide label</h3> <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p> </Carousel.Caption> </Carousel.Item> <Carousel.Item> <ExampleCarouselImage text="Second slide" /> <Carousel.Caption> <h3>Second slide label</h3> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> </Carousel.Caption> </Carousel.Item> <Carousel.Item> <ExampleCarouselImage text="Third slide" /> <Carousel.Caption> <h3>Third slide label</h3> <p> Praesent commodo cursus magna, vel scelerisque nisl consectetur. </p> </Carousel.Caption> </Carousel.Item> </Carousel> ); } export default ControlledCarousel;

import { useState } from 'react';
import Carousel from 'react-bootstrap/Carousel';
import ExampleCarouselImage from 'components/ExampleCarouselImage';

function ControlledCarousel() {
  const [index, setIndex] = useState(0);

  const handleSelect = (selectedIndex) => {
    setIndex(selectedIndex);
  };

  return (
    <Carousel activeIndex={index} onSelect={handleSelect}>
      <Carousel.Item>
        <ExampleCarouselImage text="First slide" />
        <Carousel.Caption>
          <h3>First slide label</h3>
          <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
        </Carousel.Caption>
      </Carousel.Item>
      <Carousel.Item>
        <ExampleCarouselImage text="Second slide" />
        <Carousel.Caption>
          <h3>Second slide label</h3>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        </Carousel.Caption>
      </Carousel.Item>
      <Carousel.Item>
        <ExampleCarouselImage text="Third slide" />
        <Carousel.Caption>
          <h3>Third slide label</h3>
          <p>
            Praesent commodo cursus magna, vel scelerisque nisl consectetur.
          </p>
        </Carousel.Caption>
      </Carousel.Item>
    </Carousel>
  );
}

export default ControlledCarousel;

クロスフェード

カルーセルにfadeプロップを追加して、スライドのアニメーションをスライドではなくフェードトランジションでアニメーション化します。

結果

読み込み中…

ライブエディター

import Carousel from 'react-bootstrap/Carousel'; import ExampleCarouselImage from 'components/ExampleCarouselImage'; function CarouselFadeExample() { return ( <Carousel fade> <Carousel.Item> <ExampleCarouselImage text="First slide" /> <Carousel.Caption> <h3>First slide label</h3> <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p> </Carousel.Caption> </Carousel.Item> <Carousel.Item> <ExampleCarouselImage text="Second slide" /> <Carousel.Caption> <h3>Second slide label</h3> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> </Carousel.Caption> </Carousel.Item> <Carousel.Item> <ExampleCarouselImage text="Third slide" /> <Carousel.Caption> <h3>Third slide label</h3> <p> Praesent commodo cursus magna, vel scelerisque nisl consectetur. </p> </Carousel.Caption> </Carousel.Item> </Carousel> ); } export default CarouselFadeExample;

import Carousel from 'react-bootstrap/Carousel';
import ExampleCarouselImage from 'components/ExampleCarouselImage';

function CarouselFadeExample() {
  return (
    <Carousel fade>
      <Carousel.Item>
        <ExampleCarouselImage text="First slide" />
        <Carousel.Caption>
          <h3>First slide label</h3>
          <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
        </Carousel.Caption>
      </Carousel.Item>
      <Carousel.Item>
        <ExampleCarouselImage text="Second slide" />
        <Carousel.Caption>
          <h3>Second slide label</h3>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        </Carousel.Caption>
      </Carousel.Item>
      <Carousel.Item>
        <ExampleCarouselImage text="Third slide" />
        <Carousel.Caption>
          <h3>Third slide label</h3>
          <p>
            Praesent commodo cursus magna, vel scelerisque nisl consectetur.
          </p>
        </Carousel.Caption>
      </Carousel.Item>
    </Carousel>
  );
}

export default CarouselFadeExample;

トランジションアニメーションなし

slideプロップをfalseに設定して、スライド間のトランジションアニメーションを無効にします。

結果

読み込み中…

ライブエディター

import Carousel from 'react-bootstrap/Carousel'; import ExampleCarouselImage from 'components/ExampleCarouselImage'; function NoTransitionExample() { return ( <Carousel slide={false}> <Carousel.Item> <ExampleCarouselImage text="First slide" /> <Carousel.Caption> <h3>First slide label</h3> <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p> </Carousel.Caption> </Carousel.Item> <Carousel.Item> <ExampleCarouselImage text="Second slide" /> <Carousel.Caption> <h3>Second slide label</h3> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> </Carousel.Caption> </Carousel.Item> <Carousel.Item> <ExampleCarouselImage text="Third slide" /> <Carousel.Caption> <h3>Third slide label</h3> <p> Praesent commodo cursus magna, vel scelerisque nisl consectetur. </p> </Carousel.Caption> </Carousel.Item> </Carousel> ); } export default NoTransitionExample;

import Carousel from 'react-bootstrap/Carousel';
import ExampleCarouselImage from 'components/ExampleCarouselImage';

function NoTransitionExample() {
  return (
    <Carousel slide={false}>
      <Carousel.Item>
        <ExampleCarouselImage text="First slide" />
        <Carousel.Caption>
          <h3>First slide label</h3>
          <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
        </Carousel.Caption>
      </Carousel.Item>
      <Carousel.Item>
        <ExampleCarouselImage text="Second slide" />
        <Carousel.Caption>
          <h3>Second slide label</h3>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        </Carousel.Caption>
      </Carousel.Item>
      <Carousel.Item>
        <ExampleCarouselImage text="Third slide" />
        <Carousel.Caption>
          <h3>Third slide label</h3>
          <p>
            Praesent commodo cursus magna, vel scelerisque nisl consectetur.
          </p>
        </Carousel.Caption>
      </Carousel.Item>
    </Carousel>
  );
}

export default NoTransitionExample;

個々のアイテム間隔

intervalプロップを使用して、各カルーセルアイテムの個々の間隔を指定できます。

結果

読み込み中…

ライブエディター

import Carousel from 'react-bootstrap/Carousel'; import ExampleCarouselImage from 'components/ExampleCarouselImage'; function IndividualIntervalsExample() { return ( <Carousel> <Carousel.Item interval={1000}> <ExampleCarouselImage text="First slide" /> <Carousel.Caption> <h3>First slide label</h3> <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p> </Carousel.Caption> </Carousel.Item> <Carousel.Item interval={500}> <ExampleCarouselImage text="Second slide" /> <Carousel.Caption> <h3>Second slide label</h3> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> </Carousel.Caption> </Carousel.Item> <Carousel.Item> <ExampleCarouselImage text="Third slide" /> <Carousel.Caption> <h3>Third slide label</h3> <p> Praesent commodo cursus magna, vel scelerisque nisl consectetur. </p> </Carousel.Caption> </Carousel.Item> </Carousel> ); } export default IndividualIntervalsExample;

import Carousel from 'react-bootstrap/Carousel';
import ExampleCarouselImage from 'components/ExampleCarouselImage';

function IndividualIntervalsExample() {
  return (
    <Carousel>
      <Carousel.Item interval={1000}>
        <ExampleCarouselImage text="First slide" />
        <Carousel.Caption>
          <h3>First slide label</h3>
          <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
        </Carousel.Caption>
      </Carousel.Item>
      <Carousel.Item interval={500}>
        <ExampleCarouselImage text="Second slide" />
        <Carousel.Caption>
          <h3>Second slide label</h3>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        </Carousel.Caption>
      </Carousel.Item>
      <Carousel.Item>
        <ExampleCarouselImage text="Third slide" />
        <Carousel.Caption>
          <h3>Third slide label</h3>
          <p>
            Praesent commodo cursus magna, vel scelerisque nisl consectetur.
          </p>
        </Carousel.Caption>
      </Carousel.Item>
    </Carousel>
  );
}

export default IndividualIntervalsExample;

ダークバリアント

コントロール、インジケーター、キャプションを暗くするには、Carouselにvariant="dark"を追加します。

重要事項！

Bootstrap v5.3.0でカラーモードが導入されたことに伴い、コンポーネントのダークバリアントは非推奨となりました。variant="dark"を追加する代わりに、ルート要素、親ラッパー、またはコンポーネント自体にdata-bs-theme="dark"を設定してください。

結果

読み込み中…

ライブエディター

import Carousel from 'react-bootstrap/Carousel'; function DarkVariantExample() { return ( <Carousel data-bs-theme="dark"> <Carousel.Item> <img className="d-block w-100" src="holder.js/800x400?text=First slide&bg=f5f5f5" alt="First slide" /> <Carousel.Caption> <h5>First slide label</h5> <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p> </Carousel.Caption> </Carousel.Item> <Carousel.Item> <img className="d-block w-100" src="holder.js/800x400?text=Second slide&bg=eee" alt="Second slide" /> <Carousel.Caption> <h5>Second slide label</h5> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> </Carousel.Caption> </Carousel.Item> <Carousel.Item> <img className="d-block w-100" src="holder.js/800x400?text=Third slide&bg=e5e5e5" alt="Third slide" /> <Carousel.Caption> <h5>Third slide label</h5> <p> Praesent commodo cursus magna, vel scelerisque nisl consectetur. </p> </Carousel.Caption> </Carousel.Item> </Carousel> ); } export default DarkVariantExample;

import Carousel from 'react-bootstrap/Carousel';

function DarkVariantExample() {
  return (
    <Carousel data-bs-theme="dark">
      <Carousel.Item>
        <img
          className="d-block w-100"
          src="holder.js/800x400?text=First slide&bg=f5f5f5"
          alt="First slide"
        />
        <Carousel.Caption>
          <h5>First slide label</h5>
          <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
        </Carousel.Caption>
      </Carousel.Item>
      <Carousel.Item>
        <img
          className="d-block w-100"
          src="holder.js/800x400?text=Second slide&bg=eee"
          alt="Second slide"
        />
        <Carousel.Caption>
          <h5>Second slide label</h5>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        </Carousel.Caption>
      </Carousel.Item>
      <Carousel.Item>
        <img
          className="d-block w-100"
          src="holder.js/800x400?text=Third slide&bg=e5e5e5"
          alt="Third slide"
        />
        <Carousel.Caption>
          <h5>Third slide label</h5>
          <p>
            Praesent commodo cursus magna, vel scelerisque nisl consectetur.
          </p>
        </Carousel.Caption>
      </Carousel.Item>
    </Carousel>
  );
}

export default DarkVariantExample;

API

Carousel

CarouselItem

CarouselCaption