iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 17
0
自我挑戰組

WordPress 客製化從 0 開始系列 第 17

Day 17 用 WordPress 製作投影片輪播 (slider) 效果

  • 分享至 

  • xImage
  •  

大家好,我是 Eric。

今天來跟大家分享社群上詢問度相當高的主題:投影片輪播 (slider/carousel)。

為什麼學投影片輪播?

許多業主喜歡向廠商提出投影片輪播的製作需求,最主要的原因,除了認為「比較漂亮」外,也認為這樣可以增加使用者瀏覽的趣味性。
但投影片輪播在沒有經過妥善的設計、規劃下,對使用者體驗很不友善:在行動裝置有限的空間裡,要去判斷使用者是點擊,還是捲動投影片,都需要事先思考過。儘管目前的投影片輪播函式庫都對行動裝置做了最佳化調校 (optimization 翻成「優化」是錯譯),但投影片輪播的真正問題,還是因為欠缺完整規劃,造成差勁的使用者體驗。
下方的延伸閱讀提供了對投影片輪播的不同論點。值得注意的是,底下「反對『反對投影片輪播』」的文章,便是由 WordPress 的投影片輪播外掛開發商所寫,因此更可以了解「在什麼情況下,你還是可以用投影片」。

引用函式庫

今天,我們要使用的函式庫是名為 Slick 的投影片輪播函式庫。關於 Slick 支援的輪播樣式,可以參考該專案的示範網頁
首先,我們一樣要引用函式庫:

function eric_enqueue_slick(){
    wp_enqueue_script( 'slick', 'https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js', array('jquery') );
    wp_enqueue_style( 'slick-default-style', 'https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css' );
    /** 這個檔案主要是用來存放接下來提到的時間軸 */
}
add_action( 'wp_enqueue_scripts', 'eric_enqueue_slick' );

Slick 基本操作

Slick 是一款相依於 jQuery 的函式庫,我們在示範網頁中可以看到,它使用的基本語法如下:

<div class="slick">
    <div id="slide1">這是第一個</div>
    <div id="slide2">這是第二個</div>
    <div id="slide3">這是第三個</div>
</div>
$('選擇器').slick({ //以上面的 HTML 為例 $('.slick')
    屬性: 屬性值,
    屬性2: 屬性值2
});
/** 在 WordPress 當中的寫法 */
jQuery('選擇器').slick({
    屬性: 屬性值,
    屬性2: 屬性值2
});

這裡簡單介紹常用的屬性與屬性值:

屬性 | 屬性值 | 說明
-------+-------+-------
infinite | true/false | 是否啟用無限捲動,或是捲到盡頭。
slidesToShow | 整數數字 | 每次顯示多少投影片。
slidesToSlide | 整數數字 | 每次捲動時,捲動多少投影片。
autoplay | true/false | 是否要自動播放。
dots | true/false | 是否要顯示指示點,提示使用者目前捲動的頁數。
arrows | true/false | 是否要顯示導覽圖示,如 <>
prevArrow | HTML 字串/jQuery 選擇器 | [前一頁] 按鈕的樣式。
nextArrow | HTML 字串/jQuery 選擇器 | [下一頁] 按鈕的樣式。
centerMode | true/false | 第一張投影片是否要顯示在正中央。
responsive | 陣列 | 針對回應式設計,適用不同的屬性值。可以參考下列的範例。

回應式設計

如果使用 responsive 這個屬性,可以用下列的方法,針對不同的裝置斷點 (break point) 指定不同的屬性值:

$('.responsive').slick({
  dots: true,
  infinite: false,
  speed: 300,
  slidesToShow: 4,
  slidesToScroll: 4,
  responsive: [
    {
      breakpoint: 1024,
      settings: {
        slidesToShow: 3,
        slidesToScroll: 3,
        infinite: true,
        dots: true
      }
    },
    {
      breakpoint: 600,
      settings: {
        slidesToShow: 2,
        slidesToScroll: 2
      }
    },
    {
      breakpoint: 480,
      settings: "unslick"
    }
    // 可以在特定的裝置斷點使用 settings: "unslick" 這個屬性,
    // 停用 slick 效果。
  ]
});

上述的範例,可以於這個 CodePen 預覽實際效果 (因為 CSS 樣式載入不完全,所以呈現的樣貌與範例網站有落差。這個 CodePen 主要是要示範各螢幕斷點顯示的投影片數)。

其他解決方案

如果對於自訂投影片輪播有興趣的話,可以嘗試其他投影片的函式庫,例如 Owl Carousel 的分支版本 Tiny Slider 或是同樣相依於 jQuery 的 bxSlider
除了自行製作投影片輪播的效果外,WordPress 也提供許多相關外掛給網站站長使用。譬如延伸閱讀提到的投影片輪播開發商 Smart Slider 3,便提供了視覺化的介面,讓站長能夠簡單的打造回應式的投影片輪播。Meta Slider 也是相當知名的投影片輪播外掛。如果想要使用 Slick 的函式庫,除了 Slick 的開發者自行提供的付費外掛外,也可以參考 WP Slick Slider and Image Carousel

結語

今天介紹的投影片輪播,一直是 WordPress 詢問度相當高的外掛類型。然而對於想要使用投影片輪播功能的開發人員來說,如何適當的規劃投影片輪播的使用者經驗,必須妥善安排,否則投影片輪播反而會害使用者無法專注於想要達成的目標,也無法吸引使用者採取預期的行動。

本次鐵人賽介紹的個函式庫算是實用範圍比較廣泛的函式庫,儘管網路上還有各種不同的函式庫,但關於函式庫就先介紹到這裡。下一章,我們將進一步來介紹非同步處理 (Asynchronous)。

延伸閱讀

Why Homepage Carousels Are Bad (& 3 Alternatives to Try Instead)
Why the Research Against Sliders is Wrong (and They Don’t Suck)
[套件] Slick Carousel支援手勢左右滑動,與RWD圖片輪播系統


上一篇
Day 16 用 WordPress 為網站增加動畫效果:GSAP
下一篇
Day 18 用 WordPress 看 JavaScript 非同步處理與 AJAX
系列文
WordPress 客製化從 0 開始30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言