React 中的轮播图

2025年3月17日 | 阅读11分钟

React Carousel 是一个幻灯片组件，用于以轮播图的形式循环播放元素、图片或文本幻灯片。

它是如何工作的？

React Carousel 是内容中的一个幻灯片。它会加载许多图片、文本或 HTML 元素，并支持上一页/下一页按钮。

页面可见性 API 兼容所有浏览器，并且可以在用户未查看网页时（例如，浏览器标签页处于非活动状态、浏览器窗口最小化等）阻止轮播滚动。

它是一个功能强大、轻量级且完全可定制的轮播组件，适用于 React 应用程序。

作为包安装

用途

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import "react-responsive-carousel/lib/styles/carousel.min.css"; // requires a loader
import { Carousel } from 'react-responsive-carousel';
 
class DemoCarousel extends Component {
    render() {
        return (
            <Carousel>
                <div>
                    <img src="assets/1.jpeg" />
                    <p className="legend">Legend 1</p>
                </div>
                <div>
                    <img src="assets/2.jpeg" />
                    <p className="legend">Legend 2</p>
                </div>
                <div>
                    <img src="assets/3.jpeg" />
                    <p className="legend">Legend 3</p>
                </div>
            </Carousel>
        );
    }
});
 
ReactDOM.render(<DemoCarousel />, document.querySelector('.demo-carousel'));
// Don't forget to include css in your page
// Using webpack or parcel a style loader
// import styles from 'react-responsive-carousel/lib/styles/carousel.min.css';
// Using html tag:
// <link rel="stylesheet" href="<NODE_MODULES_FOLDER>/react-responsive-carousel/lib/styles/carousel.min.css"/>

Props

名称	值	描述
ariaLabel	string	定义根轮播元素的 area-label 属性。通过从标记中排除该属性，默认值为 undefined。
轴	'horizontal', 'vertical'	设置滑块方向，默认值为“Horizontal”。
autoFocus	boolean	渲染时聚焦到轮播。
autoPlay	boolean	根据 interval 属性自动更改幻灯片。
centerMode	boolean	使当前项居中，并根据 centerSlidePercentage 设置幻灯片宽度。
centerSlidePercentage	数字	当 centerMode 为 true 时，设置相对于轮播宽度的百分比宽度。
dynamicHeight	boolean	对象的高度将不固定。
emulateTouch	boolean	当 swipeable 为 true 时，在非触摸屏上启用向右滑动。
infiniteLoop	boolean	经过最后一项后，将回到第一张幻灯片。
interval	数字	要自动跳到下一项，当 autoplay 为 true 时，默认的间隔（毫秒）为 3000。
标签	object	使用对象（包含 LeftArrow、RightArrow 和 Item 属性）为轮播应用区域标签。
onClickItem	功能	默认为 {left arrow: 'previous slide/item'，right arrow: 'next slide/item'，item: 'slide item'}。
onClickThumb	功能	处理缩略图点击事件的回调函数，接收当前索引和项作为参数。
onChange	功能	每次选定的项更改时，回调函数都会接收当前索引和项作为参数进行处理。
onSwipeStart	功能	当触摸事件启动滑动时，回调函数会接收一个参数。
onSwipeEnd	功能	要处理滑动结束时的情况，回调函数会接收一个触摸事件作为参数。
onSwipeMove	功能	在滑动过程中的每一次移动都会触发回调函数，并接收一个触摸事件作为参数。
preventMovementUntilSwipeScrollTolerance	boolean	在用户滑动到 SwipeScrollTolerance 指定的值之前，不允许轮播滚动。
renderArrowPrev	功能	渲染自定义后退箭头。接收一个点击处理程序、一个指示是否有前一项的布尔值以及一个可访问性标签作为参数。
renderArrowNext	功能	渲染自定义后退箭头。接收一个点击处理程序、一个指示下一项是否存在的布尔值以及一个可访问性标签作为参数。
renderIndicator	功能	自定义当前指示器。接收一个点击处理程序、一个指示项是否被选中的布尔值、项索引以及一个可访问性标签作为参数。
renderItem	功能	提交自定义项。接收来自轮播的项以及一个带有 selected 属性的对象作为参数。
renderThumbs	功能	用于显示缩略图的渲染 prop，接收轮播项作为参数。默认情况下，它会获取滑块每一项的图片标签并进行渲染。
selectedItem	数字	设置选定的项，默认为 0。
showArrows	boolean	启用上一页和下一页箭头，默认值为 True。
showStatus	boolean	启用当前项的绝对位置，默认已确认。
showIndicators	boolean	启用用于选择项的指示器，默认为 true。
showThumbs	boolean	启用缩略图，默认为 true。
statusFormatter	功能	返回位置为字符串的格式化函数，接收当前项并以总数为参数。默认格式为 {currentItem} of {total}。
stopOnHover	boolean	悬停时，幻灯片不会因自动播放而改变。默认值为 true。
swipeable	boolean	启用用户滑动轮播，默认值为 true。
swipeScrollTolerance	数字	滑动时，需要滑动以移动幻灯片的像素数量，默认值为五。
thumbWidth	数字	缩略图宽度，默认值为 80。
transitionTime	数字	幻灯片切换动画的持续时间。
useKeyboardArrows	boolean	聚焦时启用箭头来移动滑块。
verticalSwipe	'natural', 'standard'	当轴为“vertical”时设置滑动模式。默认值为“Standard”。
宽度	number or string	轮播宽度默认为 100%。

