Rotary banner with previous and next button

Question

I have this code in jquery which is made for banner with numeric buttons (1,2,3,4...). I wanted to change the configuration so that it can be used with only two buttons, the next and previous button. Since the banners are dynamic, they will be added via PHP. Can anyone 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>