Previous and Next functions for js slider

Question

I have almost finished this slider, but I don't know how to implement the functionality for next() and prev(). How can I implement these functions?

http://jsfiddle.net/M4t4L/11/

$(function () {

        var container = $("#scene"),
            i = 0,
            count = container.find("li").length,
            j = container.find("li").length - 1,
            isAnimating = false;

        container.find("li:first").css({
            "width": "100%"
        });

        $("#trigger").click(function (e) {
            if (!isAnimating) {

                isAnimating = true;
                e.preventDefault(e);

                i++; if (i >= count) { i = 0; }
                j++; if (j >= count) { j = 0; }

                container.find("li")
                    .finish()
                    .removeClass('active')
                    .last()
                    .width(0)
                    .addClass("active")
                    .animate({
                    "width": "100%"
                }, 800,
                function () {
                    container.find("li").first().appendTo(container);
                    isAnimating = false;
                });
            }
        });


    });

The problem is that when I implement these functions and press the next or prev. Displays the last slide on one second, and then switches to the desired

http://jsfiddle.net/M4t4L/9

Answer 1

If you want to get a Next or Prev function running, you want to take control of the number of the slider where you are. I'm afraid you will have to play around with your i/j and make the position go in both directions.

Right now you count up your i and j, where you might want to go is to have a position var and an array of slider objects, then the click only would have to call for the next/prev object to be loaded and the animation can begin.

Something like this maybe..

var pos = 0;
var container = $('#scene').find('li');

$('.back').click(function() {
    pos = pos - 1;
    moveIt(pos);
});

$('.forth').click(function() {
    pos = pos +1;
    moveIt(pos);
});

function moveIt(pos) {
    container[pos]... // Your animation goes here
}