轮播

一个用于循环浏览元素（图像或文本幻灯片）的幻灯片组件，就像轮播一样。

示例

轮播不会自动规范幻灯片尺寸。因此，您可能需要使用其他实用程序或自定义样式来适当地调整内容大小。虽然轮播支持上一个/下一个控件和指示器，但它们不是明确要求的。根据需要添加和自定义。

结果

正在加载...

实时编辑器

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

轮播图

轮播图项目

轮播图标题