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

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）這個[範例](https://codepen.io/yen-kg/pen/MWNRpOX)，並且完成下面條件：

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

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

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

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

<!-- 解答：

const { useEffect } = React;

function App() {
  useEffect(() => {
    new Swiper(".swiper-container", {
      slidesPerView: 3,
      spaceBetween: 3,
      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"));

-->

回報區
---
| # | Discord | CodePen / 答案 |
|:---:|:-------------- |:----------------------------------------------------------------------------- |
| 1 | Sonia | [Codepen](https://codepen.io/YUJOU/pen/azoMNXP?editors=1111) |
| 2 | Noy(Toad) | [Codepen](https://codepen.io/MochiCodingPen/pen/ByBXKRO) |
| 3 | LinaChen | [Codepen](https://codepen.io/LinaChen/pen/XJWrzNN) |
| 4 | 4chan | [Codepen](https://codepen.io/ijuolaqc-the-looper/pen/YPzKEaO) |
| 5 | ya_meow | [Codepen](https://codepen.io/gkfxzvcb-the-bashful/pen/KwKPyrM?editors=0010)|
| 6 | 毛巾 | [Codepen](https://codepen.io/bqdcjboa-the-solid/pen/WbNedOp)|\
| 7 | Nocab | [Codepen](https://codepen.io/PeihanWang/pen/GgRKyyp?editors=1011)|
|8|Hailey|[CodePen](https://codepen.io/sxbokfja-the-flexboxer/pen/dPybmYZ?editors=1010)|
| 7 | Nocab | [Codepen](https://codepen.io/PeihanWang/pen/GgRKyyp?editors=1011)|
| 9 | 泊岸 |[CodePen](https://codepen.io/qoq77416416/pen/raNBdJy?editors=1010)|
| 10 | Aaron 謝宗佑 |[CodePen](https://codepen.io/aaron-hsieh/pen/ogNvqqd)|
| 11 | 嚼勁先生 |[CodePen](https://codepen.io/James520284/pen/QwWLrpp)|
| 12 | mercury2508 | [Codepen](https://codepen.io/Mercury2508/pen/GgRKdOp) |
| 13 | Kaya | [Codepen](https://codepen.io/kayaribi/pen/YPzKRxv) |
| 14 | tim | [Codepen](https://codepen.io/jskrtivy-the-animator/pen/qEBBdBe) |
| 15 | Amanda | [Codepen](https://codepen.io/cym199922/pen/ogNNPgy) |
| 16 |邵|[Codepen](https://codepen.io/ukscrlno-the-typescripter/pen/EaxaNoJ)|
| 17 | Jasmine | [Codepen](https://codepen.io/Jasmine-Lin-the-vuer/pen/EaxaZyV) |
| 18 | Johnson | [Codepen](https://codepen.io/crpbugqy-the-typescripter/pen/ogNgWrx) |
| 19 | Rogan | [Codepen](https://codepen.io/RoganHsu/details/GgRgxJv) |
| 20 | Toung | [Codepen](https://codepen.io/Toung/pen/VYwYOVv) |
| 21 | Clove | [Codepen](https://codesandbox.io/p/sandbox/wltsvt) |
| 22 | 蘑菇星星 | [Codepen](https://codepen.io/brrrieon-the-vuer/pen/RNwGorZ?editors=1010) |
| 23 | 郭芙蘭 | [Codepen](https://codepen.io/flora_Kuo/pen/pvoNxRQ?editors=1010) |
| 24 | 姜承 | [Codepen](https://codepen.io/Troy0718/pen/PwodeXx?editors=0110) |
| 25 | jinliu214 | [Codepen](https://codepen.io/jinliu214/pen/pvvXZOg?editors=0011) |
| 26 | chris | [Codepen](https://codepen.io/chris-chen-the-selector/pen/JodzVMr) |
| 0 | shin_kai | [Codepen](https://codepen.io/KAI-SHIN-the-animator/pen/raxjjKQ) |

---
- 快速複製格式：

| 0 | user | [Codepen]() |