如何在 ReactJS 中创建图像滑块?

图像滑块在任何 Web 应用中都至关重要，它可以显示多张图片并提供良好的用户体验。每当我们访问像 amazon.com 或 cardekho.com 这样的知名网站时，它们都会在滑块中显示图片，而这些网站需要为每种产品显示多张图片。现在，如果他们只显示每张图片而不使用滑块，用户将无法正确查看图片，效果会更糟。

因此，在本教程中，我们将学习在 ReactJS 中创建图像滑块的各种方法。

使用 react-simple-image-slider Npm 包

react-simple-image-slider 允许我们在 ReactJS 中创建图像滑块。用户需要在项目目录中执行以下命令来下载 NPM 包。

npm i react-simple-image-slider

安装 react-simple-image-slider NPM 包后，用户可以将其导入到应用程序中并使用。

语法

用户可以按照以下语法使用 simpleImageSlider 组件。

<SimpleImageSlider
   width={690}
   height={470}
   images={sliderImages}
   showNavs={true}
/> 

在上述语法中，我们使用了 SimpleImageSlider 组件，并向该组件传递了一些 props。

示例

在下面的示例中，我们使用 SImpleImageSlider 组件创建了一个基本的图片滑块。我们将宽度和高度值作为 props 传递，宽度和高度的数字以像素为单位。此外，我们还创建了 sliderImages 对象数组，其中包含 URL 作为属性。之后，我们将 sliderImages 数组作为 prop 传递到组件中。

import React from "react";
import SimpleImageSlider from "react-simple-image-slider";
export default function App() {
   const sliderImages = [
      {
         url: "https://encryptedtbn0.gstatic.com/images?q=tbn:ANd9GcTdUmK6fRPfPQIMyOxUOjiTnR2VYizvkkWUxLhGoVJNobm5Id3fpRhsIGtPj3H06ujPb4&usqp=CAU",
      },
      {
         url: "https://encryptedtbn0.gstatic.com/images?q=tbn:ANd9GcQduUpBWhSdgkWqqIrSmw5MMU697Xlx3SCjlB4eZSv0Q&s",
      },
      {
         url: "https://encryptedtbn0.gstatic.com/images?q=tbn:ANd9GcTnzApyh1ZmbXLBUg_iFRio23hzRyAJfwBRfnVozXdEnu-NK4jFt2_gsYujKf-CbT6Cr_A&usqp=CAU",
      },
      {
         url: "https://encryptedtbn0.gstatic.com/images?q=tbn:ANd9GcTDnfOIY9gjVyoT4ulMp55roiV5KefqaDByUc0HdD8p3tdpXuwxTaXjhLdyUFeQzZ2ZwE&usqp=CAU",
      },
      {
         url: "https://encryptedtbn0.gstatic.com/images?q=tbn:ANd9GcR3IVlvufXIDZXxq0O8SVqwU2HeO6y7as0OXJl-YT55BA&s",
      },
      {
         url: "https://encryptedtbn0.gstatic.com/images?q=tbn:ANd9GcQs_7aafRRY4vEbWz2wydowaogMmGI7mRVG6MQfZVtKDFXUGqt5iF-Mu0AYMQBEeznPkU&usqp=CAU",
      },
      {
         url: "https://smartslider3.com/wpcontent/uploads/2019/01/photo_slideshow.jpg",
      },
   ];
   return (
      <div>
         <h3>
            {" "}
            Creating the image slider using the react-simple-image-slider
         </h3>
         <SimpleImageSlider
            width={500}
            height={250}
            images={sliderImages}
            showNavs={true}
         />
      </div>
   );
}

输出

示例

SimpleImageSlider 组件使用各种 props 来自定义图片滑块。这里，我们传入了 showBullets prop，用于在下方滑块中显示项目符号指示器。showNav prop 用于显示左右箭头。autoPlay prop 允许我们自动切换图片滑块，并且我们还设置了自动播放时长。此外，每当图片滑块发生变化时，我们都会调用回调函数并更新幻灯片编号。

