ReactJS - 轮播图

React 通过第三方 UI 组件库提供轮播图组件。React 社区提供了大量的 UI/UX 组件，选择合适的库来满足我们的需求是比较困难的。Bootstrap UI 库是开发人员的热门选择之一，并且被广泛使用。React Bootstrap（https://react-bootstrap.github.io/）已将几乎所有 Bootstrap UI 组件移植到 React 库中，并且对轮播图组件也具有最佳的支持。

让我们在本节学习如何使用react-bootstrap库中的轮播图组件。

什么是轮播图？

轮播图基本上是一个幻灯片，它循环播放一系列内容，并具有丰富的动画支持。它接受一系列图像作为其主要内容。它还接受每个幻灯片的标题内容。它具有按钮/指示器，可以从当前内容导航到下一个/上一个内容。暂停和显示内容的时间长度可以根据需要进行配置。

Carousel 组件

Carousel 组件允许开发人员在 Web 应用程序中使用 Bootstrap 设计创建简单的轮播图。Carousel 组件接受两个组件：

Carousel.Item

Carousel 组件接受多个Carousel.Item项目。每个 Carousel.Items 都是一个幻灯片，可以接受一个图像。示例代码如下：

<Carousel>
   <Carousel.Item>
      <img
         className="d-block w-100"
         src="react_bootstrap_carousel_slide1.png"
         alt="First slide"
      />
   </Carousel.Item>
   <Carousel.Item>
      <img
         className="d-block w-100"
         src="react_bootstrap_carousel_slide2.png"
         alt="Second slide"
      />
   </Carousel.Item>
</Carousel>

Carousel.Caption

Carousel.Caption是一个特殊的组件，用于显示关于幻灯片的简短描述，它应该包含在Carousel.Item组件内。示例代码如下：

<Carousel.Item>
   <img
      className="d-block w-100"
      src="react_bootstrap_carousel_slide1.png"
      alt="First slide"
   />
   <Carousel.Caption>
      <h3>React Bootstrap</h3>
      <p>React component library providing bootstrap components</p>
   </Carousel.Caption>
</Carousel.Item>

Carousel 组件接受少量 props 来配置功能，它们如下所示：

controls (布尔值)
启用/禁用控件，例如上一个/下一个按钮
keyboard (布尔值)
启用键盘控制
touch (布尔值)
启用/禁用触摸控制
indicators (布尔值)
启用/禁用轮播图底部的指示器
nextIcon (React 节点)
自定义下一个图标的选项
nextLabel (字符串)
自定义下一个标签的选项
prevIcon (React 节点)
自定义上一个图标的选项
prevLabel (字符串)
自定义上一个标签的选项
interval (数字)
两个幻灯片之间暂停和播放的时间长度
activeIndex (数字)
表示要显示的幻灯片的索引号
slide (布尔值)
启用/禁用自动幻灯片功能
variant (dark)
启用轮播图设计的不同变体。dark 选项将轮播图主题从浅色更改为深色
bsPrefix (字符串)
用于自定义底层 CSS 类的前缀
onSelect (函数)
启用附加函数以处理 onSelect 事件
onSlide (函数)
启用附加函数以处理 onSlide 事件

Carousel.Item 组件接受一些 props 来配置功能，它们如下所示：

interval (数字)
单个幻灯片暂停的时间长度
bsPrefix (字符串)
用于自定义底层 CSS 类的前缀

应用Carousel组件

首先，创建一个新的 React 应用程序，并使用以下命令启动它。

create-react-app myapp
cd myapp
npm start

接下来，使用以下命令安装 bootstrap 和 react-bootstrap 库：

npm install --save bootstrap react-bootstrap

接下来，创建一个简单的轮播图组件，SimpleCarousel (src/Components/SimpleCarousel.js)，并渲染一个轮播图，如下所示：

import { Carousel } from 'react-bootstrap';
function SimpleCarousel() {
   return (
      <Carousel fade indicators={false} controls={false}>
         <Carousel.Item>
            <img
               className="d-block w-100"
               src="react_bootstrap_carousel_slide1.png"
               alt="First slide"
            />
            <Carousel.Caption>
               <h3>React Bootstrap</h3>
               <p>React component library providing bootstrap components</p>
            </Carousel.Caption>
         </Carousel.Item>
         <Carousel.Item>
            <img
               className="d-block w-100"
               src="react_bootstrap_carousel_slide2.png"
               alt="Second slide"
            />
            <Carousel.Caption>
               <h3>Button</h3>
               <p>React Bootstrap button component</p>
            </Carousel.Caption>
         </Carousel.Item>
         <Carousel.Item>
            <img
               className="d-block w-100"
               src="react_bootstrap_carousel_slide3.png"
               alt="Third slide"
            />
            <Carousel.Caption>
               <h3>Carousel</h3>
               <p>React bootstrap Carousel component</p>
            </Carousel.Caption>
         </Carousel.Item>
      </Carousel>
   );
}
export default SimpleCarousel;

这里：

导入了 Carousel 组件并添加了一个 Carousel 组件。
在 Carousel 组件中使用了 fade props 来更改动画类型
在 Carousel 组件中使用了 indicators props 来移除指示器
在 Carousel 组件中使用了 controls props 来移除控件
添加了三个 Carousel.Item 项目并使用了三个图像。
在每个 Carousel.Item 组件中添加了 Carousel.Caption 并为每个幻灯片设置了标题。

接下来，打开App.css (src/App.css) 并移除所有样式。

// remove all default styles

接下来，打开 App 组件 (src/App.js)，导入 bootstrap css 并使用我们的新轮播图组件更新内容，如下所示：

import './App.css'
import "bootstrap/dist/css/bootstrap.min.css";
import SimpleCarousel from './Components/SimpleCarousel'
function App() {
   return (
      <div className="container">
         <div style={{ padding: "10px" }}>
            <div style={{ width: "400px", height: "400px", backgroundColor: "skyblue" }}>
               <SimpleCarousel />
            </div>
         </div>
      </div>
   );
}
export default App;

这里：

使用import语句导入了 bootstrap 类
渲染了我们的新SimpleCarousel组件。
包含了 App.css 样式

最后，在浏览器中打开应用程序并检查最终结果。轮播图组件将如下所示：

添加控件和指示器

让我们更新我们的组件以包括控件来导航到下一个和上一个幻灯片，以及指示器来标识当前幻灯片的位置。

首先，打开我们的轮播图应用程序并更新SimpleCarousel组件，如下所示：

import { Carousel } from 'react-bootstrap';
function SimpleCarousel() {
   return (
      <Carousel fade indicators={true} controls={true}>
      <Carousel.Item>
      // ...

这里：

使用了indicators props 来启用指示器
使用了controls props 来启用控件

接下来，在浏览器中打开应用程序并检查最终结果。轮播图组件将带有控件和指示器如下所示：

总结

React-bootstrap Carousel 组件提供了创建简洁易用的轮播图组件所需的所有选项。

打印页面