使用 React-Responsive-Carousel 构建优雅的画廊

weixin_0010034

812人浏览 · 2022-08-06 09:56:23

weixin_0010034 · 2022-08-06 09:56:23 发布

由戈德温钦达

轮播或滑块(视情况而定)是在单个空间中显示多个图像或内容的基本方式。它有助于最小化屏幕空间,鼓励访问者关注网站/应用内容的重要性,并有效地提高整体视觉兴趣。在 React 中实现 Carousels 的方法有很多种,本文将对此进行讨论。

React-Responsive-Carousel是一个 Javascript/React 包,用于前端应用程序显示图像/视频画廊、销售产品和显示相关博客。 Carousel 组件提供了一种以循环方式以可呈现的方式为我们的图像或文本幻灯片创建幻灯片的方法。它增强了为当今世界的大多数 Web 应用程序创建图库的能力。

响应式轮播如何工作

让我们看一个 React-Responsive-Carousel 模板代码,以了解我们的轮播如何与演示应用程序一起使用。

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>
                <div>
                    <img src="assets/4.jpeg" />
                    <p className="legend">Legend 4</p>
                </div>
                <div>
                    <img src="assets/5.jpeg" />
                    <p className="legend">Legend 5</p>
                </div>
                <div>
                    <img src="assets/6.jpeg" />
                    <p className="legend">Legend 6</p>
                </div>
            </Carousel>
        );
    }
});

ReactDOM.render(<DemoCarousel />, document.querySelector('.demo-carousel'));

//Don't forget to include the CSS in your page

// Using webpack or parcel with 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"/>

进入全屏模式退出全屏模式

