jQuery Cycle2插件 - 倒轉方向

Question

我試圖做一個幻燈片，其中只有三張幻燈片，但每個都帶有不同的過渡。精確地說，是這樣的：

• 過渡1：從右到左

• 轉型2：向上下

• 過渡3：左到右

我嘗試使用reverse選項，但它似乎不適用於每個幻燈片的基礎上。

任何想法，如果這可以用Cycle2完成？

這是我作出測試筆： http://codepen.io/tinat/pen/PmOpQP

#holder{width: 30%; overflow: hidden;} 
 
#slide1{width: 100%; background-color: red;} 
 
#slide2{width: 100%; background-color: green;} 
 
#slide3{width: 100%; background-color: blue;} 
 
#slide1 img, #slide2 img, #slide3 img{width: 100%; height: auto; }

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> 
 
<script src="http://malsup.github.com/jquery.cycle2.js"></script> 
 
<script src="http://malsup.github.io/min/jquery.cycle2.autoheight.min.js"></script> 
 
<script src="http://malsup.github.io/min/jquery.cycle2.scrollVert.min.js"></script> 
 

 
<div id="holder" class="cycle-slideshow" 
 
    data-cycle-speed="600" 
 
    data-auto-height="1" 
 
    data-cycle-loop="0.5" 
 
    data-cycle-slides="div" 
 
    data-cycle-auto-height="1:1" 
 
    data-cycle-fx="scrollHorz" 
 
> 
 
    
 
    <div id="slide1" > 
 
    <img src="https://image.ibb.co/jUHQJ5/blank.png" /> 
 
    </div> 
 
    
 
    <div id="slide2" data-cycle-fx="scrollVert"> 
 
    <img src="https://image.ibb.co/jUHQJ5/blank.png" /> 
 
    </div> 
 
    
 
    <div id="slide3" data-cycle-reverse="true"> 
 
    <img src="https://image.ibb.co/jUHQJ5/blank.png" /> 
 
    </div> 
 
    
 
</div>

Answer 1

好，我的工作了。

我從jquery.cycle2.js複製了原始的scrollHorz函數，並添加了一個新的，我稍微修改了一下，並將其命名爲scrollLeftRight。

原始scrollHorz看起來是這樣的：

scrollHorz: { before: function(opts, curr, next, fwd) { 
 
opts.API.stackSlides(curr, next, fwd); 
 
var w = opts.container.css('overflow','hidden').width(); 
 
opts.cssBefore = { left: fwd ? w : - w, top: 0, opacity: 1, visibility: 'visible', display: 'block' }; 
 
opts.cssAfter = { zIndex: opts._maxZ - 2, left: 0 }; 
 
opts.animIn = { left: 0 }; 
 
opts.animOut = { left: fwd ? -w : w }; 
 
}

這裏的scrollHorz的版本，在運行相反：

scrollLeftRight = { 
 
before: function(opts, curr, next, fwd) { 
 
opts.API.stackSlides(curr, next, fwd); 
 
var w = opts.container.css('overflow','hidden').width(); 
 
opts.cssBefore = { left: 0, top: 0, opacity: 1, visibility: 'visible', display: 'block' }; 
 
opts.cssAfter = { zIndex: opts._maxZ - 2, left: fwd ? w : - w }; 
 
opts.animIn = { left: 0 }; 
 
opts.animOut = { left: fwd ? +w : w }; 
 
}

我現在可以在單張幻燈片上使用反向水平滾動運動（從左到右）作爲單獨的過渡效果，而不使用「data-cycle-reverse =」true「作爲選項，因爲它只能應用於整個幻燈片放映，而不是單個幻燈片。

所以，我發佈這個COS也許它可以幫助別人在未來。 :)

這是筆：http://codepen.io/tinat/pen/aWVENq