jQuery: how to implement controller for slider (carousel)?

Question

I have build a slider using jQuery which works fine. It was a quick development so that didn't get time to add controller. Right now it is getting hard to fix controller for the carousel.

Does any one have solution or alternative to fix this?

Demo http://jsfiddle.net/sweetmaanu/Pn2UB/16/

$.fx.speeds._default = 1000;
function slider(container) {
    var currPg = null,
        firstPg = null;
    container.find('> .pg').each(function (idx, pg) {
        pg = $(pg);
        var o = {
            testimonial: pg.find('> .testimonial'),
            thumb: pg.find('> .testimonial-thumb'),
            pg: pg
        };
        o.pg.css({
            position: 'absolute',
            width: '100%',
            height: '100%',
        });

        if (idx > 0) {
            o.pg.css({
                opacity: 0,
                    'z-index': -1
            });
            o.testimonial.css({
                'margin-left': '100%'
            });
            o.thumb.css({
                'bottom': '-100%'
            });
        } else {
            firstPg = o;
        }
        o.prev = currPg;
        if (currPg) {
            currPg.next = o;
        }
        currPg = o;
    });
    firstPg.prev = currPg;
    currPg.next = firstPg;
    currPg = firstPg;

    this.advance = function advance(duration) {
        console.log("advance!", this);
        var dur = duration || $.fx.speeds._default;
        var dur2 = Math.ceil(dur / 2);

        var dh = container.height();
        var dw = container.width();
        var nextPg = currPg.next;

        nextPg.pg.css({
            opacity: 1,
                'z-index': null
        });

        var _pg = currPg;
        currPg.testimonial.stop().animate({
            'margin-left': -dw
        }, dur, function () {
            _pg.pg.css({
                opacity: 0,
                    'z-index': -1
            });
            _pg = null;
        });
        nextPg.testimonial.stop()
            .css({
            'margin-left': dw
        })
            .animate({
            'margin-left': 0
        }, dur);
        currPg.thumb.stop().animate({
            'bottom': -dh
        }, dur2, function () {
            nextPg.thumb.stop()
                .css({
                'bottom': -dh
            })
                .animate({
                'bottom': 0
            }, dur2);
            nextPg = null;
        });
        currPg = nextPg;
    }
}
var s = new slider($('#banner'));

function scheduleNext() {
    setTimeout(function () {
        s.advance();
        scheduleNext();
    }, 5000);
}
scheduleNext();

Answer 1

For next slider you need:

$('#next').click(function(){
s.advance();
});

But anyway you have to construct universal animations methods with parameters. Check this examples: http://jsfiddle.net/lalatino/pjTU2/ and http://sorgalla.com/projects/jcarousel/examples/static_controls.html

Answer 2

You just want to add a variable direction and change that on click of both prev and next

var direction = 'left';



$('#next').click(function(event) {
    direction = 'right';
    s.advance(1000,direction);
});
$('#prev').click(function(event) {
    direction = 'left';
    s.advance(1000,direction);
});

then add a line where it checks the direction variable

    if(direction == 'left')
        var dw = container.width();
    else if(direction =='right')
        var dw = - container.width();
    else{
        console.log('Wrong direction')
        return;
    }

Carosal fixed

Don't forget to add argument on advanced function