[](https://res.cloudinary.com/practicaldev/image/fetch/s--6qiIKuYR--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_66%2Cw_880/https://blog.openreplay.com /b63a7bed6434bd5f81904726bf37c035/image01.gif)

React-Responsive-Carousel 的特点

这些是这个库的重要特性。

鼠标模拟触摸:当鼠标被触摸时,系统模拟鼠标点击事件循环到下一张幻灯片
响应式:有效响应设备的行为及其屏幕尺寸
自定义动画:实现单个自定义动画
无限循环:这意味着我们可以回到我们点击下一步时开始的初始项目。
键盘导航:手动使用键盘在轮播的项目/幻灯片之间导航
与服务器端渲染兼容:与服务器端应用程序兼容。
水平和垂直方向:水平和垂直移动;即,我们可以从左到右或从上到下,反之亦然,视情况而定。
支持外部控制:支持外部设备进行控制,例如用于导航的外部鼠标。
多种文件格式:支持照片、视频、文本内容,以及任何你能想到的;每个直接子级对应于一张幻灯片。
适应性极强:能够适应与其他组件集成的新功能

使用轮播的最显着优势是它们允许多条信息共享站点上相同的主要真实空间。这可以帮助减少关于谁的材料最应得的内讧。另一个优点是,由于更多信息显示在可视区域顶部附近,人们可能有更多机会看到它。

道具

React-Responsive-Carousel 接收所有 Carousel 组件作为 props (例如,我们轮播中的每张幻灯片都将作为子项传递,但是要自定义它们,我们需要使用我们的renderItemprop)。让我们看看 Carousel 中的其他道具。

autoFocus:当轮播渲染时,强制强调它。
autoPlay:幻灯片会根据间隔道具自动变化。
onSwipeMove:触摸事件作为参数传递给在每次滑动时触发的回调。
onClickItem:当前索引和项目作为参数传递给回调以处理幻灯片上的单击事件。
centreMode:根据centerSlidePercentage设置幻灯片宽度,将当前项居中。
transitionTime:幻灯片之间的过渡时间。 350 是默认设置。
infiniteLoop:为轮播启用无限循环选项。默认设置为假。
centerMode:将next和previous设置为两侧的一半,centerMode 在中心显示活动幻灯片;这仅在水平轴上起作用。
labels:更改项目、下一个和上一个箭头的标签。
showStatus:在右上角,显示幻灯片的数量(当前和总数)。默认设置为真。
showIndicators:轮播底部有点导航。默认设置为真。
showThumbs:可以启用或禁用轮播图片缩略图。默认设置为真。
swipeable:在拖动时启用滑动。默认设置为真。
thumbWidth:可以自定义缩略图的宽度。

开源会话重放

OpenReplay是一个开源的会话重播套件,可让您查看用户在您的 Web 应用程序上的操作,帮助您更快地解决问题。 OpenReplay 是自托管的,可以完全控制您的数据。

[](https://res.cloudinary.com/practicaldev/image/fetch/s--cO1f9e_o--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://static.openreplay .com/images/banner-blog.png)

开始享受您的调试体验 -免费开始使用 OpenReplay.

React Slide App with Carousel

为了将我们的知识付诸实践,我们将使用我们的 React-Responsive-Carousel 创建一个滑块应用程序。为此,我们将首先创建我们的 React 应用程序。

启动项目

首先,我们将使用npx create-react-app命令创建我们的 React 项目。

npx create-react-app slider-app

进入全屏模式退出全屏模式

现在我们进入我们的slider-app目录并安装我们的React-Responsive-Carousel包。

cd slider-app
npm install react-responsive-carousel --save
npm start

进入全屏模式退出全屏模式

创建图库组件

在这里,我们将创建一个新组件Gallery,它将用作应用程序中的主要组件。

// src/component/Gallery.js
import React from "react";
import "react-responsive-carousel/lib/styles/carousel.min.css"; // requires a loader
import { Carousel } from 'react-responsive-carousel';
class Gallery extends React.Component {
    render() {
        return (
            <div>
                <h2>My Photo Gallery</h2>
                <Carousel autoPlay interval="5000" transitionTime="5000" infiniteLoop>
                    <div>
                        <img src="https://media.istockphoto.com/photos/concept-picture-id1154231467" alt="" />
                        <p className="legend">My Photo 1</p>
                    </div>
                    <div>
                        <img src="https://images.unsplash.com/photo-1656268164012-119304af0c69?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1112&q=80" alt="" />
                        <p className="legend">My Photo 2</p>
                    </div>
                    <div>
                        <img src="https://images.unsplash.com/photo-1655745653127-4d6837baf958?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80" alt="" />
                        <p className="legend">My Photo 3</p>
                    </div>
                    <div>
                        <img src="https://images.unsplash.com/photo-1516527653392-602455dd9cf7?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1167&q=80" alt="" />
                        <p className="legend">My Photo 4</p>
                    </div>
                    <div>
                        <img src="https://images.unsplash.com/photo-1655365225165-8d727fe3a091?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHw4fHx8ZW58MHx8fHw%3D&auto=format&fit=crop&w=800&q=80" alt="" />
                        <p className="legend">My Photo 5</p>
                    </div>
                </Carousel>
            </div>
        )
    };
}
export default Gallery

进入全屏模式退出全屏模式

在上面的代码中,我们从 react-responsive-carousel 中导入了Carousel函数,该函数用于包装图像轮播的项目。这将自动从放置在其中的项目中创建一个轮播滑块。

此外,我们导入了carousel.min.css以将所需的样式和动画添加到轮播中。为了显示我们的图像,我们使用了来自Unsplash的照片的在线链接。如果您不想这样做或将文件存储在本地,则可以将它们放在 public/assets 文件夹中。

实现图像轮播

我们这里要做的就是在 App.js 文件中导入我们已经配置好的Gallery组件,如下所示;

// App.js
import './App.css';
import Gallery from './component/Gallery';
function App() {
    return (
    <div className="App">
        <Gallery />
    </div>
    );
}
export default App;

进入全屏模式退出全屏模式

这里我们已经导入了Gallery组件。现在我们可以回到我们的 React 应用程序,看看我们是如何坚持的。

[](https://res.cloudinary.com/practicaldev/image/fetch/s--QvuSRd35--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://blog.openreplay.com /static/de8549248299f13832a470f938dd3955/2e7af/image02.png)

我们的应用程序似乎正在运行,现在每当我们单击“下一步”按钮时,我们都会转到下一个图像;如果我们再次单击,我们将转到下一个图像,依此类推。接下来,为了让我们的应用程序作为滑块应用程序工作,我们需要实现一个autoPlay函数,以便我们可以在不使用按钮的情况下查看我们的幻灯片,因此我们已经在我们的应用程序中实现了它。

在 React 响应式轮播中启用自动播放

我们将通过在<Carousel>组件上添加autoplay属性来在轮播中集成自动播放功能。然后我们添加interval属性,它将为自动滑动定义一个以毫秒为单位的时空。

<Carousel autoPlay interval="5000">
...
</Carousel>

进入全屏模式退出全屏模式

设置轮播方向

我们将旋转木马设置为水平或垂直方向移动。为此,我们需要将axis属性设置为水平或垂直。

<Carousel autoPlay axis="horizontal" >
...
</Carousel>

进入全屏模式退出全屏模式

循环转盘运动

对于我们的最终实现,我们希望幻灯片在到达最后一个图像/视频后重新开始;即,我们的 Carousel 运动将在结束时循环播放。为此,我们将在下面添加infiniteLoop 属性;

<Carousel autoPlay axis="vertical" infiniteLoop>
...
</Carousel>

进入全屏模式退出全屏模式

[](https://res.cloudinary.com/practicaldev/image/fetch/s--pjpBUGgJ--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_66%2Cw_880/https://blog.openreplay.com /89f60480d03792de511fddcdffffa213/image03.gif)

结论

React 为 Carousel 提供了大量的组件,其中包括Swiper、React-Image-Gallery,不要忘记React-Responsive-Carousel等等。他们深受电子商务企业的喜爱,并致力于增强应用程序在电子商务网站和应用程序中的功能。此外,React Carousel 比其他 UI 组件接收更多的交互。正因为如此,每个电子商务或购物网站的显示屏上都有几个轮播。

尽管制作 React Carousel 很费力,但努力并没有白费。您的 React 应用程序具有无缝架构。此外,由于插件和 React 库的可用性,您可以快速构建轮播。主要缺点是,与从头开始开发相比,您不能修改插件的每个方面。单击源代码和的链接获取我们的实时应用程序。

资源

响应式轮播
Github

时事通讯

React

React社区为您提供最前沿的新闻资讯和知识内容

更多推荐

SSR、ISR、CSR、SSG有什么区别

简介 SSR、ISR、CSR 和 SSG 被称为渲染模式,因为它们是 Web 应用程序相互渲染的不同方式。在本文中,我们将详细研究它们中的每一个,并讨论使用它们的 Web 技术/框架的类型。企业社会责任 CSR 代表客户端渲染。这是一个将页面加载到客户端浏览器而不是服务器上的过程。 CSR 是一种呈现模式,其中浏览器向服务器发送请求,服务器通过发送一个空的 HTML 页面进行响应,其中仅包含对

React

React 中具有“显示更多/更少”功能的代码列表项

我想在我的页面上显示一个元素列表,并且我希望每个元素都具有“显示更多/更少”功能来随意扩展和缩短文本。为此,我将使用 React。我将从以下虚拟 API 获取一些假数据 u003d>jsonplaceholder.typicode.com 我将使用axios这样做。我的结构中将包含三个页面:App.js、Texts.js 和 Text.js。你可以在这里找到 repo u003d>githu

React

React::Angular

苹果与橙子 Angular vs. React:比较苹果和橘子有人说比较 React 和 Angular 就像比较_苹果和橘子_。一个是处理视图的库,另一个是_完整的框架_。反应 React 由 Facebook 开发和维护,并用于他们的产品,包括 Instagram 和 WhatsApp。它自 2013 年以来已经存在了大约,所以它并不是全新的。它也是 GitHub 上最受欢迎的项目之一,