# Swiper.js
用於製作自動輪播、換頁、滑動特效的輕量套件

效果範例：**Card Gallery with SwiperJS** by [Zoe](https://codepen.io/quicksilversel)

<iframe height="500" style="width: 50%;" scrolling="no" title="Card Gallery with SwiperJS" src="https://codepen.io/quicksilversel/embed/ExOdYya?default-tab=result" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
See the Pen <a href="https://codepen.io/quicksilversel/pen/ExOdYya">
Card Gallery with SwiperJS</a> by Zoe (<a href="https://codepen.io/quicksilversel">@quicksilversel</a>)
on <a href="https://codepen.io">CodePen</a>.
</iframe>

### Layout
* HTML結構

<!-- Slider main container -->
<div class="swiper">

<!-- Additional required wrapper -->
<div class="swiper-wrapper">

  <!-- Slides -->
  <div class="swiper-slide">Slide 1</div>
  <div class="swiper-slide">Slide 2</div>
  <div class="swiper-slide">Slide 3</div>
  ...
</div>

<!-- If we need pagination -->
<div class="swiper-pagination"></div>

<!-- If we need navigation buttons -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>

<!-- If we need scrollbar -->
<div class="swiper-scrollbar"></div>
</div>

<iframe height="400" style="width: 100%;" scrolling="no" title="Swiper - Layout" src="https://codepen.io/finnspace/embed/abXORKZ?default-tab=html%2Cresult&editable=true" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
See the Pen <a href="https://codepen.io/finnspace/pen/abXORKZ">
Swiper - Layout</a> by Finn Mao (<a href="https://codepen.io/finnspace">@finnspace</a>)
on <a href="https://codepen.io">CodePen</a>.
</iframe>

### 安裝：CDN
CSS:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@10/swiper-bundle.min.css"/>

JavaScript:

<script src="https://cdn.jsdelivr.net/npm/swiper@10/swiper-bundle.min.js"></script>

* 使用NPM安裝請參考[官網文件](https://swiperjs.com/get-started)

### 初始化
* `Swiper`函式包含兩個參數

    new Swiper (swiperContainer, parameters)

* `swiperContainer`：目標容器
* `parameters` *(optional)*：包含`Swiper`設定參數的物件
* 範例：
*

        const swiper = new Swiper ('.swiperContainer', {
          ... // 參數物件
        });

* 若初始化時沒有定義實體(instance)，可藉由HTML元素存取Swiper實體

    new Swiper('.swiperContainer');

    const swiper = document.querySelector('.swiperContainer').swiper;

* Swiper實體具備方法可供使用

    swiper.slideNext(speed, runCallbacks);

## Events: `on`
#### 方法一：初始化時使用`on`參數

// initialization
const swiper = new Swiper('.swiper', {
  ... // other parameters
  on: {
    init: function () {
      console.log('swiper initialized');
    },
  },
});

#### 方法二：初始化後使用`on`方法

// initialization
const swiper = new Swiper('.swiper', {
  ... // other parameters
});

swiper.on('slideChange', function () {
  console.log('slide changed');
});

#### 範例：Swiper click事件結合alert效果
<iframe height="400" style="width: 100%;" scrolling="no" title="Swiper - Events" src="https://codepen.io/finnspace/embed/RwvNjrv?default-tab=js%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
See the Pen <a href="https://codepen.io/finnspace/pen/RwvNjrv">
Swiper - Events</a> by Finn Mao (<a href="https://codepen.io/finnspace">@finnspace</a>)
on <a href="https://codepen.io">CodePen</a>.
</iframe>

* 其他Swiper支援事件見[官方文件](https://swiperjs.com/swiper-api#events)

## Modules
* [Swiper modules官方文件](https://swiperjs.com/swiper-api#modules)
### Autoplay
#### 範例：
1. 監聽按鈕click事件搭配`autoplay`方法
* `swiper.params.autoplay`取得參數物件，可修改屬性（範例reverse按鈕）
2. 游標進入Swiper容器時暫停自動切換
<iframe height="430" style="width: 100%;" scrolling="no" title="Untitled" src="https://codepen.io/finnspace/embed/PoXMXma?default-tab=result" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
See the Pen <a href="https://codepen.io/finnspace/pen/PoXMXma">
Swiper - Autoplay</a> by Finn Mao (<a href="https://codepen.io/finnspace">@finnspace</a>)
on <a href="https://codepen.io">CodePen</a>.
</iframe>

#### 參數

| parameters | type | default | description |
| -- | -- | -- | -- |
| `delay` | number | 3000 | 轉場的延遲時間，以毫秒為單位 |
| `disableOnInteraction` | boolean | true | 使用者進行互動後停止自動切換 |
| `pauseOnMouseEnter` | boolean | false | 滑鼠游標進入Swiper容器時暫停自動切換 |
| `reverseDirection` | boolean | false | 以反方向進行自動切換 |
| `stopOnLastSlide` | boolean | false | 播放最後一個slide後停止(循環模式下無效) |
| `waitForTransition` | boolean | true | 等待容器的過渡效果完成後才繼續自動切換 |

#### 屬性

| properties | value | description |
| -- | -- | -- |
| `swiper.paused` | boolean | 暫停自動切換 |
| `swiper.running` | boolean | 啟用並運行自動切換 |
| `swiper.timeLeft` | number | 若暫停自動切換，距離切換到下一個slide的時間 |

#### 方法

| methods | description |
| -- | -- |
| `swiper.pause()` | 暫停自動切換 |
| `swiper.resume()` | 恢復自動切換 |
| `swiper.start()` | 開始自動切換 |
| `swiper.stop()` | 繼續自動切換 |

## 參考文章
* [Swiper官方網站](https://swiperjs.com/)