var $carousel_boxs = $(".carousel .box");
var carousel_num = $carousel_boxs.length;
var $current_box = $(".carousel .box").eq(0);
var inMovement = false;

$(document).on("click", ".preview .prev", function () {
    if (inMovement) {
        return;
    }
    if ($current_box.index() < (carousel_num - 3)) {
        var originMarginLeft = $current_box.css("marginLeft");
        inMovement = true;
        $current_box.animate({marginLeft: -$current_box.width() + "px"}, "normal", "swing", function () {
            inMovement = false;
            $current_box.addClass("hide");
            $current_box.css({
                marginLeft: originMarginLeft
            });
            $current_box = $current_box.next();
        })
    }
})
    .on("click", ".preview .next", function () {
        if (inMovement) {
            return;
        }
        if ($current_box.index() > 0) {
            inMovement = true;
            var originMarginLeft = $current_box.css("marginLeft");
            var $prev = $current_box.prev();
            $prev.css({marginLeft: -$current_box.width() + "px"});
            $prev.removeClass("hide");
            $prev.animate({marginLeft: originMarginLeft}, "normal", "swing", function () {
                inMovement = false;
                $current_box = $prev;
            })
        }
    });

var direction = "left";
setInterval(function () {
    if (direction === "left" && $current_box.index() < (carousel_num - 3)) {
        $(".preview .prev").click();
    }else if ($current_box.index() > 0) {
        direction = "right";
        $(".preview .next").click();
    } else {
        direction = "left";
    }
}, 3000);
