[Resolvido] Paginação JCycle

Bom galera vou explicar o meu problema. Eu tenho 4 banners em meu site usando as animações do JCycle, logo em baixo eu tenho quatro botões que eu mesmo fiz. Meu problema e fazer essa ligação entre eles.Fazer com que aqueles botões lá em baixo sejam a minha paginação.Já tentei de diversas formas, só que ele acaba sempre quadriplicando um botao :(.

Meu codigo js que seria a animacao do meu banner.

$(function(){
$("#bg_banner").cycle({ //faz o fade da imagem do banner
fx: 'fade',
speed: 1500,
//rev: 1,
timeout: 300000,
prev : '#prev',
next : '#next',
pager : '#pager'
})

$("#orgBanner ul").cycle({ //faz o fade do texto do banner
fx: 'fade',
speed: 800,
timeout: 300000,
speedIn:1000,
speedOut:1000,
prev: '#prev',
next: '#next',
pager : '#pager'
})
});

Como está no html

<div id="bg_banner"> //imagens do banner
 <div class="banner_1"></div>
 <div class="banner_2"></div>
 <div class="banner_3"></div>
 <div class="banner_4"></div>
</div>
 <div id="orgBanner"> //escrito do banner
 <ul>
 <li></li>
 <li></li>
 <li></li>
 <li></li>
 </ul>
</div>

 <div id="menuM"> //menu banner
 <ul id="nav-shadow">
 <li class="button-color-1"><a href="#" title="teste1" alt="Slide 1"></a></li>
 <li class="button-color-2"><a href="#" title="teste2" alt="Slide 2"></a></li>
 <li class="button-color-3"><a href="#" title="teste3" alt="Slide 3"></a></li>
 <li class="button-color-4"><a href="#" title="teste4" alt="Slide 4"></a></li>
 </ul>
 </div>
 </div>

Meu menu tem um efeito de sombra e tal, entao vou colocar o js se precisar

$(document).ready(function() {
$("#nav-shadow li").append('<img class="shadow" src="Imagens/sombra_11.png" width="197" height="15" alt="" />');

	$("#nav-shadow li").hover(function() {
 var e = this;
 $(e).find("a").stop().animate({ marginTop: "-20px" }, 250, function() {
 $(e).find("a").animate({ marginTop: "-10px" }, 250);
 });
 $(e).find("img.shadow").stop().animate({ width: "100%", height: "15px", marginLeft: "8px", opacity: 0.25 }, 250);

	},function(){
 var e = this;
 $(e).find("a").stop().animate({ marginTop: "0px" }, 250, function() {
 $(e).find("a").animate({ marginTop: "0px" }, 250);
 });
 $(e).find("img.shadow").stop().animate({ width: "100%", height: "15px", marginLeft: "0", opacity: 1 }, 250);
	});

});

Preciso muito disso, se alguem conseguir, muito obrigado mesmo

Abraço