Search code examples
jqueryjquery-cycle2

jquery cycle2 reverse flip not working

I am unable to make work the "reverse" functionality of cycle2 "Flip" transition ?

I have attached the test Html file in Link to file. I added the data-cycle-reverse=true to the slideshow div and still it does not work. Can some one help me out ?

Solution

  • The data-cycle-reverse=true only applies to the order that the slides are displayed, not the animation.

    In order to make the Flip transition the opposite direction, you will have to edit the jquery.cycle2.flip.js You should just have to inverse all of the 90s in the code.

    Change this (line 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 }, {

    To This:

            // 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 }, {