WEB ◆ TS Library ◆ 熱衷分享 ◆ 享受教學相長 ◆ 無形的網絡擁有熱情溫度的傳遞

4-3. 運用外掛 Swiper Slider

學習 jQuery plugin (新趨勢也稱為HTML5 plugin)外掛程式的基本運用

網頁上動態效果的外掛(plugin)，在15年前開始大多以 jQuery 製作，所以稱為 jQuery plugin。

近年來改良新製的外掛或許不以 jQuery 製作，而以 JavaScript 製作，也稱為 HTML5 plugin。

不論原設計者的解說如何，依循以下三大步驟5小步驟，應該皆能完成外掛的套用。

(一)瀏覽器搜尋外掛「jquery plugin slider」 => 檢視 Example => 試試 Swiper Slider
(二)下載外掛程式 → 點選 Get Started
　　-------------------- 可以點選 Download assets 下方的連結 => 也可以直接使用CDN檔案
(三)網頁內設計步驟 (How to use) --- 點選網站中上方選單【Demos】按鈕
　　-------------------- 選擇 Demos 再點選 Open in new window => 按右鍵選「檢視網頁原始碼」
１、處理相關的 HTML 標籤語法
２、連結相關的 CSS 檔案到 </head> 的前面 (建議放在自己的CSS檔案前)
３、載入相關的 JS 檔案到 </body> 的前面 (有些外掛也可以放在 </head> 的前面)
４、在 <script> </script> 標籤之中，將網頁元素物件依作者指示交給外掛程式。
５、如有需要再加上 option 選項設定，如有需要再修改 CSS 樣式設定。

 

試試 Swiper Slider：

STEP-1：先安排相關的 HTML 標籤 (元素物件)

<!-- Slider main container -->
<div class="swiper-container mySwiper">
  <!-- Additional required wrapper -->
  <div class="swiper-wrapper">
    <!-- Slides -->
    <div class="swiper-slide"><img src="路徑/圖檔" alt=""></div>
    <div class="swiper-slide"><img src="路徑/圖檔" alt=""></div>
    <div class="swiper-slide"><img src="路徑/圖檔" alt=""></div>
  </div>

  <!-- If we need navigation buttons -->
  <div class="swiper-button-prev"></div>
  <div class="swiper-button-next"></div>

  <!-- If we need pagination -->
  <div class="swiper-pagination"></div>

</div>
<!-- slick slider end -->

STEP-2、3：在 head 區增加以下連結及載入

<!--  swiper plugin start  -->
<link rel="stylesheet" href="js/swiper/swiper-bundle.min.css">
<script src="js/swiper/swiper-bundle.min.js"></script>
<!--  swiper plugin end  -->

或是直接使用CDN

<!--  swiper plugin start  -->
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css">
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
<!--  swiper plugin end  -->

STEP-4：增加 Script 程式，將準備好的HTML物件交給程式控制

<script>
var swiper = new Swiper(".mySwiper" , 
  {
    //其他選項option，例如：自動播放
    autoplay: {
      delay: 2500
    },
    //左右方向鍵(不需要則刪除) 
    navigation: {
      nextEl: ".swiper-button-next",
      prevEl: ".swiper-button-prev",
    },
    //下方指引器(不需要則刪除) 
    pagination: {
      el: ".swiper-pagination",
    }
  }
);
</script>

參考 Swiper Slider Demo 的各種 Demos 再由「Open in new window」 去看看設定各種需要的Option選項

 

 

go TOP