資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理
化學
生物
數學
英語
經濟學
心理學
社會學
服裝學
法學如何在 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 元件建立了基本的圖片輪播。我們將寬度和高度值作為 prop 傳遞，寬度和高度的數值以畫素為單位。此外，我們建立了 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;}
輸出
更新於：2023年2月28日
18K+ 次瀏覽
廣告