import React, { useState } from "react";
import SimpleImageSlider from "react-simple-image-slider";
export default function App() {
   const [imageNum, setImageNum] = useState(1);
   const sliderImages = [
      {
         url: "https://img.freepik.com/free-photo/wide-angle-shot-singletree-growing-clouded-sky-during-sunset-surrounded-by-grass_181624-22807.jpg",
      },
      {
         url: "https://thumbs.dreamstime.com/b/lone-tree-meadow-sunriseidyllic-fabulous-landscapes-39659821.jpg",
      },
      {
         url: "https://encryptedtbn0.gstatic.com/images?q=tbn:ANd9GcSprPgYofGmXXPfuEDcZ_XI294n0bME5dTX9TGvINmPiA&s",
      },
      {
         url: "https://i.pinimg.com/474x/81/ca/47/81ca47eaae35615ba9a9bb57560aaa3c.jpg",
      },
      {
         url: "https://encryptedtbn0.gstatic.com/images?q=tbn:ANd9GcTof2fniv0mZzN8DByLmb6ILU4MvV_SGr_wptMeAut_dPaYMBkeHnHhD5egzU7MB0GSqE&usqp=CAU",
      },
   ];
   return (
      <div>
         <h3>
            {" "}
            Creating the image slider using the react-simple-image-slider
         </h3>
         <SimpleImageSlider
            width={500}
            height={250}
            images={sliderImages}
            showBullets={true}
            showNavs={true}
            autoPlay={true} 
            onStartSlide = {(index, length) => {
               setImageNum(index);
            }}
               autoPlayDelay = {3}
         />
         <div style = {{ fontSize: "1.5rem" }}>
            The current image slide No is {imageNum}.
         </div>
      </div>
   );
}

输出

在 ReactJS 中从零开始创建图片滑块

本节将教我们如何从零开始创建图片滑块。我们将创建 prevSlide() 和 nextSlide() 函数来更改滑块中的图片。

开始之前，用户需要在 React 项目中安装 Material UI 库，因为我们将使用其中的箭头图标。

npm install @mui/material @emotion/react @emotion/styled

语法

用户可以按照以下语法更改 ReactJS 滑块中的图片。

const nextSlide = () => {
   setCurrent(activeImageNum === length - 1 ? 0 : activeImageNum + 1);};const prevSlide = () => {
   setCurrent(activeImageNum === 0 ? length - 1 : activeImageNum - 1);};

在上述语法中，activeImageNum 变量跟踪滑块中的当前图像。nextSlide() 函数根据 activeImageNum 的当前值更改 activeImageNum 变量的值。prevSlide() 函数将 activeImageNum 变量的值减 1。

示例

文件名 - App.Js

在下面的文件中，我们添加了箭头图标来导航滑块中的图像。我们使用了 Material UI 中的箭头图标。当用户点击左箭头时，我们会调用 prevSlide() 函数;当用户点击右箭头时，我们会调用 nextSlide() 函数。

在 HTML 部分，我们检查幻灯片的索引是否等于 activeImageNum;如果等于，则仅显示图像;否则，隐藏图像。

