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

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

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

所以呢找到了 jQuery lightSlider ！

官方說明：github

安裝方式：（ＣＤＮ）

<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

展開文章／收合

相關