手機版網頁自適應slider：bxSlider圖片輪播插件

做網頁時，設計師常常需要使用slider來呈現多張圖片或內容，有時桌機版是一般排版呈現，但到了手機版，設計師可能因為版面呈現美觀與較符合使用者設計需求關係，手機版的網頁呈現方式會採用slider的顯示，這對於網頁前端設計切版的設計師們來說可就是一個很頭痛的問題，相同的資料要是在手機版使用slider呈現。今天，我們將介紹這個方法，就是可以讓slider自動加入，使你在手機版網頁中，只在需要時才呈現，不會影響網頁的整體美觀性。

首先，我們需要在網頁中引入bxSlider的程式庫，可以使用以下程式碼：

<link href="https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.15/jquery.bxslider.min.css" rel="stylesheet" media="screen and (max-width: 768px)" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.15/jquery.bxslider.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

這段程式碼會引入bxSlider的JavaScript和CSS檔案，並且在螢幕寬度小於等於768像素時才使用CSS樣式，這樣可以保證slider 樣式只在手機版網頁中呈現。

接下來，我們需要編寫JavaScript程式碼，來控制slider的載入和移除。可以使用以下程式碼：

(function($){
  var windowWidth = $(window).width();
  var breakPoint = 768;
  var slider;

  // 載入 bxSlider
  function loadSlider() {
    slider = $('#sbox01 > .e-con-inner').bxSlider();
  }

  // 移除 bxSlider
  function destroySlider() {
    if (slider !== undefined) {
      slider.destroySlider();
      slider = undefined;
    }
  }

  // 判斷視窗大小，決定是否載入 bxSlider
  function loadslider() {
    if (windowWidth <= breakPoint) {
      loadSlider();
    }
  }
  loadslider();

  // 視窗縮放時重新載入或移除 bxSlider
  $(window).resize(function() {
    var newWindowWidth = $(window).width();
    if (windowWidth <= breakPoint && newWindowWidth > breakPoint) {
      destroySlider();
    } else if (windowWidth > breakPoint && newWindowWidth <= breakPoint) {
      loadSlider();
    }
    windowWidth = newWindowWidth;
  });

})(jQuery);

這段程式碼會在頁面載入時執行，首先宣告一個windowWidth變數，並且使用jQuery取得視窗的寬度，並且宣告一個breakPoint變數，代表手機版網頁的最大寬度。接著宣告一個slider變數，用來儲存bxSlider的實例。

接著，定義一個loadSlider()函數，用來初始化bxSlider的實例，並將其儲存至slider變數中。同時，定義一個destroySlider()函數，用來移除bxSlider的實例，並將slider變數設為undefined。接下來，定義一個loadslider()函數，用來判斷視窗大小是否小於等於breakPoint，如果是，則呼叫loadSlider()函數載入bxSlider，否則不做任何事情。

接著，呼叫loadslider()函數，以確保頁面載入時會自動載入bxSlider。接下來，註冊一個resize事件，用來偵測視窗大小的變化，並根據變化來重新載入或移除bxSlider。在resize事件的處理函數中，首先使用jQuery取得新的視窗寬度，接著判斷視窗大小是否由小於等於breakPoint變為大於breakPoint，如果是，則呼叫destroySlider()函數移除bxSlider的實例；如果是由大於breakPoint變為小於等於breakPoint，則呼叫loadSlider()函數載入bxSlider的實例。最後，將windowWidth設為新的視窗寬度。

這樣一來，當手機版網頁的視窗大小小於等於breakPoint時，bxSlider會自動載入並呈現，當視窗大小大於breakPoint時，bxSlider會自動移除，以避免對網頁美觀性的影響。

以上就是讓slider自動加入在手機版網頁中的方法，使用這種方式可以讓設計師在網頁設計時更加靈活，不需要為手機版網頁單獨設計slider，同時也不會影響網頁的美觀性。這個方法需要使用bxSlider程式庫和JavaScript編程技巧，希望本篇文章能對你有所幫助。

Demo

可以嘗試縮放視窗，它將自適應小於等於768螢幕視窗下使用slider。

相關連結：https://bxslider.com