自定义

项（幻灯片）

默认情况下，每张幻灯片都作为子元素渲染。如果需要自定义，请使用 prop renderItem。

renderItem: (item: React.ReactNode, options?: { isSelected: boolean }) => React.ReactNode;

缩略图

默认情况下，缩略图是通过提取每张幻灯片中的图片生成的。如果您的幻灯片中没有图片，或者您更喜欢不同的缩略图，请使用 renderThumb 方法返回一个新图片列表作为缩略图。

箭头

默认情况下，两侧提供简单的箭头。如果您需要自定义它们并且 CSS 不够用，请使用 renderArrowPrev 和 renderArrowNext。点击处理程序作为 prop 传递，必须作为点击处理程序添加到自定义箭头中。

renderArrowPrev: (clickHandler: () => void, hasPrev: boolean, label: string) => React.ReactNode;
renderArrowNext: (clickHandler: () => void, hasNext: boolean, label: string) => React.ReactNode;

指标

默认情况下，指示器将显示为轮播底部的那些小点。要自定义它们，请使用 RenderIndicator prop。

renderIndicator: (
    clickHandler: (e: React.MouseEvent | React.KeyboardEvent) => void,
    isSelected: boolean,
    index: number,
    label: string
) => React.ReactNode;

完全控制轮播

如果以上选项都不够，您可以为轮播创建自己的控件。

自定义动画

默认情况下，Carousel 使用传统的“slide”风格动画。还有一个内置的淡入淡出动画，通过将“fade”传递给 AnimationHandler prop 来使用。

*注意：'fade' 动画可能不支持滑动动画，因此您可能需要将 swipeable 设置为 false。

如果您想要完全自定义的内容，可以将自定义动画处理函数传递给 AnimationHandler、SwipeAnimationHandler 和 StopSwipingHandler。动画处理函数接受 props 和 positions，并返回列表的样式、默认幻灯片样式、选定幻灯片样式和前一张幻灯片样式。可以查看淡入淡出动画处理函数以了解它们的工作原理。

const fadeAnimationHandler: AnimationHandler = (props, state): AnimationHandlerResponse => {
    const transitionTime = props.transitionTime + 'ms';
    const transitionTimingFunction = 'ease-in-out';
 
    let slideStyle: React.CSSProperties = {
        position: 'absolute',
        display: 'block',
        zIndex: -2,
        minHeight: '100%',
        opacity: 0,
        top: 0,
        right: 0,
        left: 0,
        bottom: 0,
        transitionTimingFunction: transitionTimingFunction,
        msTransitionTimingFunction: transitionTimingFunction,
        MozTransitionTimingFunction: transitionTimingFunction,
        WebkitTransitionTimingFunction: transitionTimingFunction,
        OTransitionTimingFunction: transitionTimingFunction,
    };
 
    if (!state.swiping) {
        slideStyle = {
            ...slideStyle,
            WebkitTransitionDuration: transitionTime,
            MozTransitionDuration: transitionTime,
            OTransitionDuration: transitionTime,
            transitionDuration: transitionTime,
            msTransitionDuration: transitionTime,
        };
    }
 
    return {
        slideStyle,
        selectedStyle: { ...slideStyle, opacity: 1, position: 'relative' },
        prevStyle: { ...slideStyle },
    };
};

