flickity fade

フリッキーフェード

Flickity スライド間のフェード

インストール

flickity-fade.cssスタイルシートに追加し、 flickity-fade.jsスクリプトに追加します。

ダウンロード

• flickity-fade.css
• フリックティフェード.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 ,
} ) ;

---

この機能は、機能リクエストの煉獄で 4 年間を費やしました。決してあきらめない。

メタフィジーによって??