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

React
, ,

前言

以下使用 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;

程式碼

參考資料