Swiper - 輪播效果（中）

Posted on In

如何將輪播效果做客製化？

到官網上的 API，裡面可以做許多的設定，接下來會針對各個設定做講解

原本是「上下」的方式輪播，我想要改為「左右」，該怎麼做？

  • 要調整的參數：「direction」
  • 說明：Could be ‘horizontal’ or ‘vertical’ (for vertical slider).
  • 預設值：‘horizontal’

預設值(Default)的意思是：如果沒有特別寫出，就會代入的值

我不想要有scrollbar，該怎麼做？

先找到 scrollbar 的 js 程式碼

1
2
3
4
// And if we need scrollbar
    scrollbar: {
      el: '.swiper-scrollbar',
    },

上面這段js程式碼的意思是：我要加上scrollbar，元素（el）的位置在 html 的 '.swiper-scrollbar'

對應到html中，找到class="swiper-scrollbar"這個div

❗️ 要拿掉scrollbar，就同步把它的 html 標籤和 js 程式碼拿掉即可。

想要調整輪播的速度（speed），該怎麼做？

在 API-Swiper Parameters 中，找到「speed」這個參數，按照文件上寫的方式去新增參數到 js 中（不同參數用逗號隔開）

想要自動輪播，該怎麼做？

  • 要新增的參數：「autoplay」
  • delay: 5000 的意思是：每過5秒，才會跑出下一張

手動滑動後，想要繼續自動輪播，該怎麼做？

在 swiper 中，會預設手動滑動以後就關閉自動播放，

如果要在手動滑動以後繼續自動播放，可以在 autoplay 中加上 disableOnInteraction 屬性

預設是 true，改為 false 就可以囉

1
2
3
autoplay: {
  disableOnInteraction: false,
}

想把「滑動」的輪播效果改為其他種，該怎麼做？

  • 要新增的參數：「effect」記得要用單引號把’效果’包起來

允許滑鼠及手機上的手勢來滑動

裡面的swiper拉到最後一張圖片後，圖片本身也能用滑鼠往左拉

  • 要調整的參數：「allowTouchMove」
  • 預設是開啟的，如果要關閉的話，則設定成 allowTouchMove: false 即可

Q&A

Q:
如果說是公司專案上要使用輪播效果的話，使用CDN是適合的嗎?

A:
可以使用 CDN 唷~ 好處不用多說（不過使用 CDN 如果出包也會比較難追蹤責任歸屬，畢竟是使用別人提供的程式碼）

記得要另外寫載入本地端的語法，以免 CDN 服務資源無法載入的情況

Q:
承上題，另外寫載入本地端的語法是什麼？

A:
比如說我使用 google 提供的 JQuery CDN

1
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

我會在下面再加上，當上面的 CDN 判斷失效時，載入本地端的 JQUERY

1
2
3
4
5
6
<script type="text/javascript">
    if (typeof jQuery == 'undefined')
    {
        document.write(unescape("%3Cscript src='/js/jquery-1.10.2.min.js' type='text/javascript'%3E%3C/script%3E"));
    }
</script>

原理說明：正常來說如果我們沒有引用 JQuery 或是引用不正確，JQuery 這個變數因為沒有宣告也會沒有定義(像 Swiper.js 則是 Swiper)

下面這張圖是在 console 裡呼叫 jQuery ，得到錯誤未定義

所以我們可以依照這個當作是否 CDN 有正確載入，如沒有我們就在另外寫一行程式載入儲存我們放在本地端 js 資料夾裡的 <script src='/js/jquery-1.10.2.min.js' type='text/javascript"></script>

Q:
請問包裹在new Swiper 這個物件內的各個參數與對應的值，是否就是javascript裡面物件的應用？

Swiper plugin 內已經寫好所有可以存取的值，我們使用他，透過new 一個新的Swiper 物件，然後使用想用的參數，給予指定的值，達到我們想要的效果呢?

A:
沒有錯，那裡就是物件的應用，swiper 裡頭有包裝一個物件來設定各個項目，所以你也能指定自己的效果來覆蓋他預設的功能