「阿姨，我不想努力了！」，不想努力了，不用找阿姨， 請學swiper.js。如果你跳過了第十三天「旋轉吧！木馬」，可能你有預知未來的能力。可能是職業病的關係，就算有簡單的公式可以用，也要學生一步一步自己先算過題目後，才會告訴學生快速的公式解法，培養學生腳踏的習慣，這也是學好數學的精神。經過辛苦自己手刻的投影片程式碼，今天就來介紹方便又功能強大的第三方套件Swiper。

Html架構

下面是Swiper官網提供的完整的Html架構

<!-- Swiper 主要容器 -->
<div class="swiper">
 <!-- 所有投影片的容器 -->
 <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>
 <!-- 分頁圓點容器，會根據投影片的數量產生相對應的分頁圓點 -->
 <div class="swiper-pagination"></div>

 <!-- 上一頁和下一頁箭頭按鈕 -->
 <div class="swiper-button-prev"></div>
 <div class="swiper-button-next"></div>

 <!-- 捲軸容器 -->
 <div class="swiper-scrollbar"></div>
</div>

以下是我套用Swiper的程序。
根據需求，再作適當的修正，我需要分頁圓點容器，客製化上一頁和下一頁箭頭按鈕，不需要捲軸，所修改成如下的架構。

<div class="swiper">
              <div class="swiper-wrapper proofs">
                <div class="swiper-slide proof"></div>
                <div class="swiper-slide proof"></div>
                <div class="swiper-slide proof"></div>
                <div class="swiper-slide proof"></div>
              </div>
              <a href="#" class="prev-btn"><i class="fa-solid fa-angles-left"></i></a>
              <a href="#" class="next-btn"><i class="fa-solid fa-angles-right"></i></a>
              <!-- If we need pagination -->
              <div class="swiper-pagination"></div>
              <!-- If we need navigation buttons -->
            </div>

接下來要在script.js配置Swiper物件。

const swiper = new Swiper('.swiper', {
  // Optional parameters
  direction: 'horizontal', // 投影片的方向為水平方向
  loop: false, // 不使用循環播放
  allowTouchMove: false, // 不要拖曳投影片
  // If we need pagination
  pagination: {
    el: ".swiper-pagination", // 分頁圓點容器的CSS選擇器
    clickable: true, // 分頁圓點可以點選後，直接移至該頁
    renderBullet: function(index, className) {
      return '<span class="' + className + '">' + (index + 1) + "</span>"
    }, // 分頁原點渲染樣式回呼函式，讓圓點上呈現頁面數字
  },

  // Navigation arrows
  navigation: {
    nextEl: '.next-btn', // 下一頁客製化圓點的CSS選擇器
    prevEl: '.prev-btn', // 上一頁客製化圓點的CSS選擇器
  },

});

因為實際測試的時候，有時在投影片按下滑鼠左鍵，會造成投影片自動換頁，所以我將allowTouchMove設為false。另外頁面在第一頁的時候，上一頁的按鈕應該要呈現灰色，而頁面在最後一頁的時候，下一頁的按鈕應該也要呈現灰色，因此我們必須在style.css加入下面的配置

a.swiper-button-disabled {
  background-color: #CCCCCC;
  color: #AAAAAA;
}

如此就輕輕鬆鬆完成我們的作品。

Swiper快速上手方法

Swiper提供許多參數進行設定，讓投影片的進行呈現不同的效果，除了慢慢了解各參數設定的意義，個人建議我們依照下列步驟使用Swiper，可以快速上手Swiper。

• 到範例（Demo）中看看有那些自己想要的效果。
• 將範例原始碼複製，如果有不懂的參數設定，則前往說明文件（API Document），了解參數的設定選項。
• 嘗試不同參數設定選項組合，看看是否能達到自己想要的效果。
• 如果還是有問題，請教朋友或利用社群發問（例如：iT邦幫忙、StackOverflow和Swiper Dicussion）

程式原始碼

今日程式原始碼：https://replit.com/@yegc22/EulerLineAndProofSwiper?v=1

今日小結

現在有非常多的第三方免費的javascritp套件可以使用，可以讓我們的網頁輕易的呈現各式各樣效果。老師們對於網頁設計可以類比成像學習Powerpoint這樣的軟體，而不是寫程式，只是原本使用Powerpoint都是用滑鼠設定參數，而現在則是在文字編輯器上設定。其實函式套件的學習只比具有圖形介面的軟體難一點點，但是卻多了許多的彈性和可控制的機會，長久學習，可以節省許多作品開發的時間。但然，也還是非常鼓勵寫自己親手寫一些較簡單網頁視覺效果，除了增加自己的能力，對套件的使用也會更上手。