Swiper - 不需要使用到 jQuery 的輪播套件

Feb 12, 2020

本站不會更新了
新家網址：https://chupai.github.io/
文章：https://chupai.github.io/posts/200212_swiper/

tags: `Swiper` `w3HexSchool`

六角 w3HexSchool 鼠年全馬鐵人挑戰第二週，就簡單的整理 Swiper 如何使用。

簡介

Swiper 是一款免費以及輕量級的 JS 框架，常用於移動設備的內容觸摸滑動。

最重要的是 「不需要使用到 jQuery」。

更詳細介紹，請見官方：

目前 Swiper 版本為 Swiper5，Swiper5 對比 Swiper4 的 API 並無太大變化。Swiper5 增加了 cssMode，並且可以通過 CSS 修改 Swiper 顏色風格。

一些基本範例，可以參考 Swiper Demos。

安裝

需要用到的檔案有 swiper.min.js 和swiper.min.css 檔案。

下載：

Swiper GitHub repository
NPM：
```
$ npm install swiper
```

CDN：

<link rel="stylesheet" href="https://unpkg.com/swiper/css/swiper.css">
<link rel="stylesheet" href="https://unpkg.com/swiper/css/swiper.min.css">

<script src="https://unpkg.com/swiper/js/swiper.js"></script>
<script src="https://unpkg.com/swiper/js/swiper.min.js"></script>

cdnjs - Swiper

配置：

<!DOCTYPE html>
<html>
<head>
    ...
    <link rel="stylesheet" href="https://unpkg.com/swiper/css/swiper.min.css">
</head>
<body>
    ...
    <script src="https://unpkg.com/swiper/js/swiper.min.js"></script>
</body>
</html>

初始化 Swiper

new Swiper(swiperContainer, parameters);

swiperContainer：要控制的 Swiper 容器，可以是 DOM 元素 或字串（CSS 選擇器）
parameters：一個物件，為 Swiper 的配置參數

var mySwiper = new Swiper('.swiper-container', {
  // 配置參數
});

詳細配置參數，可以參考 Swiper API。

假設初始化時，沒有定義 Swiper 實體，可以透過 Swiper 的HTML 元素來獲取該實體。

new Swiper('.swiper-container');

var mySwiper = document.querySelector('.swiper-container').swiper;

Swiper 實體有屬性與方法可以使用，還可以監聽事件。

Layout

1. Swiper 容器

一個 Swiper 就對應到一個 container。

<div class="swiper-container">
</div>

var mySwiper = new Swiper ('.swiper-container');

如果一個頁面有很多個 Swiper，可以給每個容器加上 ID 或 Class 區分。

<div class="swiper-container" id="swiper1">....</div>
<div class="swiper-container" id="swiper2">....</div>
<div class="swiper-container" id="swiper3">....</div>

var swiper1 = new Swiper('#swiper1');
var swiper2 = new Swiper('#swiper2');
var swiper3 = new Swiper('#swiper3');

我們可以為這個容器設置大小：

.swiper-container {
  width: 600px;
  height: 300px;
}  

2. slide 元件

Swiper 的每個展示區塊為一個 slide，全部的 slide 會放在一個 wrapper 中。

<div class="swiper-container">
  <div class="swiper-wrapper">
    <div class="swiper-slide">Slide 1</div>
    <div class="swiper-slide">Slide 2</div>
    <div class="swiper-slide">Slide 3</div>
  </div>
</div>

3. 控制元件

除了 slide 外，還可以包含其他控制元件，可以自由選擇你需要的。。

<div class="swiper-container">
  <div class="swiper-wrapper">
    <div class="swiper-slide">Slide 1</div>
    <div class="swiper-slide">Slide 2</div>
    <div class="swiper-slide">Slide 3</div>
  </div>
  
  <!-- Pagination -->
  <div class="swiper-pagination"></div>

  <!-- Navigation -->
  <div class="swiper-button-prev"></div>
  <div class="swiper-button-next"></div>

  <!-- Scrollbar -->
  <div class="swiper-scrollbar"></div>
</div>

var mySwiper = new Swiper ('.swiper-container', {

  // Pagination
  pagination: {
    el: '.swiper-pagination',
  },

  // Navigation
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },

  // Scrollbar
  scrollbar: {
    el: '.swiper-scrollbar',
  },
});

控制元件可以放在 container 之外，但需要設置 uniqueNavElements: false。

3. 對應的 class 名稱

容器、元件、狀態，對應的 class 名稱，都可以透過選項更改。

舉例來說，將預設的 swiper-wrapper 替換成 my-wrapper：

var mySwiper = new Swiper('.swiper-container',{
  wrapperClass : 'my-wrapper',
});

容器：

swiper-container：Swiper 容器
- 選項：containerModifierClass
swiper-wrapper：slide 容器
- 選項：wrapperClass

slide 元件：

swiper-container：slide 元件
- 選項：slideClass
swiper-slide-active：active 狀態的 slide 元件
- 選項：slideActiveClass
swiper-slide-visible：可視區塊的 slide 元件
- 選項：slideVisibleClass
swiper-slide-next：active slide 的下一個 slide 元件
- 選項：slideNextClass
swiper-slide-prev：active slide 的上一個 slide 元件
- 選項：slidePrevClass

