jQuery Cycle2 plugin - reversing direction

Question

I'm trying to make a slideshow in which there are only three slides, but each comes with a different transition. Precisely, like this:

• Transition 1: right to left

• Transition 2: up to down

• Transition 3: left to right

I tried using the reverse option, but it doesn't seem to work on a slide-per-slide basis.

Any idea if this can be done with Cycle2 at all?

Here's the pen I made to test it: 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 I've worked it out.

I copied the original scrollHorz function from jquery.cycle2.js and added a new one, which I modified slightly and I named it scrollLeftRight.

Original scrollHorz looks like this:

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

Here's the version of scrollHorz that runs in reverse:

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

I can now use the reverse horizontal scroll motion (left to right) as a separate transition effect, on a single slide, without using the "data-cycle-reverse="true" as an option, because that can only be applied to the whole slide show, and not individual slides.

So, I'm posting this cos maybe it helps someone else in the future. :)

Here's the pen: http://codepen.io/tinat/pen/aWVENq