problema de logica com jquery na parte de .animate

Boa noite pessoal.

Estou com problema na logica da .animate de meu banner,

quero q as imagens entre umas atras da outra, e não q ele fique atras como esta, quero q ela ganhe esse feito na hora q eu clico no botão, quanto para a esquerda, quanto para a direita, tipo slide mesmo, já quebrei a cabeça e n consigo, se alguém puder me ajuda , agradeço desde ja.

segue meu jquery:

	    $(document).ready(function(){

	            

	            //Clique do botão esquerda

	            $('#esquerda').click(function(){

	            

	                var largura_div_container = $('#banners').width();

	                var qtde_imagens = $('#banners img').length;

	                

	                $('#banners img').each(function(){    

	                    var zindex = parseInt($(this).css('z-index'))+1;

	                    

	                    $(this).css('z-index', zindex);    

	                    if (qtde_imagens == (zindex-1)) {

	                        

	                        $(this).animate({

	                            'left' : '-'+largura_div_container+'px'

	                        }, 1500, function() {

	                            $(this).css({

	                                'z-index': '1',

	                                'left': '0px'

	                            });

	                        });

	                    }

	                        

	                        

	                    

	                });

	                

	            });

	            

	            

	            $('#direita').click(function(){

	            

	                var largura_div_container = $('#banners').width();

	                var qtde_imagens = $('#banners img').length;

	                

	                $('#banners img').each(function(){    

	                    var zindex = parseInt($(this).css('z-index'))+1;

	                    

	                    $(this).css('z-index', zindex);    

	                    if (qtde_imagens == (zindex-1)) {

	                        

	                        $(this).animate({

	                            'left' : largura_div_container+'px'

	                            }, 1500, function() {

	                                $(this).css({

	                                'z-index': '1',

	                                'left': '0px'

	                            });

	                        });

	                    }

	                    

	                });

	                

	            });

	            

	        

	        });

	    </script>

	[index.html](/applications/core/interface/file/attachment.php?id=1303)