Tenho esse código em jquery que é feito para banner com botoes numéricos (1,2,3,4...). Queria mudar a configuração para que ele possa ser usado co apenas dois botoes, o botão próximo e anterior. Sendo que os banner são dinâmicos, serão adicionados via PHP. Alguem pode me ajudar?
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>