# 🏅Day36 - React 套件應用 (2) - Swiper.js

使用 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 秒執行一次。

<!-- 解答：

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,
      },
      autoplay: {
        delay: 5000,
      },
    });
  }, []);

  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"));

-->

| Name | Codepen |
| -------- | -------- |
| 7lun | [codepen](https://codepen.io/mfyvqhsn-the-bold/pen/bNeYQrR?editors=1010) |
|TWLeoC|[Codepen](https://codepen.io/TWLeoC/pen/azZErWW?editors=0010)|
| cks40660| [codepen](https://codepen.io/CKS40660/pen/dPXmBqQ)|
| Tetsu |[Codepen](https://codepen.io/ttgchang/pen/emzMwXe)|
| Chia |[Codepen](https://codepen.io/Chia-the-encoder/pen/emzMqJM)|
| Nooooora | [CodePen](https://codepen.io/Nora-Ch/pen/RNRybrV?editors=0010)|
| 小懿 | [CodePen](https://codepen.io/YT-the-vuer/pen/LEZmYWd?editors=0010)|
| RUDY | [CodePen](https://codepen.io/Rudy-crw/pen/ogLdgwK?editors=0010)|
| Eileen | [CodePen](https://codepen.io/Eileen-io/pen/zxBjxmb)|
| Jenna | [CodePen](https://codepen.io/abiscc14/pen/zxBjKQQ)|
| Percy | [CodePen](https://codepen.io/Percy-Ku/pen/YPWLpwp)|
| kashiwatei | [CodePen](https://codepen.io/kashiwatei/pen/VYjxmyb)|
| 社子畢卡索 | [CodePen](https://codepen.io/pen?template=LEZmbrx)|
| 地瓜 | [CodePen](https://codepen.io/ChippyYU/pen/ByzxpYX?editors=1010)|
| 老屠 | [CodePen](https://codepen.io/fsgfxvlb-the-selector/pen/pvbVwej?editors=0010)|
| Leonard | [CodePen](https://codepen.io/hyyfjqra-the-sans/pen/ZYOoaaB?editors=1010)|
| wind | [CodePen](https://codepen.io/wind7y/pen/azZGqqv) |
| Rogan | [CodePen](https://codepen.io/RoganHsu/pen/raLvZKZ?editors=1010) |
| Jin | [CodePen](https://codepen.io/Jin-L/pen/gbMzBYm) |
| 星雪糖 | [CodePen](https://codepen.io/vfpofbgm-the-scripter/pen/dPXegPY) |
| andy | [CodePen](https://codepen.io/ewnblckz-the-styleful/pen/VYjxqpO?editors=0010) |
| Melanie | [CodePen](https://codepen.io/pnrcspte-the-animator/pen/yyJjWPZ) |
| 平平 | [CodePen](https://codepen.io/ypinpin/pen/XJKqLVM) |
| JiaMori | [CodePen](https://codepen.io/jiamori/pen/ogLyYNN) |
| KOMATSU PEI | [CodePen](https://codepen.io/Komatsu2021/pen/dPXmBaa) |
| Miikaa | [codepen](https://codepen.io/Miikaa/pen/YPWjrZX) |
| 7Red | [CodePen](https://codepen.io/cch2655/pen/bNexzjW) |