Barra de navegação em banners

Bom dia pessoal,

Estou com uma dúvida em relação ao código a seguir e acredito que alguém possa me ajudar, esse código se refere aos banners do site da empresa que eu trabalho, no caso essa aqui: http://tcacontabilpr.com.br/index.php

Percebam que ficam passando 4 banners no site, com diferentes noticias, só que não tem uma barra de navegação, aquelas flechas para voltar ou passar o banner. Gostaria de saber se tem como eu implementar isso e o que eu tenho que modificar no código.

Segue código:

 <div class="banner hidden">
 <div class="fd-slogan">
 <div class="estrutura" id="textosBanner">
 <p onclick="window.open('fluxodecaixa.php','_parent')" style="cursor: pointer;"><span>10 DICAS</span> PARA <span>MELHORAR</span> O <span>FLUXO DE CAIXA</span> DA SUA <span>EMPRESA</span></p>
 <p onclick="window.open('lider.php','_parent')" style="cursor: pointer;">COMO UM <span>LÍDER</span> ATUA NO <span>GERENCIAMENTO DE PESSOAS</span>?</p>
 <p onclick="window.open('ferias.php','_parent')" style="cursor: pointer;"><span>O QUE</span> SÃO <span>PERÍODO AQUISITIVO</span> E <span>PERÍODO CONCESSIVO</span> DE <span>FÉRIAS?</span></p>
 <p onclick="window.open('nome.php','_parent')" style="cursor: pointer;"><span>QUAL</span> A <span>IMPORTÂNCIA</span> DO <span>NOME</span> DA SUA <span>EMPRESA</span>?</p>
 </div>
 </div>
 <img src="banner/01.jpg">
 <img src="banner/02.jpg">
 <img src="banner/03.jpg">
 <img src="banner/04.jpg">
	</div>
	<img src="imagem/shadow.png" class="sombra">

	<script>
 $(function(){
 $('.banner').cycle({});
 });
 $(function(){
 $('#textosBanner').cycle({
 slides: '> p'
 });
 });
	</script>

	Obs: Não tenho muita experiencia com desenvolvimento web, estou usando filezilla e o notepad++ para fazer as modificações no site.

	Obs²: Me indicaram bootstrap, mas não sei como fazer a implementação no site, se puderem me auxiliar ficarei muito agradecido

	Obrigado desde já.