ReactJS - 轮播

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

在本章中，我们将学习如何使用 react-bootstrap 库中的 Carousel 组件。

什么是 Carousel?

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

Carousel 轮播组件

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

• Carousel.Item

轮播组件接受多个Carousel.Item项。每个Carousel.Item 都是一张幻灯片，可以接受一张图片。示例代码如下 −

<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 组件接受一小组属性来配置功能，具体如下，

• controls (boolean)

• 启用/禁用控件，例如上一个/下一个按钮

• keyboard (boolean)

• 启用键盘控制

• touch (boolean)

• 启用/禁用触摸控制

• indicators (boolean)

• 启用/禁用轮播底部的指示器

• nextIcon (React node)

• 自定义下一个图标的选项

• nextLabel (string)

• 自定义下一个标签的选项

• prevIcon (React Node)

• 自定义上一个图标的选项

• prevLabel (string)

• 自定义上一个标签的选项

• interval (number)

• 两张幻灯片之间暂停和播放的时长

• activeIndex (number)

• 表示要显示的幻灯片的索引号

• slide (boolean)

• 启用/禁用自动滑动功能

• variant (dark)

• 启用轮播设计的不同变体。深色选项将轮播主题从亮变为暗

• bsPrefix (string)

• 用于自定义底层 CSS 类的前缀

• onSelect (function)

• 可以附加一个函数来处理 onSelect 事件

• onSlide (function)

• 可以附加一个函数来处理 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 组件中使用淡入淡出属性来更改动画类型

• 在 Carousel 组件中使用指示器属性来删除指示器

• 在 Carousel 组件中使用控件属性来删除控件

• 添加了三个 Carousel.Item 项目并使用了三张图片。

• 在每个 Carousel.Item 组件中添加 Carousel.Caption 并设置每张幻灯片的标题。

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

// 删除所有默认样式

接下来，打开 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 属性来启用指示器

• 使用 controls 属性来启用控件

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

摘要

React-bootstrap 轮播组件提供了创建干净、简单的轮播组件所需的所有选项。