Swiper 使用介紹

發表於 更新於 分類於
Swiper 使用介紹

Swiper 套件介紹

Swiper 這是一個 JS 的輪播套件，載入套件，撰寫基本 HTML 結構、JS 設定，即可製作出簡易的輪播效果，今天我們就透過操作一些參數認識這個套件吧 ~

從 Get Started 頁面 可以依據自己的需要選擇引入的方式，因為我們目前是使用 CodePen 練習，所以我們是以 CDN 的方式導入

1
2
3
4
5
6
7
8
<!-- 貼到 <head> 內 -->
<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css"
/>

<!-- 貼到 </body> 之前 -->
<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>

基本使用方式

  1. 基本的 HTML 架構

最外層以 div .swiper 包覆，是整個 swiper 的容器。swiper 的內容都放在 .swiper-wrapper 中，每個 .swiper-slide 是一個輪播項目。下方 pagination 分頁、navigation buttons 左右箭頭按鈕、scrollbar 滾動條，可依據需求增減

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!-- 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>
  1. 初始化設定

CSS：
如果沒有特別需要限制 swiper 的範圍，可以不需設定，使其自適應即可

JS：
運用 new Swiper() 建立 swiper 實體，new Swiper() 有兩個參數：

第一個參數為字串，需填入欲套用輪播效果的 swiper 容器，以上述基本結構為例，swiper 容器為 .swiper
第二個參數為物件，非必填，可以填入想調整的選項

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
const swiper = new Swiper('.swiper', {
  // 分頁、左右箭頭、滾動條若有使用則必需設定          
  // 分頁   
  pagination: {
    el: '.swiper-pagination',
  },
  // 左右箭頭    
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },
  // 滾動條
  scrollbar: {
    el: '.swiper-scrollbar',
  },
});

此時就可以簡單呈現出一個輪播效果摟！
若想要進一步取得更個別化的畫面與功能，可以閱讀這裡，其中有相關功能的參數可以設定參考。
另外也可以在 DEMO 的部分尋找預期中的模板，再點擊 Core 後就能複製內容的程式碼，並依據需求做調整哦。

Swiper RWD

Swiper 本身也能夠根據不同的斷點做元件的變化，而 Swiper 與 Bootstrap 相同是採 Mobile First 斷點的設計，可參考此 文件

設定參考

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
const swiper47 = new Swiper(".swiper-container", {
  // 在一個畫面內能容納幾個元素。
  slidesPerView: 1,
  // 元素與元素的間格需要多少 px 。
  spaceBetween: 24,
  pagination: {
    el: ".swiper-pagination",
  },
  // 當落在此斷點以上時，內容會進行相關的設定。
  breakpoints: {
    768: {
      slidesPerView: 2,
      grid: {
        rows: 2,
        fill: 'row',
      }
    }
  }
});
  • grid 參數:

針對畫面內容物做 row 或 column 的增訂，也針對此行能容納幾個做設定，像是電腦版畫面為 2 行，這邊就能設定目標是 row (fill: “row”) 限制行數是 2 行 (rows: 2) ，當兩行都填滿時才會出現 Swiper 的分頁。

swiper 客製化按鈕定位

swiper 預設的 button 樣式 swiper-button-prev、swiper-button-next 帶有絕對定位設定，如果想自訂按鈕位置，可以拿掉原本按鈕的 class，加上自訂的 class 來寫樣式即可，下面範例用 bootstrap 來寫按鈕樣式。

1
2
3
4
5
6
<div class="swiper-button-custom-pre d-inline-block px-3 py-1 border border-1 border-dark rounded-5">
  <i class="bi bi-arrow-left fs-4"></i>
</div>
<div class="swiper-button-custom-next d-inline-block px-3 py-1 border border-1 border-dark rounded-5">
  <i class="bi bi-arrow-right fs-4"></i>
</div>

在 js 設定中記得帶入自訂的 next、prev 按鈕

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
const swiper38 = new Swiper(".swiper-38", {
  slidesPerView: 2,
  spaceBetween: 48,
  pagination: {
    el: ".swiper-pagination-38",
    type: "fraction",
    formatFractionTotal() {
      return 5;
    }  
  },
  navigation: {
    nextEl: ".swiper-button-custom-next",
    prevEl: ".swiper-button-custom-pre",
  },
});

React swiper 設定

在 react 專案中使用 swiper，首先 npm 安裝 swiper

1
npm i swiper

初始化

在元件中導入 Swiper 容器、SwiperSlide 輪播元件，並載入 swiper/css

1
2
3
4
5
6
7
8
9
10
11
12
13
14
// Import Swiper React components
import { Swiper, SwiperSlide } from 'swiper/react';
// Import Swiper styles
import 'swiper/css';
export default () => {
  return (
    <Swiper
    >
      <SwiperSlide>Slide 1</SwiperSlide>
      <SwiperSlide>Slide 2</SwiperSlide>
      <SwiperSlide>Slide 3</SwiperSlide>
    </Swiper>
  );
};

常用參數

  • slidesPerView: 每次顯示幾張輪播
  • spaceBetween: 圖與圖的間隔
  • initialSlide: 從第幾張圖開始輪播(初始為0)
  • direction: 輪播方向預設是水平(‘horizontal’)，可以改為垂直(‘vertical’); 改用垂直時要記得在 Swiper 設定高度限制。
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
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
// Import Swiper React components
import { Swiper, SwiperSlide } from 'swiper/react';
// Import Swiper styles
import 'swiper/css';
export default () => {
  return (
    <Swiper
      spaceBetween={50}
      slidesPerView={3}
      initialSlide={2}
      direction='vertical'
      className='swiper-vrtical' // 設定高度為400px 的 class
    >
      <SwiperSlide>Slide 1</SwiperSlide>
      <SwiperSlide>Slide 2</SwiperSlide>
    </Swiper>
  );
};

const routes = [
  {
    path: '/',
    children: [
      {
        path: '',
      },
      {
        path: 'about',
      },
    ]
  }, 
  {
    path: '/admin',
    children: [
      {
        path: '',
      },
      {
        path: 'products',
      },
    ]
  },    
];