jQuery 筆記 - Swiper 套件起手式

Swiper.js 是一款非常好用的第三方插件，筆記一下起初設定。

載入 CSS 跟 JS

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

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

Swiper 遠端服務網址有時候會換掉，若服務掛掉這是原因之一

使用 npm 安裝

1	$ npm install swiper

使用 cdn 載入

css

1	https: //cdnjs.cloudflare.com/ajax/libs/Swiper/5.4.3/css/swiper.css;

javascript

1	https://cdnjs.cloudflare.com/ajax/libs/Swiper/5.4.3/js/swiper.js

Layout

HTML 程式碼

<!-- Slider main container -->
<div class="swiper-container">
    <!-- 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>

CSS 設定

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

JS 設定

javascript 寫法

var mySwiper = new Swiper(".swiper-container", {
  // Optional parameters
  direction: "vertical",
  loop: true,

  // If we need pagination
  pagination: {
    el: ".swiper-pagination",
  },

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

  // And if we need scrollbar
  scrollbar: {
    el: ".swiper-scrollbar",
  },
});

jQuery 寫法

直接寫在 jQuery 核心裡面即可

$(document).ready(function () {
  //initialize swiper when document ready
  var mySwiper = new Swiper(".swiper-container", {
    // Optional parameters
    direction: "vertical",
    loop: true,
  });
});

其他 DEMO 樣式

可以參考官網樣式，挑選喜歡的版型，各版型都有提供 source code ，只要改成自己欲呈現的內容即可，相當方便。

Swiper 參數

挑幾個比較常用的介紹：

direction: 可選擇水平 (horizontal) 或是垂直 (vertical)，預設為水平。
initialSlide: 初始幻燈片的索引號，預設為 0。
speed: 幻燈片之間的過渡持續時間（以毫秒為單位），預設為 300 毫秒。
setWrapperSize: 啟用此選項，插件將在滑動包裝器上將寬度/高度設置為等於所有幻燈片的總大小。對於大多數不支持 Flexbox 佈局的瀏覽器，通常應將其用作兼容性後備選項，預設為 false。
spaceBetween: 幻燈片之間的距離（以 px 為單位），預設為 0。
loop: 是否啟用循環，預設值為 false。
slidesPerView: 每個視圖的幻燈片數量（同時在滑塊容器上可見的幻燈片）。

與 loop：true 一起使用，設定值為 auto，會自動輪播，需要指定 loopedSlides 參數以及要循環的幻燈片數量。
autoplay: 自動輪播效果，要搭配 delay。如下方程式碼：

1
2
3

autoplay: {
   delay: 5000,
 },

effect:可以選擇 slide(幻燈片)，fade(淡入淡出)，cube(立方體)，coverflow(覆蓋)，flip(翻轉) 等效果。

參數文件 https://swiperjs.com/api/

練習範例

點我看範例

參考資料

Swiper 官方網站