Jquery 如何以两种方式顺利导航此旋转木马？

我有下面的旋转木马，它导航到右边就像我想要的，但我不能得到同样的动画到左边。有人愿意帮我解决这个问题吗

全屏：

函数initCarousel（）{
变量_中心={
宽度：210，
身高：120，
marginLeft:0，
玛金托普：0，
marginRight:10
};
变量_左={
宽度：178，
身高：100，
marginLeft:0，
玛金托普：9，
右边：-118
};
var_right={
宽度：178，
身高：100，
边缘左：-119，
玛金托普：9，
marginRight:0
};
var\u outLeft={
宽度：133，
身高：75，
marginLeft:210，
玛金托普：9，
右边：-250
};
var _完全={
宽度：133，
身高：75，
marginLeft:0，
玛金托普：9，
marginRight:210
};
var i=0；
$（“#carousel ul”）。carouFredSel({
是的，
宽度：600，
身高：135，
align:false，
汽车：错，
项目：{
可见：5，
宽度：100
},
下一步：{
按钮：“#btn向右走”，
项目：1，
持续时间：600，
onBefore：函数（数据）{
如果（i>1）{
i=1；
}
data.items.old.eq（0）.animate（_outLeft）；
data.items.visible.eq（0）.animate（_left）.removeClass（'active'）；
data.items.visible.eq（1）.animate（_center）.addClass（'active'）；
data.items.visible.eq（2）.animate（_center）.addClass（'active'）；
data.items.visible.eq（3）.animate（_right）.css（{zIndex:1}）.removeClass（'active'）；
data.items.visible.eq（4）.next（）.css（_out）.css（{zIndex:0}）；
setTimeout（函数（）{
data.items.old.eq（0）.css（{zIndex:1}）；
data.items.visible.eq（0）.css（{zIndex:2}）；
data.items.visible.eq（1）.css（{zIndex:3}）；
data.items.visible.eq（2）.css（{zIndex:3}）；
data.items.visible.eq（3）.css（{zIndex:2}）；
data.items.visible.eq（4）.css（{zIndex:1}）；
}, 300);
}
},
上一页：{
按钮：“#btn向左走”，
项目：1，
持续时间：600，
onBefore：函数（数据）{
$（'#carousel ul'）.children（）.eq（4）.css（_out）.css（{zIndex:-1}）；
if（i<4）{
$（'#carousel ul'）.children（）.eq（0）.css（_left）.css（{zIndex:2}）；
$（'#carousel ul'）.children（）.eq（4）.css（_right）.css（{zIndex:2}）；
//$（'#carousel ul'）.children（）.eq（0）.animate（_outLeft）.css（{zIndex:3}）；
//$（'#carousel ul'）.children（）.eq（1）.animate（_left）.css（{zIndex:3}）；
//$（'#carousel ul'）.children（）.eq（2）.animate（_center）.css（{zIndex:3}）；
//$（'#carousel ul'）.children（）.eq（3）.animate（_center）.css（{zIndex:2}）；
$（'#carousel ul'）.css（{'position'：'relative'，'left'：'10px'}）；
i++；
}
data.items.old.eq（0）.animate（_center）；
data.items.visible.eq（0）.animate（_left）.removeClass（'active'）；
data.items.visible.eq（1）.animate（_center）.addClass（'active'）；
data.items.visible.eq（2）.animate（_center）.addClass（'active'）；
data.items.visible.eq（3）.animate（_right）.css（{zIndex:1}）.removeClass（'active'）；
data.items.visible.eq（4）.next（）.css（_outLeft）.css（{zIndex:0}）；
setTimeout（函数（）{
data.items.old.eq（0）.css（{zIndex:3}）；
data.items.visible.eq（0）.css（{zIndex:2}）；
data.items.visible.eq（1）.css（{zIndex:3}）；
data.items.visible.eq（2）.css（{zIndex:3}）；
data.items.visible.eq（3）.css（{zIndex:2}）；
data.items.visible.eq（4）.css（{zIndex:1}）；
}, 300);
}
}
});
$（'#carousel ul'）.children（）.eq（0）.css（_left）.css（{zIndex:2}）；
$（'#carousel ul'）.children（）.eq（1）.css（#u center）.css（{zIndex:3}）；
$（'#carousel ul'）.children（）.eq（2）.css（#u center）.css（{zIndex:3}）；
$（'#carousel ul'）.children（）.eq（3）.css（_right）.css（{zIndex:2}）；
$（'#carousel ul'）.children（）.eq（4）.css（_outLeft）.css（{zIndex:1}）；
}
$（文档）.ready（函数（）{
initCarousel（）；
});

---

另外，您可以通过单击旋转木马中的右/左项目来导航。解决了它，我就快到了。唯一缺少的是prev按钮处理程序中的以下内容：

---

