flickity fade

輕快褪色

Flickity 幻燈片之間的淡入淡出

安裝

將flickity-fade.css加入樣式表中， flickity-fade.js到腳本中。

下載

• flickity-fade.css
• flickity-fade.js

CDN

 <!-- CSS -->
< link rel =" stylesheet " href =" https://unpkg.com/flickity-fade@2/flickity-fade.css " >

<!-- JS -->
< script src =" https://unpkg.com/flickity-fade@2/flickity-fade.js " > </ script >

套件管理器

• npm： npm install flickity-fade
• 紗線： yarn add flickity-fade

用法

透過在 Flickity 選項中設定fade: true來啟用淡入淡出行為。

 // jQuery
let $carousel = $ ( '.carousel' ) . flickity ( {
  fade : true ,
} ) ; 

 // vanilla JS
let flkty = new Flickity ( '.carousel' , {
  fade : true ,
} ) ; 

 <!-- HTML -->
< div class =" carousel " data-flickity =' { "fade": true } ' >
  ...
</ div >

網頁包

 const Flickity = require ( 'flickity' ) ;
require ( 'flickity-fade' ) ;

let flkty = new Flickity ( '.carousel' , {
  fade : true ,
} ) ;

---

這個功能在功能請求煉獄中度過了四年。永不放棄。

通過Metafizzy？