视频

如果您的轮播是关于视频的，请记住，播放哪些视频由您决定。使用 RenderItem prop，您将获得有关幻灯片是否被选中的信息，并可以利用此信息来更改视频的位置。

React Carousel 组件

Carousel 不会自动标准化幻灯片尺寸，您可能需要使用附加工具或自定义方法来正确调整内容大小。虽然 Carousel 支持前/后控件和指示器，但它们并非必需。您可以根据需要添加和自定义。

仅幻灯片

<CCarousel>
 <CCarouselItem>
<CImage className="d-block w-100" src="/images/react.jpg" alt="slide 1" />
</CCarouselItem>
 <CCarouselItem>
 <CImage className="d-block w-100" src="/images/vue.jpg" alt="slide 2" />
</CCarouselItem>
<CCarouselItem>
<CImage className="d-block w-100" src="/images/angular.jpg" alt="slide 3" />
</CCarouselItem>
</CCarousel>

带控件

它将通过 controls 属性添加上一页和下一页控件。

<CCarousel controls>
<CCarouselItem>
   <CImage className="d-block w-100" src="/images/react.jpg" alt="slide 1" />
  </CCarouselItem>
  <CCarouselItem>
  <CImage className="d-block w-100" src="/images/vue.jpg" alt="slide 2" />
</CCarouselItem>
<CCarouselItem>
    <CImage className="d-block w-100" src="/images/angular.jpg" alt="slide 3" />
  </CCarouselItem>
</CCarousel>

带指示器

您也可以将指示器附加到轮播的长度和控件上。

<CCarousel controls indicators>
<CCarouselItem>
    <CImage className="d-block w-100" src="/images/react.jpg" alt="slide 1" />
  </CCarouselItem>
  <CCarouselItem>
    <CImage className="d-block w-100" src="/images/vue.jpg" alt="slide 2" />
</CCarouselItem>
<CCarouselItem>
<CImage className="d-block w-100" src="/images/angular.jpg" alt="slide 3" />
  </CCarouselItem>
</CCarousel>

带字幕

您可以在任何 <CCarouselItem> 中使用 <CCarouselCaption> 元素添加字幕。可选的显示工具可以快速隐藏在小视口上，如下所示。我们使用 .d-none 隐藏它们，并在中等大小的设备上使用 .d-MD-block 重新显示它们。

第一张幻灯片的一些代表性占位符内容。

<CCarousel controls indicators>
  <CCarouselItem>
    <CImage className="d-block w-100" src="/images/react.jpg" alt="slide 1" />
   <CCarouselCaption className="d-none d-md-block">
     <h5>First slide label</h5>
</CCarouselCaption>
</CCarouselCaption>
</CCarouselItem>
<CCarouselItem>
  <CImage className="d-block w-100" src="/images/vue.jpg" alt="slide 2" />
    <CCarouselCaption className="d-none d-md-block">
<h5>Second slide label</h5>
      <p>Some representative placeholder content for the first slide.</p>
 </CCarouselCaption>
  </CCarouselItem>
  <CCarouselItem>
    <CImage className="d-block w-100" src="/images/angular.jpg" alt="slide 3" />
    <CCarouselCaption className="d-none d-md-block">
      <h5>Third slide label</h5>
      <p>Some representative placeholder content for the first slide.</p>
   </CCarouselCaption>
</CCarouselItem>
</CCarousel>

交叉淡入淡出

让轮播以淡入淡出过渡动画而不是滑动动画来动画化幻灯片。

<CCarousel controls transition="crossfade">
<CCarouselItem>
   <CImage className="d-block w-100" src="/images/react.jpg" alt="slide 1" />
  </CCarouselItem>
  <CCarouselItem>
    <CImage className="d-block w-100" src="/images/vue.jpg" alt="slide 2" />