data.items.visible.first（）.css（_outLeft）

请注意，在左键点击五次后，它会像我想要的那样进行动画制作，与右键相同。该问题仅在前五次向左单击时出现，在再次向右单击后，前五次向左单击时出现

function initCarousel() {
    var _center = {
        width: 210,
        height: 120,
        marginLeft: 0,
        marginTop: 0,
        marginRight: 10
    };
    var _left = {
        width: 178,
        height: 100,
        marginLeft: 0,
        marginTop: 9,
        marginRight: -118
    };
    var _right = {
        width: 178,
        height: 100,
        marginLeft: -119,
        marginTop: 9,
        marginRight: 0
    };
    var _outLeft = {
        width: 133,
        height: 75,
        marginLeft: 210,
        marginTop: 9,
        marginRight: -250
    };
    var _outRight = {
        width: 133,
        height: 75,
        marginLeft: 0,
        marginTop: 9,
        marginRight: 210
    };

    var i = 0;

    $('#carousel ul').carouFredSel({
        debug: true,
        width: 600,
        height: 135,
        align: false,
        auto: false,
        items: {
            visible: 5,
            width: 100
        },
        next: {
            button: '#btn-go-right',
            items: 1,
            duration: 600,
            onBefore: function(data) {

                if(i > 1){
                    i = 1;
                }

                data.items.old.eq( 0 ).animate(_outLeft);
                    data.items.visible.eq( 0 ).animate(_left).removeClass('active');
                    data.items.visible.eq( 1 ).animate(_center).addClass('active' );
                    data.items.visible.eq( 2 ).animate(_center).addClass('active');
                    data.items.visible.eq( 3 ).animate(_right).css({ zIndex: 1 }).removeClass('active');
                    data.items.visible.eq( 4 ).next().css(_outRight).css({ zIndex: 0 });

                setTimeout(function () {
                    data.items.old.eq( 0 ).css({ zIndex: 1 });
                    data.items.visible.eq( 0 ).css({ zIndex: 2 });
                    data.items.visible.eq( 1 ).css({ zIndex: 3 });
                    data.items.visible.eq( 2 ).css({ zIndex: 3 });
                    data.items.visible.eq( 3 ).css({ zIndex: 2 });
                    data.items.visible.eq( 4 ).css({ zIndex: 1 });
                }, 300);
            }
        },
        prev: {
            button: '#btn-go-left',
            items: 1,
            duration: 600,
            onBefore: function(data) {

                $('#carousel ul').children().eq( 4 ).css(_outRight).css({ zIndex: -1 });

                if(i < 4){
                    $('#carousel ul').children().eq( 0 ).css(_left).css({ zIndex: 2 });
                    $('#carousel ul').children().eq( 4 ).css(_right).css({ zIndex: 2 });
                    // $('#carousel ul').children().eq( 0 ).animate(_outLeft).css({ zIndex: 3 });
                    // $('#carousel ul').children().eq( 1 ).animate(_left).css({ zIndex: 3 });
                    // $('#carousel ul').children().eq( 2 ).animate(_center).css({ zIndex: 3 });
                    // $('#carousel ul').children().eq( 3 ).animate(_center).css({ zIndex: 2 });
                    $('#carousel ul').css({'position':'relative','left':'10px'});
                    i++;
                }

                data.items.old.eq( 0 ).animate(_center);
                    data.items.visible.eq( 0 ).animate(_left).removeClass('active');
                    data.items.visible.eq( 1 ).animate(_center).addClass('active');
                    data.items.visible.eq( 2 ).animate(_center).addClass('active');
                    data.items.visible.eq( 3 ).animate(_right).css({ zIndex: 1 }).removeClass('active');
                    data.items.visible.eq( 4 ).next().css(_outLeft).css({ zIndex: 0 });

                setTimeout(function () {
                    data.items.old.eq( 0 ).css({ zIndex: 3 });
                    data.items.visible.eq( 0 ).css({ zIndex: 2 });
                    data.items.visible.eq( 1 ).css({ zIndex: 3 });
                    data.items.visible.eq( 2 ).css({ zIndex: 3 });
                    data.items.visible.eq( 3 ).css({ zIndex: 2 });
                    data.items.visible.eq( 4 ).css({ zIndex: 1 });
                }, 300);
            }
        }
    });

    $('#carousel ul').children().eq( 0 ).css(_left).css({ zIndex: 2 });
    $('#carousel ul').children().eq( 1 ).css(_center).css({ zIndex: 3 });
    $('#carousel ul').children().eq( 2 ).css(_center).css({ zIndex: 3 });
    $('#carousel ul').children().eq( 3 ).css(_right).css({ zIndex: 2 });
    $('#carousel ul').children().eq( 4 ).css(_outLeft).css({ zIndex: 1 });

}


$(document).ready( function(){

initCarousel();

});