jquery cycle2反轉翻轉不起作用

Question

我無法使cycle2「翻轉」轉換的「反向」功能工作？

我附上了測試Html文件Link to file。我將data-cycle-reverse = true添加到幻燈片div，但仍不起作用。有人可以幫我嗎 ？

Answer 1

data-cycle-reverse=true僅適用於顯示幻燈片的順序，而不適用於動畫。

爲了使翻轉過渡的方向相反，您將不得不編輯jquery.cycle2.flip.js 您應該只需將代碼中的所有90反轉。

更改此設置（50行）：

 // css before transition start 
     rotateFn.call(next, -90); 
     next.css({ 
      'display': 'block', 
      'visibility': 'visible', 
      'background-position': '-90px', 
      'opacity': 1 
     }); 

     curr.css('background-position', '0px'); 

     curr.animate({ backgroundPosition: 90 }, { 

這樣：

 // css before transition start 
     rotateFn.call(next, 90); 
     next.css({ 
      'display': 'block', 
      'visibility': 'visible', 
      'background-position': '90px', 
      'opacity': 1 
     }); 

     curr.css('background-position', '0px'); 

     curr.animate({ backgroundPosition: -90 }, {