如何在这个旋转木马上顺利导航两种方式？

Question

我有以下旋转木马，它就像我想要的那样导航到右边，但我无法在左侧获得相同的动画。有谁愿意帮我解决这个问题？

http://jsfiddle.net/kaisersoze/QDUea/5/

全屏：

http://jsfiddle.net/kaisersoze/QDUea/5/embedded/result/

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();

});

PS。您可以通过单击轮播中的右/左项来导航

Answer 1

解决了，我几乎在那里。只有缺少的是prev按钮处理程序中的以下内容：

data.items.visible.first（）的CSS（_outLeft）;