CODEWITHSUNDEEP
jquerycycletransitioneffect
Teodor Sandu
Teodor Sandu

Reputation: 1352

jQuery Cycle: How to change transition effect on a running slideshow

i'm using the before: option of the jQuery Cycle plugin to determine whether the user is moving to the left or right through the slideshow, and i'd like to animate accordingly (scrollLeft, scrollRight).

Unfortunately, I cannot find how to alter the plugin's options (the transition effect) while it's running.

Any ideas?

Upvotes: 2

Views: 6253

Answers (2)

Viktor
Viktor

Reputation: 3080

Here's the more general approach:

var $cycler = $( ".cycler" ),
    prev = function() { $cycler.cycle( prevIndex, "scrollRight" ); },
    next = function() { $cycler.cycle( nextIndex, "scrollLeft" ); };

    $cycler.cycle({
                     fx:     'scrollLeft',
                     after: function(currSlideElement, nextSlideElement, options) {
                             slideIndex = options.currSlide;
                             nextIndex = slideIndex + 1;
                             prevIndex = slideIndex -1;

                             if (slideIndex == options.slideCount-1) {
                                 nextIndex = 0;
                             }

                             if (slideIndex == 0) {
                                 prevIndex = options.slideCount-1;
                             }
                         }
                 });

    $( ".prev" ).bind( "click", prev );
    $( ".next" ).bind( "click", next );

You can change scrollLeft and scrollRight into whatever you like. Note that I'm using .prev, .next and .cycler classes for my previous button, next button and cycler container respectively.

Upvotes: 4

Ender
Ender

Reputation: 15221

It sounds like this is the effect that you want: http://jsfiddle.net/zvVcD/

If that's the case, you just need to use the "scrollHorz" effect, and then define previous and next triggers, like so:

$('#s2').cycle({
    fx: 'scrollHorz',
    speed: 'fast',
    timeout: 0,
    next: '#next2',
    prev: '#prev2'
});

Upvotes: 5

Related Questions