基本配置

1. `background-img`

<div class="swiper-container">
  <div class="swiper-wrapper">
    <div class="swiper-slide" style="background-image:url('')"></div>
    ...
  </div>
</div>

.swiper-container {
  width: 600px;
  height: 300px;
}

.swiper-slide {
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}

2. `<img>`

    <div id="swiper1" class="swiper-container">
      <div class="swiper-wrapper">
        <div class="swiper-slide">
          <img src="" alt="" />
        </div>
        ...
      </div>
    </div>

.swiper-container {
  width: 600px;
  height: 300px;
}

.swiper-slide > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

const mySwiper = new Swiper('.swiper-container');

3. `slidesPerView`

slidesPerView 能設置同時顯示的 slide 數量，slide 的大小由 container 寬去等分。

const mySwiper = new Swiper('.swiper-container', {
  slidesPerView: 2,
});

4. 依 slide 大小顯示

如果想要依 slide 大小來顯示，可以將 slidesPerView 設為 'auto'。

.swiper-slide {
  width: 300px;
  height: 200px;
}

.swiper-slide > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

const mySwiper = new Swiper('.swiper-container', {
  slidesPerView: 'auto',
});

3D Cube Effect

3D Cube Effect：effect: 'cube'。

cubeEffect 參數：

slideShadows：slide 陰影。預設為 true。
shadow：投影。預設為 true。
shadowOffset：投影距離（px）。預設為 20。
shadowScale：投影縮放比例。預設為 0.94。

const mySwiper = new Swiper('.swiper-container', {
  effect: 'cube',
  cubeEffect: {
    slideShadows: true,   // slide 陰影
    shadow: true,         // 投影
    shadowOffset: 20,     // 投影距離（px） 
    shadowScale: 0.94,    // 投影縮放比例
  },
});

1. 基本

將 container 設為方塊大小。

<div class="swiper-container">
  <div class="swiper-wrapper">
    <div class="swiper-slide" style="background-image:url('')"></div>
    <div class="swiper-slide" style="background-image:url('')"></div>
    ...
  </div>
</div>

.swiper-container {
  width: 300px;
  height: 300px;
}

.swiper-slide {
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}

const mySwiper = new Swiper('.swiper-container', {
  effect: 'cube',
});

2. 卡片

slide 內放置 card 元件，將 container 的寬設為 card 的寬，card 不需設置寬度：。

<div class="swiper-container">
  <div class="swiper-wrapper">
    <div class="swiper-slide">
      <div class="card">
        <div class="card__img">
          <img src="" alt="" />
        </div>
        <div class="card__body">
          <h2 class="card__title">
            Lorem ipsum
            <span>Web Designer</span>
          </h2>
        </div>
      </div>
    </div>
    <div class="swiper-slide">...</div>
    ...
  </div>
</div>

.swiper-container {
  width: 300px;
  height: auto;
}
.card {
  background-color: white;
}

.card ...

3D Coverflow Effect

3D Coverflow：effect : 'coverflow'。

coverflowEffect 參數：

slideShadows：slide 陰影。預設為 true。
rotate：slide 做 3D 旋轉時 Y 軸的旋轉角度。預設為 50。
stretch：每個 slide 之間的拉伸直，越大 slide 靠得越緊。預設為 0。
depth：slide 的位置深度值，值越大 z 軸距離越遠，看起來越小。預設為 100。

modifier：depth 和 rotate 和 stretch 的倍率。預設為 1。

const mySwiper = new Swiper('.swiper-container',{
slidesPerView: 'auto',
centeredSlides: true,
effect : 'coverflow',
coverflowEffect: {
  slideShadows : true,
  rotate: 50,
  stretch: 0,
  depth: 100,
  modifier: 1,
},
});

1. 基本

<div class="swiper-container">
  <div class="swiper-wrapper">
    <div class="swiper-slide" style="background-image:url('')"></div>
    <div class="swiper-slide" style="background-image:url('')"></div>
    ...
  </div>
</div>

.swiper-container {
  width: 100%;
}

.swiper-slide {
  width: 200px;
  height: 200px;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}

const mySwiper = new Swiper('.swiper-container', {
  effect: 'coverflow',
  slidesPerView: 'auto',    
  centeredSlides: true,
});

必設參數：

slidesPerView: 'auto'，根據 slide 的寬度來設定 slide 可視數量。
centeredSlides，active slide 會置中，而不是預設狀態下的靠左。

2. Card

將 card 元件加上 swiper-slide，並設置寬度：

<div id="mySwiper" class="swiper-container">
  <div class="swiper-wrapper">
    <div class="card swiper-slide">
      <img src="" alt="" class="card__img"/>
      <div class="card__body">
        <h3>Lorem ipsum0</h3>
        <span>Web Designer</span>
      </div>
    </div>
    <div class="card swiper-slide">...</div>
    <div class="card swiper-slide">...</div>
    <div class="card swiper-slide">...</div>
  </div>
