用Splide.js給Hugo網頁加上圖片輪播 (Image Carousel)

有些文章的圖片太多,放直排會佔掉很長版面,用details壓起來也不好察覺,所以就想加一個橫向圖片輪播的功能。

這個功能在Blogger叫做燈箱,不過他是全螢幕,我只要文章內裝飾就行,這個圖片輪播的功能便稱作carousel或slideshow。

做出來的效果如下(這是圖片,下面有實際範例),可設定手動播放、自動滾動、一頁幾張圖片等細部設定,還支援影片喔。

1. 嘗試過的方案

W3C和其他類似教學用純CSS實作圖片輪播的問題在於又臭又長

存成partial也不能傳參數進去(不會寫:P),CSS還會全域汙染。

Hugo Codex提供的Slider/Carousel 還得另外將使用的圖片寫在yaml,效率太差。

所以就採用將網頁HTML渲染成圖片輪播的方案"Splide.js"。跟Splide類似的方案有"Slick.js",而Splide.js語法比較簡潔。

2. 安裝Splide.js

Splide.js可以用CND載入,也能直接安裝至網站,我選擇後者。

  1. 下載Splide的原始碼,解壓縮。

  2. dist目錄含有Javascript和CSS,將其放到hugo網站目錄下的/static/js

3. 文章嵌入圖片輪播圖

  1. Hugo文章插入圖片輪播的語法如下,在Markdown檔案直接輸入。開頭的JS和CSS只要插入一次就夠了。
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
<!--JS路徑-->
<script src="/js/splide/dist/js/splide.min.js"></script>

<!--選擇要使用的CSS主題-->
<link rel="stylesheet" href="/js/splide/dist/css/themes/splide-skyblue.min.css">

<!--建立Splide。data-splide設定參數為播放到最後就退回第一張,並每次顯示一張圖片。-->
<div class="splide" role="group" aria-label="Splide" data-splide='{"type":"loop","perPage":1}'>
  <div class="splide__track">
		<ul class="splide__list">
			<li class="splide__slide"></li>
			<li class="splide__slide"></li>
			<li class="splide__slide"></li>
			<li class="splide__slide"></li>
		</ul>
  </div>
</div>

<script>
  new Splide( '.splide' ).mount();
</script>
  1. 其中的<li class="splide__slide">就是要輪播的內容,可以是文字,也可以是圖片。並且Splide.js會自動偵測有多少行splide__slide的class。

  2. 例如要輪播三張圖片,就在<li class="splide__slide">後面插入圖片語法:

1
2
3
4
5
<ul class="splide__list">
            <li class="splide__slide"><img src=https://i.imgur.com/V0KTWAZ.png></li>
			<li class="splide__slide"><img src=https://i.imgur.com/9B8KBob.jpg></li>
			<li class="splide__slide"><img src=https://i.imgur.com/3XFQVrD.jpg></li>
		</ul>
  1. 呈現效果
  1. 如果要插入多個圖片輪播,就將每個Splide class末尾的new Splide( '.splide' );去掉,再將以下作者給的範例函數放到文章末尾,並加上監聽圖片載入完成,才渲染圖片輪播。
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
<script>
var elms = document.getElementsByClassName( 'splide' );
for ( var i = 0; i <= elms.length; i++ ) {
  new Splide( elms[ i ] ).mount();
}
document.addEventListener( 'DOMContentLoaded', function() {
    var splide = new Splide( '.splide' );
    splide.mount();
  } );
</script>
  1. 其他自定義項目和進階範本請參考Splide.js的說明文件

如果本網站文章對您有幫助,歡迎贊助我。