How do i slow down the reverse of a slideshow?

Question

I am using the following plugin:

The file in question is unslider.js

When the last slide is over the script goes back to the first slide but it does it very fast. I am new to JS so not sure how I can slow down the script when it's going back to the first slide. So when displaying it it goes from 1 - 2 - 3 - 4 but then when reversing it goes fast from 4 - 3 - 2 - 1. Any ideas?

These are the options I've been playing with but no luck:

    //  Set some options
    _.o = {
        speed: 800,   // animation speed, false for no transition (integer or boolean)
        delay: 5000,  // delay between slides, false for no autoplay (integer or boolean)
        init: 0,      // init delay, false for no delay (integer or boolean)
        pause: !f,    // pause on hover (boolean)
        loop: !f,     // infinitely looping (boolean)
        keys: true,      // keyboard shortcuts (boolean)
        dots: true,      // display ••••o• pagination (boolean)
        arrows: true,    // display prev/next arrows (boolean)
        prev: '',    // text or html inside prev button (string)
        next: '',    // same as for prev option
        fluid: true,     // is it a percentage width? (boolean)
        complete: f,  // invoke after animation (function with argument)
        items: '>ul', // slides container selector
        item: '>li'   // slidable items selector
    };

And I think this might be relevant but not sure what to do:

        //  To slide or not to slide
        if ((!target.length || index < 0) && o.loop == f) return;

        //  Check if it's out of bounds
        if (!target.length) index = 0;
        if (index < 0) index = li.length - 1;
        target = li.eq(index);

        var speed = callback ? 5 : o.speed | 0,
            obj = {height: target.outerHeight()};

        if (!ul.queue('fx').length) {
            //  Handle those pesky dots
            el.find('.dot').eq(index).addClass('active').siblings().removeClass('active');

            el.animate(obj, speed) && ul.animate($.extend({left: '-' + index + '00%'}, obj), speed, function(data) {
                _.i = index;

                $.isFunction(o.complete) && !callback && o.complete(el);
            });
        };
    };

In the above line i tried playing with this one: var speed = callback ? 5 : o.speed | 0,

I tried adding different numbers in place of the 5 but it didn't do the trick.

Please advise. Thanks!

Abraham Uribe · Accepted Answer

you can try to set a new speed value only when it's out of bounds adding one boolean var and if it´s true then change speed value like this

    //  Check if it's out of bounds
    var reversespeed=false;//default to false
    if (!target.length){
        index = 0;
        reversespeed=true;//go to first li
    }
    if (index < 0){
        index = li.length - 1;
        reversespeed=true;//go to last li
    }
    target = li.eq(index);

    var speed = callback ? 5 : o.speed | 0,
        obj = {height: target.outerHeight()};
    if(reversespeed){
        speed=50000;//add new speed for reverse
    }
    if (!ul.queue('fx').length) {
        //  Handle those pesky dots
        el.find('.dot').eq(index).addClass('active').siblings().removeClass('active');

        el.animate(obj, speed) && ul.animate($.extend({left: '-' + index + '00%'}, obj), speed, function(data) {
            _.i = index;

            $.isFunction(o.complete) && !callback && o.complete(el);
        });
    };

http://jsfiddle.net/cqRFK/
UPDATE
to go back immediately without it showing the previous slides change speed to 0 when it is out of bounds

  //  Check if it's out of bounds
    var reversespeed=false;//default to false
    if (!target.length){
        index = 0;
        reversespeed=true;//go to first li
    }
    if (index < 0){
        index = li.length - 1;
        reversespeed=true;//go to last li
    }
    target = li.eq(index);

    var speed = callback ? 5 : o.speed | 0,
        obj = {height: target.outerHeight()};
    if(reversespeed){
        speed=0;
    }
    if (!ul.queue('fx').length) {
        //  Handle those pesky dots
        el.find('.dot').eq(index).addClass('active').siblings().removeClass('active');

        el.animate(obj, speed) && ul.animate($.extend({left: '-' + index + '00%'}, obj), speed, function(data) {
            _.i = index;

            $.isFunction(o.complete) && !callback && o.complete(el);
        });
    };

http://jsfiddle.net/cqRFK/1
for the swipe event to work you need to include jquery.event.swipe.js and change

if($.event.swipe) {
this.el.on('swipeleft', _.prev).on('swiperight', _.next);
}

on Unslider.js for

if($.event.special.swipe) {
this.el.on('swipeleft', _.prev).on('swiperight', _.next);
}

How do i slow down the reverse of a slideshow?

Answers (2)

Related Questions