var $carousel_box_container = $(".carousel");
var $carousel_boxs = $(".carousel .box");
var $first_box = $carousel_boxs.eq(0);
var $last_box = $carousel_boxs.eq($carousel_boxs.length-1);
var inMovement = false;

$(document).on("click", ".preview .next", function () {
    if (inMovement) {
        return;
    }
    var originMarginLeft = $first_box.css("marginLeft");
    inMovement = true;
    $first_box.animate({marginLeft: -$first_box.width() + "px"}, "normal", "swing", function () {
        inMovement = false;
        $first_box_next = $first_box.next();
        $last_box = $first_box.remove();
        $first_box = $first_box_next;
        $carousel_box_container.append($last_box);
        setTimeout(function(){
            $last_box.css({
                marginLeft: originMarginLeft
            });
        })
    })

})
    .on("click", ".preview .prev", function () {
        if (inMovement) {
            return;
        }
        inMovement = true;
        $last_box_prev = $last_box.prev();
        var originMarginLeft =  $last_box.css("marginLeft");
        $first_box = $last_box.remove();
        $last_box = $last_box_prev;
        $first_box.insertBefore($(".carousel .box").eq(0));
        $first_box.css({marginLeft: -$first_box.width() + "px"});
        $first_box.animate({marginLeft: originMarginLeft}, "normal", "swing", function () {
            inMovement = false;
        })
    });

setInterval(function () {
    $(".preview .next").click();
}, 3000);
