Plugin jQuery Cycle2 - Inverser la direction

Question

J'essaye de faire un diaporama dans lequel il n'y a que trois diapositives, mais chacune d'entre elles a une transition différente. Précisément, comme ceci:

• Transition 1: droite à gauche

• Transition 2: de haut en bas

• Transition 3: De gauche à droite

J'ai essayé d'utiliser l'option reverse, mais il ne semble pas fonctionner sur une diapositive par diapositive.

Une idée si cela peut être fait avec Cycle2 du tout?

Voici le stylo que j'ai fait pour le tester: 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

Ok je travaille dehors.

J'ai copié la fonction originale scrollHorz de jquery.cycle2.js et en ai ajouté une nouvelle, que j'ai légèrement modifiée et que j'ai appelée scrollLeftRight.

originale scrollHorz ressemble à ceci:

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 }; 
 
}

est ici la version de scrollHorz qui va dans le sens inverse:

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 }; 
 
}

Je peux maintenant utiliser le mouvement de défilement horizontal inversé (de gauche à droite) comme un effet de transition séparé, sur une seule diapositive, sans utiliser le paramètre "data-cycle-reverse =" true "en option, car cela ne peut s'appliquer qu'à l'ensemble du diaporama, et non des diapositives individuelles. Donc, je poste ce cos peut-être que cela aide quelqu'un d'autre dans le futur. :)

Voici le stylo: http://codepen.io/tinat/pen/aWVENq