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 应用程序中使用 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）组件接受一小组属性来配置功能，它们如下：

• controls (boolean) - 启用/禁用上一个/下一个按钮等控件
• keyboard (boolean) - 启用键盘控制
• touch (boolean) - 启用/禁用触摸控制
• indicators (boolean) - 启用/禁用旋转木马（Carousel）底部的指示器
• 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 组件接受一些属性来配置功能，它们如下：

• interval (number) - 为单个幻灯片暂停的持续时间
• bsPrefix (string) - 用于自定义底层 CSS 类的前缀

应用旋转木马（Carousel）组件

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

接下来，使用以下命令安装 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 组件中使用 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风格

最后，在浏览器中打开应用程序并检查最终结果。旋转木马（Carousel）组件将如下所示 -

添加控件和指示器

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

首先，打开我们的旋转木马（Carousel）应用程序并更新 SimpleCarousel 组件，如下所示 -

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

这里

• 使用指标属性来启用指标
• 使用 controls 属性来启用控件

接下来，在浏览器中打开应用程序并检查最终结果。旋转木马（Carousel）组件将使用控件和指示器进行渲染，如下所示 -

总结

React-bootstrap 旋转木马（Carousel）组件提供了创建干净简单的旋转木马组件所需的所有选项。