jQuery – 可觸控、RWD、可旋轉的旋轉木馬(carousels)套件：Flickity

2018-08-31 / JSN / 0 Comments / 1,188 次瀏覽

看起來效能非常好！這個套件是當初掀起流行的 Masonry 的開發團隊製作的。

安裝方式

使用 CDN

<!-- 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 下載

npm install flickity

如果需要完整套件(選用)，可以另外下載

npm install flickity-imagesloaded
npm install flickity-fullscreen

預設是 vanilla JavaScript (我們常說的原生 JS)，若要給 jQuery 使用還需要透過橋接

npm install jquery-bridget

 

使用方式

可以直接使用 <link><script> 載入，如果使用 webpack 參考以下

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 的部分

<div class="main-carousel">
    <div class="carousel-cell">...</div>
    <div class="carousel-cell">...</div>
    <div class="carousel-cell">...</div>
</div>

許多範例，官方講解得很清楚，可以去逛逛。

 

 

發表迴響