在 React 專案使用 Swiper 建立幻燈片

前言

以下使用 Swiper 套件實作一個幻燈片,可以使用按鈕或是滑動的方式切換圖片。

建立專案

建立專案。

1
npx create-react-app swiper-react-example

安裝套件。

1
npm i swiper

實作

修改 App.js 檔。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
import { useRef } from 'react';
import { Swiper, SwiperSlide } from 'swiper/react';
import 'swiper/css';

const IMAGE_BASE_URL = 'https://raw.githubusercontent.com/memochou1993/nft-leopard-cat-images/main/output';

function App() {
const swiperRef = useRef();
return (
<>
<button onClick={() => swiperRef.current?.slidePrev()}>Prev</button>
<button onClick={() => swiperRef.current?.slideNext()}>Next</button>
<Swiper
onBeforeInit={(swiper) => {
swiperRef.current = swiper;
}}
onSwiper={(swiper) => console.log(swiper)}
>
{
[...Array(10).keys()].map((n) => (
<SwiperSlide key={n}>
<img src={`${IMAGE_BASE_URL}/${n}.png`} alt={n} />
</SwiperSlide>
))
}
</Swiper>
</>
);
}

export default App;

程式碼

參考資料