好用的 [ 圖片輪播 ] 套件

今天要推薦的套件是 slick( http://kenwheeler.github.io/slick/ )

一個非常好用的圖片輪播套件

使用方式非常簡單

在 head 的部分加入 CSS

<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/jquery.slick/1.5.9/slick.css"/>


<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/jquery.slick/1.5.9/slick-theme.css"/>

然後在 body 最下面加上 JS

<script type="text/javascript" src="//cdn.jsdelivr.net/jquery.slick/1.5.9/slick.min.js"></script>

程式碼的部分

html

<div class="slider">
  <div><h3>1</h3></div>
  <div><h3>2</h3></div>
  <div><h3>3</h3></div>
  <div><h3>4</h3></div>
  <div><h3>5</h3></div>
  <div><h3>6</h3></div>
</div>

js

# main.js
$('.slider').slick();

搞定！

幾個好用的參數

adaptiveHeight: true 自動幫你計算高度

prevArrow: '前一頁' 可以直接下 html 換掉前一頁的箭頭

nextArrow: '下一頁' 可以直接下 html 換掉下一頁的箭頭

dots: true 讓底下的點出現

jquery 版: http://kenwheeler.github.io/slick/

react 版: http://webrafter.com/opensource/react-slick

angular 版: http://vasyabigi.github.io/angular-slick/, http://devmark.github.io/angular-slick-carousel/