My slider doesn't work as it should after viewing 3 “screens”

Question

I'm trying to build slider and in the first 3 "screens" it work and in the last one is doesn't. Also, is there a way to make the slider to slide and not just to show up?

the js code:

var oldnum = 0
var screen = 1;

$("#right_arrow").click(function () {
    screen++;
    if (screen >= 4) {
        $("#right_arrow").hide();
        screen = 4;
    } else {
        gotoright(screen);
    }
});

$("#left_arrow").click(function () {
    screen--;
    if (screen <= 1) {
        $("#left_arrow").hide();
        screen = 1;
    } else {
        gotoleft(screen);
    }
});

jwerty.key('arrow-right', function () {
    screen++;
    if (screen >= 4) {
        $("#right_arrow").hide();
        screen = 4;
    } else {
        gotoright(screen);
    }
});

jwerty.key('arrow-left', function () {
    screen--;
    if (screen <= 1) {
        $("#left_arrow").hide();
        screen = 1;
    } else {
        gotoleft(screen);
    }
});

function gotoright(num) {
    if (num <= 0 && num >= 4) {
        $("#b_" + num).show().animate({
            "opacity": 1
        }, 400, function () {});
    } else {
        oldnum = num - 1;
        $("#b_" + num).show().animate({
            "opacity": 1
        }, 400, function () {
            $("#b_" + oldnum).hide().css({
                "opacity": 0
            });
        });
    }
}

function gotoleft(num) {
    if (num <= 0 && num >= 4) {
        $("#b_" + num).show().animate({
            "opacity": 1
        }, 400, function () {});
    } else {
        oldnum = num + 1;
        $("#b_" + num).show().animate({
            "opacity": 1
        }, 400, function () {
            $("#b_" + oldnum).hide().css({
                "opacity": 0
            });
        });
    }
}

here is the full code with the html and css: http://jsfiddle.net/k6xdq/1/

I want that it will work like http://tobiasahlin.com/spinkit/

Answer 1

I think you should check if screen is == 4 before you ++ it.

Right now you go from 3 to 4 then go to an if statement that only hides the arrow.

$("#right_arrow").click(function () {
    screen++;
    if (screen >= 4) {
        $("#right_arrow").hide();
        screen = 4;
    } else {
        gotoright(screen);
    }
});

What you want is to gotoright() and if screen is >= 4, hide() it.

$("#right_arrow").click(function () {
    screen++;
    if (screen >= 4) {
        $("#right_arrow").hide();
        screen = 4;
        gotoright(screen);
    } else {
        gotoright(screen);
    }
});