React Bootstrap 轮播图

轮播图是使网页看起来更具吸引力并提供引人注目的用户体验的最佳 Web 组件之一。 我们可以通过循环浏览多个元素来创建横幅和其他部分的幻灯片。

轮播图也可用于创建图片库、文本幻灯片等。 但是，轮播图背后的功能需要专家级的 JavaScript，但 Bootstrap 允许我们立即使用它。 我们可以使用 Carousel 组件在 React 应用程序中创建 Bootstrap Carousel，而无需指定任何 JavaScript。

滑动项目的脚本与 Carousel 组件打包在一起。

但是，轮播图项目不会对幻灯片尺寸进行规范化。 我们必须通过使用一些附加实用程序和自定义样式来手动定义适当的大小。 不需要显式定义上一页/下一页控件；相反，我们可以通过 Carousel 组件来拥有它们。 但是，我们需要自定义指示器的样式以使其更具体。

Bootstrap 不支持嵌套轮播图。

让我们了解如何使用 React Bootstrap 轮播图来制作幻灯片

如何使用 Bootstrap 在 React 中创建轮播图？

React Bootstrap 支持一个 <Carousel> 组件来创建轮播图滑块。 我们有 <Carousel>,<Carousel.Item> 组件来指定轮播图项目。

<Carousel.Item> 组件在 <Carousel> 组件内使用。

要导入轮播图组件，请在页面组件的顶部编写以下导入语句

考虑下面的示例

App.js

输出

从上面的输出中，我们通过使用 bootstrap 轮播图组件创建了一个三项轮播图组件。 我们可以通过应用所需的 CSS 来自定义图像的高度和宽度。

控制轮播图状态

可以使用 activeIndex 属性通过触发 onSelect 处理程序来控制轮播图状态。

考虑下面的示例

App.js

输出

从上面的输出中，我们通过显式定义一个 onSelect 处理程序来控制轮播图状态。

动画幻灯片

我们可以指定 fade 属性以将淡入淡出过渡应用于幻灯片，而不是交换过渡。 考虑以下示例

App.js

从上面的示例中，将更新滑动动画。 它将使用淡入淡出过渡来滑动项目。

指定自动滑动间隔

React Bootstrap 轮播图组件提供了一个间隔属性来调整滑动时间。 我们可以用毫秒为单位指定间隔属性值。 考虑以下示例

上面的示例将以 5 秒的间隔滑动轮播图项目。

深色变体轮播图

我们可以通过在 Carousel 组件中定义 variant 属性来创建更暗的控件、标题和指示器，而无需定义任何自定义 CSS。

要创建深色变体属性，请在轮播图组件中传递 variant="dark" 值。

考虑下面的示例

输出

上面的输出显示所有标题文本、指示器和控件现在都以深色显示。

因此，我们可以轻松地使用具有不同自定义的 react-bootstrap Carousel。