</CCarouselItem>
<CCarouselItem>
   <CImage className="d-block w-100" src="/images/angular.jpg" alt="slide 3" />
  </CCarouselItem>
</CCarousel>

深色主题

为 CCrocell 添加 dark 属性以获得深色控件、指示器和字幕。使用 Filter CSS 属性的控件与其默认的白色填充效果相反，并且字幕和控件具有额外的 Sass 变量，可以自定义颜色和背景颜色。

第一张幻灯片的一些代表性占位符内容。

<CCarousel controls indicators dark>
  <CCarouselItem>
    <CImage className="d-block w-100" src="/images/react.jpg" alt="slide 1" />
   <CCarouselCaption className="d-none d-md-block">
      <h5>First slide label</h5>
    <p>Some representative placeholder content for the first slide.</p>
</CCarouselCaption>
  </CCarouselItem>
  <CCarouselItem>
   <CImage className="d-block w-100" src="/images/vue.jpg" alt="slide 2" />
    <CCarouselCaption className="d-none d-md-block">
      <h5>Second slide label</h5>
      <p>Some representative placeholder content for the first slide.</p>
  </CCarouselCaption>
  </CCarouselItem>
<CCarouselItem>
  <CImage className="d-block w-100" src="/images/angular.jpg" alt="slide 3" />
    <CCarouselCaption className="d-none d-md-block">
      <h5>Third slide label</h5>
     <p>Some representative placeholder content for the first slide.</p>
  </CCarouselCaption>
</CCarouselItem>
</CCarousel>

API

CCarousel

import { CCarousel } from '@coreui/react'

// or

import CCarousel from '@coreui/react/src/components/carousel/CCarousel'

属性	描述	类型	默认
activeIndex	活动对象索引。	数字	0
className	您想应用于父组件的所有类名的字符串。	string	-
controls	添加到上一页和下一页控件。	boolean	-
深色 (dark)	添加更深的控件、指示器和字幕。	boolean	-
indicators	在轮播底部为每个项目添加指示器。	boolean	-
interval	自动循环播放项目的延迟时间。如果为 false，轮播将不会自动循环。	number \| boolean	5000
onSlid	幻灯片过渡完成后触发的回调。	(active: number, direction: string) => void	-
onSlide	幻灯片过渡开始时触发的回调。	(active: number, direction: string) => void	-
pause	如果设置为“hover”，则在 mouseenter 时暂停轮播的循环，并在 mouseleave 时恢复轮播的循环。如果设置为 false，则鼠标悬停在轮播上不会停止它。	boolean \| 'hover.'	hover
transition	设置过渡类型。	'slide' \| 'crossfade'	-
wrap	设置轮播是否必须连续循环或硬停止。	boolean	true

CCarouselCaption

import { CCarouselCaption } from '@coreui/react'

// or

import CCarouselCaption from '@coreui/react/src/components/carousel/CCarouselCaption'

属性	描述	类型	默认
className	您想应用于基础组件的所有类名的字符串。	string	-

CCarouselItem

import { CCarouselItem } from '@coreui/react'

// or

import CCarouselItem from '@coreui/react/src/components/carousel/CCarouselItem'

属性	描述	类型	默认
className	您想应用于父组件的所有类名的字符串。	string	-
interval	自动循环播放这些项目的延迟时间。	number \| boolean	false

React-Bootstrap 轮播组件

React-Bootstrap 是一个为 React 设计的前端框架。Carousel 组件提供了一种以循环方式创建图片或文本幻灯片的方式，用于完整渲染。

我们在 ReactJS 中使用以下方法来使用 react-bootstrap 轮播组件。

Carousel props

