problema de logica com jquery na parte de .animate

[kewyn 0]

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