to make a slide with navigation arrow

Question

I'm having trouble creating a navigation control to a slide. the problem is the arrow to return to previous.

Demo: http://jsfiddle.net/joseferreira/ka47jo7z/10/

var gridwidth = $("#special").width();
        var itens = $("#special .grid-special").length;
        var b = 0;

        $(".hidden-grid").css("width", gridwidth * itens);

        var animate = function () {
            $(".hidden-grid").stop().animate({
                marginLeft: -b * gridwidth
            }, {
                duration: 1000,
                specialEasing: {
                    marginLeft: "linear",
                }
            });
        }

        $(".next, .prev").click(function (e) {
            e.preventDefault();
            if ($(this).hasClass('next')) {
                b++;
                console.log(b);
                if (b < itens) {
                    animate();
                } else {
                    alert('end');
                }
            } else {
                b--;
                console.log(b);
                if (b >= 0) {
                    animate();
                } else {
                    alert('begin');
                }
            }
        });

Answer 1

You can do even better using 2dtransform (jquery.transform2d.js) plugin. I have created a working example on fiddle.

I have also animated the navigation arrows using CSS transitions.

To better understand CSS Transforms Matrix, visit this page.

Answer 2

Check this fiddle

Ive edited the JS such that if value of b becomes negative ,i incremented b after showing the alert and for the next button i've decremented b after showing the alert..Thus the problem is solved for both the buttons.

JS

$(".next, .prev").click(function(e) {
            e.preventDefault();
            if ($(this).hasClass('next')) {
                b++;
                console.log(b);
                if (b < itens) {
                    animate();
                } else {
                    alert('chegou no fim');
                    b--;
                }
            } else {
                b--;
                console.log(b);

                if (b >= 0) {
                    animate();
                }else{

                    alert('voltou para o inicio');
                    b++;

                }
            }
        });