Active Index：用于控制当前活动的视图幻灯片。它用作组件的自定义元素类型。
Controls：这些在轮播中显示下一页/上一页按钮。
Default Active Index：这是默认的 Active Index，值为 0。
Fade：用于在幻灯片切换时添加淡入淡出动画。
Indicators：用于显示一组幻灯片状态指示器。
Interval：用于延迟自动循环之间的时间。
Keyboard：指定轮播是否应响应键盘事件。
Next icon：这用于覆盖默认的下一页图标。
Next Label：这可以显示轮播中的下一项，并且是一种仅对屏幕阅读器显示的标签。
On selection：当活动项更改时触发的回调。
onSlide：当幻灯片过渡结束时触发的回调。
onSlide：当幻灯片过渡开始时触发的回调。Pause 用于根据不同的鼠标事件暂停幻灯片。
prevIcon：这用于覆盖默认的上一个图标。
prevLabel：这可以显示轮播中的最后一项，并且是一种仅对屏幕阅读器显示的标签。
Ref：它用于为元素提供属性。
Slides：这用于在幻灯片之间启用动画。
Touch：触摸屏设备使用触摸屏指示是否应支持左右滑动交互。
Wrap：指示轮播是连续硬停止还是循环。
bsPrefix：这是一个用于与高度优化的 Bootstrap CSS 交互的退出门。
Carousel. Item props：它将用作组件的自定义元素类型。
Interval：这用于延迟这些项目自动循环之间的时间。
bsPrefix：这是一个用于与高度优化的 Bootstrap CSS 交互的退出门。
Carousel. Caption props：它将用作此组件的自定义元素类型。
bsPrefix：这是用于处理高度优化的 Bootstrap CSS 的退出门。

创建 React 应用并安装模块

步骤 1：使用以下命令创建一个 React 应用程序

步骤 2：创建项目文件夹后，使用以下命令进入该文件夹

步骤 3：创建 ReactJS 应用程序后，使用以下命令安装所需的模块

npm install react-bootstrap
npm install bootstrap

项目结构：看起来如下。

项目结构

示例：现在，在 App.js 文件中写入以下代码。此处 App 是默认组件，我们在其中编写了代码。

App.js

import React from 'react';
import 'bootstrap/dist/css/bootstrap.css';
import Carousel from 'react-bootstrap/Carousel';
  
export default function App() {
  return (
    <div style={{ display: 'block', width: 700, padding: 30 }}>
      <h4>React-Bootstrap Carousel Component</h4>
      <Carousel>
        <Carousel.Item interval={1500}>
          <img
            className="d-block w-100"
src=" https://tpointtech.cn//wp-content/uploads/20210425122739/2-300x115.png"
            alt="Image One"
          />
          <Carousel.Caption>
            <h3>Label for first slide</h3>
            <p>Sample Text for Image One</p>
          </Carousel.Caption>
        </Carousel.Item>
        <Carousel.Item interval={500}>
          <img
            className="d-block w-100"
src="https://tpointtech.cn//wp-content/uploads/20210425122716/1-300x115.png"
            alt="Image Two"
          />
          <Carousel.Caption>
            <h3>Label for second slide</h3>
            <p>Sample Text for Image Two</p>
          </Carousel.Caption>
        </Carousel.Item>
      </Carousel>
    </div>
  );
}

运行应用程序的步骤：从项目根目录运行应用程序，使用以下命令

输出：打开浏览器并访问 https://:3000/。您将看到以下输出

下一个主题React-Paginate

React 中的轮播图

它是如何工作的？

作为包安装

用途

Props

自定义

缩略图

箭头

指标

完全控制轮播

自定义动画

*注意：'fade' 动画可能不支持滑动动画，因此您可能需要将 swipeable 设置为 false。

视频

React Carousel 组件

仅幻灯片

带控件

带指示器

带字幕

交叉淡入淡出

深色主题

API

CCarouselCaption

CCarouselItem

React-Bootstrap 轮播组件

创建 React 应用并安装模块

项目结构

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

ReactJS 教程

杂项。

选择题

面试题

React 中的轮播图

它是如何工作的？

作为包安装

用途

Props

自定义

缩略图

箭头

指标

完全控制轮播

自定义动画

*注意：'fade' 动画可能不支持滑动动画，因此您可能需要将 swipeable 设置为 false。

视频

React Carousel 组件

仅幻灯片

带控件

带指示器

带字幕

交叉淡入淡出

深色主题

API

CCarouselCaption

CCarouselItem

React-Bootstrap 轮播组件

创建 React 应用并安装模块

项目结构

相关帖子

函数式构造函数

React 日期选择器

从零到英雄的完整 React JS 让你被录用

ReactJS 中的 Const

比较 Angular React 和 Vue

jQuery vs. React

Vue vs React

ReactJS PropTypes

将 ejs 转换为 React

React 管理员

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器