【教學】輕量級 幻燈片 jQuery lightSlider

原本想找 WordPress 幻燈片,但需要能夠外連外部圖片的外掛,

發現真的不多,而且大部分都需要付費,

所以呢找到了 jQuery lightSlider !

官方說明:github

安裝方式:(附上最新版CDN)

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/lightslider/1.1.6/css/lightslider.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/lightslider/1.1.6/js/lightslider.min.js"></script>

範例

<div id="iZOimgSlider"style="text-align:center;"><ul id="imageGallery">
	<li data-thumb="https://i.imgur.com/idQi8RK.jpg">
		<a href="//ho.com/123"><img src="https://i.imgur.com/idQi8RK.jpg" width="400px;" /></a></li>
	<li data-thumb="https://i.imgur.com/GL0GQng.jpg">
		<a href="//ho.com/456"><img src="https://i.imgur.com/GL0GQng.jpg" width="400px;" /></a></li>
	</ul>
</div>
<script>$('#imageGallery').lightSlider({gallery:true,auto:true,loop:true,controls:false,item:1,thumbItem:8,thumbMargin:4});</script>

另外提供一個 快速編輯的線上網站 jsbin