이 회전식 슬라이드를 두 가지 방법으로 원활하게 탐색하는 방법은 무엇입니까?

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

해결했습니다. 거의 다 왔어요. 누락 된 것만 이전 버튼 처리기에서 다음과 같습니다 :

data.items.visible.first(). css (_outLeft);