import React from "react";
import { useState } from "react";
import ArrowBackIosIcon from "@mui/icons-material/ArrowBackIos";
import ArrowForwardIosIcon from "@mui/icons-material/ArrowForwardIos";
import "./App.css";
export default function App() {
   const sliderImages = [ 
      {
         url: "https://encryptedtbn0.gstatic.com/images?q=tbn:ANd9GcTdUmK6fRPfPQIMyOxUOjiTnR2VYizvkkWUxLhGoVJNobm5Id3fpRhsIGtPj3H06ujPb4&usqp=CAU",
      },
      {
         url: "https://encryptedtbn0.gstatic.com/images?q=tbn:ANd9GcQduUpBWhSdgkWqqIrSmw5MMU697Xlx3SCjlB4eZSv0Q&s",
      },
      {
         url: "https://encryptedtbn0.gstatic.com/images?q=tbn:ANd9GcTnzApyh1ZmbXLBUg_iFRio23hzRyAJfwBRfnVozXdEnu-NK4jFt2_gsYujKf-CbT6Cr_A&usqp=CAU",
      },
      {
         url: "https://encryptedtbn0.gstatic.com/images?q=tbn:ANd9GcTDnfOIY9gjVyoT4ulMp55roiV5KefqaDByUc0HdD8p3tdpXuwxTaXjhLdyUFeQzZ2ZwE&usqp=CAU",
      },
      {
         url: "https://encryptedtbn0.gstatic.com/images?q=tbn:ANd9GcR3IVlvufXIDZXxq0O8SVqwU2HeO6y7as0OXJl-YT55BA&s",
      },
      {
         url: "https://encryptedtbn0.gstatic.com/images?q=tbn:ANd9GcQs_7aafRRY4vEbWz2wydowaogMmGI7mRVG6MQfZVtKDFXUGqt5iF-Mu0AYMQBEeznPkU&usqp=CAU",
      },
      {
         url: "https://smartslider3.com/wpcontent/uploads/2019/01/photo_slideshow.jpg",
      },
   ];
   const [activeImageNum, setCurrent] = useState(0);
   const length = sliderImages.length;
   const nextSlide = () => {
      setCurrent(activeImageNum === length - 1 ? 0 : activeImageNum + 1);
   };
   const prevSlide = () => {
      setCurrent(activeImageNum === 0 ? length - 1 : activeImageNum - 1);
   };
   if (!Array.isArray(sliderImages) || sliderImages.length <= 0) {
      return null;
   }
   return (
      <div>
         <h2>
            {" "}
            Creating the image slider from scratch in ReactJS
         </h2>
         <section className = "image-slider">
            <div class = "left">
               <ArrowBackIosIcon onClick = {prevSlide} />
            </div>
            <div class="right"> 
               <ArrowForwardIosIcon onClick = {nextSlide} />
            </div>
            {sliderImages.map((currentSlide, ind) => {
               return (
                  <div
                     className={ind === activeImageNum ? "currentSlide active" : "currentSlide"}
                     key={ind}
                  >
                     {ind === activeImageNum && <img src={currentSlide.url} className="image" />}
                  </div>
               );
            })}
         </section>
      </div>
   );
}

文件名 – App.css

.image-slider {
   position: relative;
   height: 400px;
   display: flex;
   justify-content: center;
   align-items: center;
}
.image {
   width: 450px;
   height: 300px;
   border-radius: 12px;
}
.left {
   position: absolute;
   left: 3rem;
   top: 50%;
   font-size: 1rem;
   color: blue;
   z-index: 5;
   cursor: pointer;
   user-select: none;
}
.right {
   position: absolute;
   right: 3rem;
   top: 50%;
   font-size: 2rem;
   color: blue;
   z-index: 5;
   cursor: pointer;
   user-select: none;
}
.currentSlide {
   transition-duration: 0.5s ease;
   opacity: 0;
}
.currentSlide.active {
   opacity: 1;
   transition-duration: 0.5s;
   transform: scale(1.2);
}
h2 {text-align: center;} 

输出

相关文章

• 在 React Native 应用中添加动画加载器和启动画面
• 在 React JS 中创建链接的二维码
• 使用 React-Three-Fiber 在 React 中创建天空着色器
• 在 React JS 中创建动画加载骨架
• 使用纯 CSS 和 HTML 在 React JS 中创建 PDF
• React JS 中的设备检测和响应式设计
• 使用 React-Three-Fiber 在 React 中创建 3D 金属纹理盒子
• React JS 中的文件拖放功能
• 使用 react-archer 在 React JS 中绘制 DOM 元素之间的箭头
• 使用 React JS 创建富文本编辑器

有用资源

• javascript 参考教程 - 该教程包含有关 javascript 的更多信息:https://www.cainiaomax.com/javascript/