</div>

.swiper-container {
  width: 100%;
}

.card {
  width: 240px;
  border-radius: 8px;
  background: white;
  overflow: hidden;
}

如果 Card 元件要放在 swiper-slide 內有兩種做法：

將 slide 的寬設為 card 寬度，card 寬度設為 100%。
將 slide 的寬設為 auto !important，並設置 card 寬度。

<div id="mySwiper" class="swiper-container">
  <div class="swiper-wrapper">
    <div class="swiper-slide">
      <div class="card">
        <img src="" alt="" class="card__img"/>
        <div class="card__body">
          <h3>Lorem ipsum0</h3>
          <span>Web Designer</span>
        </div>
      </div>
    </div>
    <div class="swiper-slide">
      <div class="card">
        ...
      </div>
    </div>
  </div>
</div>

/* 作法一 */
.swiper-slide {
  width: 240px;
}
.card {
  width: 100%;
  /* ... */
}

/* 作法二 */
.swiper-slide {
  width: auto !important;
}

.card {
  width: 240px;
  /* ... */
}

這個範例稍微修改一下 coverflow 參數：

const mySwiper = new Swiper('.swiper-container', {
  effect: 'coverflow',
  slidesPerView: 'auto',
  centeredSlides: true,
  coverflowEffect: {
    slideShadows: true,
    rotate: 20,
    stretch: 0,
    depth: 350,
    modifier: 1,
  },
});

3D Flip Effect

3D Flip Effect：effect: 'cube'。

flipEffect 參數：

slideShadows：slide 的陰影。預設為 true。
limitRotation：限制最大旋轉角度為 180 度。預設為 true。

const mySwiper = new Swiper('.swiper-container',{
  effect : 'flip',
  flipEffect: {
    slideShadows : true,
    limitRotation : true,
  }
});

1. 基本

配置跟 3D Cube Effect 配置一樣：

const mySwiper = new Swiper('.swiper-container',{
  effect : 'flip',
});

2. 卡片

Fade Effect

Fade Effect effect: 'fade'。

fadeEffect 效果參數：

crossFade：淡出效果，預設為 false。

預設 crossFade 是關閉的，也就是所有 slide 是重疊在一起的。

const mySwiper = new Swiper('.swiper-container', {
  effect: 'fade',
  fadeEffect: {
    crossFade: false
  },
});

1. 基本

配置跟 3D Cube Effect 配置一樣：

const mySwiper = new Swiper('.swiper-container', {
  effect: 'fade',
});

Thumbs

Thumbs 元件為專門用於製作帶縮略圖的 Swiper，比使用 Controller 更為簡便，且在 loop 狀態下更友好。

有兩種寫法：

var thumbsSwiper = new Swiper('.swiper-container-thumbs', {
  slidesPerView: 5,
});

var mySwiper = new Swiper('.swiper-container', {
  ...
  thumbs: {
    swiper: thumbsSwiper
  }
});

或是：

var mySwiper = new Swiper('.swiper-container', {
  ...
  thumbs: {
    swiper: {
      el: '.swiper-container-thumbs',
      slidesPerView: 5,
      ...
    }
  }
});

縮圖的 Swiper active 狀態 slide 會被加上 .swiper-slide-thumb-active 的類名。

但不知道為什麼，我使用 4.5.1 版本的 CDN，.swiper-slide-thumb-active 不會加上去。

1. Thumbs Gallery

<div class="wrapper">
  <div class="swiper-container gallery-top">
    ...
  </div>
  <div class="swiper-container gallery-thumbs">
    ...
  </div>
</div>

.wrapper {
  width: 600px;
}

.swiper-slide {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
}

.gallery-top {
  width: 100%;
  height: 400px;
  bottom: 10px;
}

.gallery-thumbs {
  width: 100%;
  height: 100px;
}

.gallery-thumbs .swiper-slide {
  opacity: 0.4;
}

.gallery-thumbs .swiper-slide-thumb-active {
  opacity: 1;
}

const mySwiper = new Swiper('.gallery-top', {
  spaceBetween: 10,
  thumbs: {
    swiper: {
      el: '.gallery-thumbs',
      spaceBetween: 10,
      slidesPerView: 4,
      freeMode: true,
    },
  },
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },
});

總結

這週就先整到這，剩下的在慢慢玩。

Swiper - 不需要使用到 jQuery 的輪播套件

tags: Swiper w3HexSchool

簡介

安裝

初始化 Swiper

Layout

1. Swiper 容器

2. slide 元件

3. 控制元件

3. 對應的 class 名稱

基本配置

1. background-img

2. <img>

3. slidesPerView

4. 依 slide 大小顯示

3D Cube Effect

1. 基本

2. 卡片

3D Coverflow Effect

1. 基本

2. Card

3D Flip Effect

1. 基本

2. 卡片

Fade Effect

1. 基本

Thumbs

1. Thumbs Gallery

總結

tags: `Swiper` `w3HexSchool`

1. `background-img`

2. `<img>`

3. `slidesPerView`