Rotary banner with previous button and next

I have this code in jquery that is made for banner with numeric buttons (1,2,3,4 ...). I wanted to change the setting so that it can be used with just two buttons, the next and previous button. Since the banner is dynamic, it will be added via PHP. Can someone help me?

JQUERY

var tempoBanner = setTimeout(function(){},5);
        var quantidadeBanner = $('.n-slider').length;
        function mudaBanner(idbanner){
            clearTimeout(tempoBanner);
            $('.slider').stop();
            $('.slider').animate({marginLeft:-((idbanner -1)*990)},500);
            $('.slider').css("width", (quantidadeBanner*990)+"px");

            tempoBanner = setTimeout(function(){
                if(idbanner==quantidadeBanner){
                    idbanner=0;
                }
                mudaBanner(idbanner+1);
            },5000);
        }

        $(document).ready(function(){
            mudaBanner(1);
        });

HTML

<div id="banner">
        <div class="dados" style="overflow: hidden;">
            <div style="width:999999px; height:480px; margin-left:0px;" class="slider">

                <div id="slider" style="overflow: hidden;" class="n-slider">
                    <div class="img"><img src="1.jpg" width="550" style="margin-top: 80px;"></div>
                    <div class="texto" >
                        <div class="titulo">titulo</div>
                        <div class="conteudo">conteudo</div>
                        <a href="#" class="link">Saiba Mais</a>
                    </div>
                </div>

                <div id="slider" style="overflow: hidden;" class="n-slider">
                    <div class="img"><img src="2.jpg" width="550" style="margin-top: 80px;"></div>
                    <div class="texto" >
                        <div class="titulo">titulo 2</div>
                        <div class="conteudo">conteudo 2</div>
                        <a href="#" class="link">Saiba Mais</a>
                    </div>
                </div>

                <div id="slider" style="overflow: hidden;" class="n-slider">
                    <div class="img"><img src="3.jpg" width="550" style="margin-top: 80px;"></div>
                    <div class="texto" >
                        <div class="titulo">titulo 3</div>
                        <div class="conteudo">conteudo 3</div>
                        <a href="#" class="link">Saiba Mais</a>
                    </div>
                </div>

            </div>
            <div class="mover-dados">
                <div class="ant">Anterior</div>
                <div href="#" class="prox">Proximo</div>
            </div>
        </div>
    </div>