ReactJS - 輪播：初學者指南

你好，未來的反應精靈！今天，我們將踏上一段令人興奮的旅程，進入ReactJS輪播的世界。別擔心你對編程還是新手——我會成為你的友好導遊，我們會一步一步地進行。在這個教學結束時，你將能像專業人士一樣輕鬆地制作輪播！

輪播是什麼？

在我們深入研究代碼之前，讓我們先了解輪播是什麼。想像你在翻閱一本相冊，但不是翻頁，而是照片平滑地滑入和滑出視野。這基本上就是網站上的輪播所做的！

輪播，也稱為幻燈片或圖片滑動器，是一種流行的網頁組件，以循環方式顯示一系列內容（通常是圖片）。它就像一條信息傳送帶，用戶可以通過它來導航。

在React中使用輪播的原因

React非常適合构建輪播，因為它具有基于组件的架構。我們可以創建一個可重用的輪播组件，可以輕鬆地將其放入我們應用的任何部分。此外，React的高效渲染使得我們的輪播平滑且性能良好。

建立我們的輪播组件

讓我們挽起袖子開始編碼！我們將一步一步地构建這個輪播，並在進行的同時解釋每一部分。

步驟 1：設置項目

首先，確保你已經安裝了Node.js。然後，創建一個新的React項目：

npx create-react-app react-carousel
cd react-carousel
npm start

步驟 2：創建輪播组件

讓我們在src文件夹中創建一個名為Carousel.js的新文件。這是我們的初始結構：

import React, { useState } from 'react';

const Carousel = ({ images }) => {
const [currentIndex, setCurrentIndex] = useState(0);

return (
<div className="carousel">
{/* 我們將在此處添加輪播內容 */}
</div>
);
};

export default Carousel;

在這裡，我們使用useState hook來追踪當前顯示的圖片。

步驟 3：顯示當前圖片

讓我們添加代碼來顯示我們的當前圖片：

import React, { useState } from 'react';

const Carousel = ({ images }) => {
const [currentIndex, setCurrentIndex] = useState(0);

return (
<div className="carousel">
<img src={images[currentIndex]} alt={`幻燈片 ${currentIndex}`} />
</div>
);
};

export default Carousel;

我們使用currentIndex來確定從我們的images數組中顯示哪張圖片。

步驟 4：添加導航按鈕

現在，讓我們添加一些按鈕來導航我們的圖片：

import React, { useState } from 'react';

const Carousel = ({ images }) => {
const [currentIndex, setCurrentIndex] = useState(0);

const goToPrevious = () => {
const isFirstSlide = currentIndex === 0;
const newIndex = isFirstSlide ? images.length - 1 : currentIndex - 1;
setCurrentIndex(newIndex);
};

const goToNext = () => {
const isLastSlide = currentIndex === images.length - 1;
const newIndex = isLastSlide ? 0 : currentIndex + 1;
setCurrentIndex(newIndex);
};

return (
<div className="carousel">
<button onClick={goToPrevious}>上一個</button>
<img src={images[currentIndex]} alt={`幻燈片 ${currentIndex}`} />
<button onClick={goToNext}>下一個</button>
</div>
);
};

export default Carousel;

我們添加了兩個函數，goToPrevious和goToNext，它們更新我們的currentIndex。注意我們如何處理邊緣情況——當我們在第一張或最後一張圖片時。

步驟 5：添加一些樣式

讓我們通過一些CSS來讓我們的輪播看起來更漂亮。在src文件夹中創建一個名為Carousel.css的新文件：

.carousel {
display: flex;
align-items: center;
justify-content: center;
height: 400px;
}

.carousel img {
max-width: 100%;
max-height: 100%;
}

.carousel button {
margin: 0 10px;
}

不要忘記在您的Carousel.js中導入這個CSS文件：

import React, { useState } from 'react';
import './Carousel.css';

// ... 其餘的组件代碼

步驟 6：使用我們的輪播

最後，讓我們在我們的App.js中使用我們新的輪播组件：

import React from 'react';
import Carousel from './Carousel';

const App = () => {
const images = [
'https://picsum.photos/id/1018/1000/600/',
'https://picsum.photos/id/1015/1000/600/',
'https://picsum.photos/id/1019/1000/600/'
];

return (
<div className="App">
<h1>我的驚艷輪播</h1>
<Carousel images={images} />
</div>
);
};

export default App;

這就是全部！一個用React构建的全功能輪播。

高級功能

現在我們已經掌握了基本知識，讓我們看看如何提升我們的輪播：

自動播放

我們可以添加一個自動播放功能來自動循環圖片：

import React, { useState, useEffect } from 'react';

const Carousel = ({ images, autoPlayInterval = 3000 }) => {
const [currentIndex, setCurrentIndex] = useState(0);

useEffect(() => {
const timer = setInterval(() => {
goToNext();
}, autoPlayInterval);

return () => clearInterval(timer);
}, [currentIndex]);

// ... 其餘的组件代碼
};

點導航

我們可以添加點狀指示器來顯示我們在哪个幻燈片上，並讓用戶跳转到特定幻燈片：

const Carousel = ({ images }) => {
// ... 現有代碼

return (
<div className="carousel">
{/* ... 現有元素 */}
<div className="dots">
{images.map((_, index) => (
<span
key={index}
className={`dot ${index === currentIndex ? 'active' : ''}`}
onClick={() => setCurrentIndex(index)}
/>
))}
</div>
</div>
);
};

不要忘記在CSS中樣式化您的新點！

結論

恭喜你！你剛剛從頭開始构建了一個React輪播。我們已經介紹了創建輪播组件的基本知識，添加導航，甚至觸及了一些高級功能，如自動播放和點導航。

記住，熟能生巧。嘗試為輪播添加自己的功能或樣式。也許添加一些平滑的過渡效果，或者嘗試不同的佈局。

快樂編程，願你的輪播永遠順暢！

方法	描述
useState	React hook用於為功能组件添加狀態
useEffect	React hook用於在功能组件中執行副作用
setInterval	JavaScript函數，用於以固定時間間隔調用函數
clearInterval	JavaScript函數，用於停止setInterval中指定的函數的執行
map	JavaScript數組方法，用於創建一個新數組，其中包含對每個元素調用提供的函數的結果
onClick	React事件處理器，用於點擊事件

Credits: Image by storyset