使用 React 搭配 swiper.js 可以輕鬆建立美觀的滑動輪播效果。Swiper 提供了多種配置選項，支持無限滾動、自動播放、垂直滾動、懸停停止等多種功能。以下介紹如何在 React 中引入 Swiper，並實現一個簡單的圖片輪播範例。
官方連結

const { useEffect } = React;

function App() {
  useEffect(() => {
    new Swiper(".swiper-container", {
      slidesPerView: 1,
      spaceBetween: 10,
      navigation: {
        nextEl: ".swiper-button-next",
        prevEl: ".swiper-button-prev",
      },
      pagination: {
        el: ".swiper-pagination",
        clickable: true,
      },
    });
  }, []);

  return (
    <div className="swiper-container">
      <div className="swiper-wrapper">
        <div className="swiper-slide">Slide 1</div>
        <div className="swiper-slide">Slide 2</div>
        <div className="swiper-slide">Slide 3</div>
        <div className="swiper-slide">Slide 4</div>
      </div>
      <div className="swiper-pagination"></div>
      <div className="swiper-button-next"></div>
      <div className="swiper-button-prev"></div>
    </div>
  );
}

ReactDOM.render(<App />, document.getElementById("root"));

另外也可以加入在 new Swiper 中加入 autoplay、loop 等設定，例如：

const { useEffect } = React;

function App() {
  useEffect(() => {
    new Swiper(".swiper-container", {
      slidesPerView: 1,              // 每次顯示的幻燈片數量
      spaceBetween: 50,              // 兩張圖片之間的間距
      navigation: {                  // 啟用左右箭頭
        nextEl: ".swiper-button-next",
        prevEl: ".swiper-button-prev",
      },
      pagination: {                  // 啟用下方的點點導航
        el: ".swiper-pagination",
        clickable: true,
      },
      autoplay: {                    // 自動播放，每隔 3 秒切換
        delay: 3000,
      },
      loop: true,                    // 循環播放
    });
  }, []);

  return (
    <div className="swiper-container">
      <div className="swiper-wrapper">
        <div className="swiper-slide">Slide 1</div>
        <div className="swiper-slide">Slide 2</div>
        <div className="swiper-slide">Slide 3</div>
        <div className="swiper-slide">Slide 4</div>
      </div>
      <div className="swiper-pagination"></div>
      <div className="swiper-button-next"></div>
      <div className="swiper-button-prev"></div>
    </div>
  );
}

ReactDOM.render(<App />, document.getElementById("root"));

題目

請複製（右下角 fork）這個範例，並且完成下面條件：

1. 在 useEffect 中加入 new Swiper，使 swiper 可能正常運作。

2. 加入 slidesPerView、spaceBetween 並且帶入值都為 3。

3. 加入 navigation、pagination 以及 autoplay 每 5 秒執行一次。

回報流程

將答案寫在 CodePen 並複製 CodePen 連結貼至底下回報就算完成了喔!
解答位置請參考下圖（需打開程式碼的部分觀看）

回報區

#	Discord	CodePen / 答案
1	Sonia	Codepen
2	Noy(Toad)	Codepen
3	LinaChen	Codepen
4	4chan	Codepen
5	ya_meow	Codepen
6	毛巾	Codepen
7	Nocab	Codepen
8	Hailey	CodePen
7	Nocab	Codepen
9	泊岸	CodePen
10	Aaron 謝宗佑	CodePen
11	嚼勁先生	CodePen
12	mercury2508	Codepen
13	Kaya	Codepen
14	tim	Codepen
15	Amanda	Codepen
16	邵	Codepen
17	Jasmine	Codepen
18	Johnson	Codepen
19	Rogan	Codepen
20	Toung	Codepen
21	Clove	Codepen
22	蘑菇星星	Codepen
23	郭芙蘭	Codepen
24	姜承	Codepen
25	jinliu214	Codepen

---

• 快速複製格式：

| 0 | user | [Codepen]() |