jQuery – 可觸控、RWD、可旋轉的旋轉木馬(carousels)套件：Flickity
看起來效能非常好！這個套件是當初掀起流行的 Masonry 的開發團隊製作的。
安裝方式
使用 CDN
|
1 2 3 4 5 6 |
<!-- CSS --> <link rel="stylesheet" href="https://unpkg.com/flickity@2/dist/flickity.min.css"> <!-- JavaScript --> <script src="https://unpkg.com/flickity@2/dist/flickity.pkgd.min.js"></script> |
透過 NPM 下載
|
1 2 3 |
npm install flickity |
如果需要完整套件(選用)，可以另外下載
|
1 2 3 4 |
npm install flickity-imagesloaded npm install flickity-fullscreen |
預設是 vanilla JavaScript (我們常說的原生 JS)，若要給 jQuery 使用還需要透過橋接
|
1 2 3 |
npm install jquery-bridget |
使用方式
可以直接使用 <link><script> 載入，如果使用 webpack 參考以下
|
1 2 3 4 5 6 7 8 9 10 11 |
var $ = require('jquery'); // 載入 jQuery var jQueryBridget = require('jquery-bridget'); // 載入 jQuery 橋接 var Flickity = require('flickity'); // 載入 Flickity // 建立 Flickity 的 jQuery 外掛 Flickity.setJQuery( $ ); jQueryBridget( 'flickity', Flickity, $ ); // 現在我們可以直接使用 $().flickity() var $carousel = $('.carousel').flickity({...}); |
HTML 的部分
|
1 2 3 4 5 6 7 |
<div class="main-carousel"> <div class="carousel-cell">...</div> <div class="carousel-cell">...</div> <div class="carousel-cell">...</div> </div> |
許多範例，官方講解得很清楚，可以去逛逛。