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

這週是 六角鼠年鐵人賽 第二週，就簡單的整理 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：

1
2
3
4
5


<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

配置：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11


<!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

1

new Swiper(swiperContainer, parameters);

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

1
2
3


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

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

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

1
2
3


new Swiper('.swiper-container');

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

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

Layout

1. Swiper 容器

一個 Swiper 就對應到一個 container。

1
2


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

1

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

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

1
2
3


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

1
2
3


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

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

1
2
3
4


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

2. slide 元件

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

1
2
3
4
5
6
7


<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 外，還可以包含其他控制元件，可以自由選擇你需要的。。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17


<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>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18


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：

1
2
3


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`

1
2
3
4
5
6


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

 1
 2
 3
 4
 5
 6
 7
 8
 9
10


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

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

2. `<img>`

1
2
3
4
5
6
7
8


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

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11


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

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

1

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

3. `slidesPerView`

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

1
2
3


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

4. 依 slide 大小顯示

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

 1
 2
 3
 4
 5
 6
 7
 8
 9
10


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

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

1
2
3


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。

1
2
3
4
5
6
7
8
9


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

1. 基本

將 container 設為方塊大小。

1
2
3
4
5
6
7


<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>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10


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

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

1
2
3


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

2. 卡片

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

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19


<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>

1
2
3
4
5
6
7
8
9


.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。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12


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

1. 基本

1
2
3
4
5
6
7


<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>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11


.swiper-container {
  width: 100%;
}

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

1
2
3
4
5


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

必設參數：

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

2. Card

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

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14


<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>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10


.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 寬度。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18


<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>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18


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

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

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

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

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12


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。

1
2
3
4
5
6
7


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

1. 基本

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

1
2
3


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

2. 卡片

Fade Effect

Fade Effect effect: 'fade'。

fadeEffect 效果參數：

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

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

1
2
3
4
5
6


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

1. 基本

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

1
2
3


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

Thumbs

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

有兩種寫法：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10


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

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

或是：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10


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

1
2
3
4
5
6
7
8


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

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28


.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;
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15


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',
  },
});

總結

這週就先整理到這，有空補上自動撥放、循環模式，我們下週見。

2020-03-04
被分享了，有點驚訝，是不是要來加上封面圖了 🤣。