Barra de navegação em banners

[Leonardo Sauer]

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á.

[Marcos Renato]

Olá amigo!

sim eu tambem indicaria bootstrap. 

Para fazer a implementação do bootstrap basta fazer download do bootstrap no link:
http://getbootstrap.com/

Para implementar ele você precisa copiar os arquivos para suas respeciticas pastas de acordo com a estrutura do seu site conforme já existe por ex.

Css na pasta de css, javascript na pasta dele e fonts a mesma coisa.

Depois você vai nas páginas que deseja implementa-lo e importa o css do bootstrap no header da sua página e o javascript logo antes do fechamento do /body.

você pode ver exemplos disso que estou dizendo aqui:
http://getbootstrap.com/getting-started/

 

depois de implementado para colocar um slider com os botões de navegação basta substituir o codigo do seu slider por esse aqui:

 

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
    <li data-target="#carousel-example-generic" data-slide-to="1"></li>
    <li data-target="#carousel-example-generic" data-slide-to="2"></li>
  </ol>

  <!-- Wrapper for slides -->
  <div class="carousel-inner" role="listbox">
    <div class="item active">
      <img src="..." alt="...">
      <div class="carousel-caption">
        ...
      </div>
    </div>
    <div class="item">
      <img src="..." alt="...">
      <div class="carousel-caption">
        ...
      </div>
    </div>
    ...
  </div>

  <!-- Controls -->
  <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

 

Você pode ver mais no link:
http://getbootstrap.com/javascript/#carousel

[Leonardo Sauer]

16 horas atrás, Marcos Renato disse:

Olá amigo!

sim eu tambem indicaria bootstrap. 

Para fazer a implementação do bootstrap basta fazer download do bootstrap no link:
http://getbootstrap.com/

Para implementar ele você precisa copiar os arquivos para suas respeciticas pastas de acordo com a estrutura do seu site conforme já existe por ex.

Css na pasta de css, javascript na pasta dele e fonts a mesma coisa.

Depois você vai nas páginas que deseja implementa-lo e importa o css do bootstrap no header da sua página e o javascript logo antes do fechamento do /body.

você pode ver exemplos disso que estou dizendo aqui:
http://getbootstrap.com/getting-started/

 

depois de implementado para colocar um slider com os botões de navegação basta substituir o codigo do seu slider por esse aqui:

 

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
    <li data-target="#carousel-example-generic" data-slide-to="1"></li>
    <li data-target="#carousel-example-generic" data-slide-to="2"></li>
  </ol>

  <!-- Wrapper for slides -->
  <div class="carousel-inner" role="listbox">
    <div class="item active">
      <img src="..." alt="...">
      <div class="carousel-caption">
        ...
      </div>
    </div>
    <div class="item">
      <img src="..." alt="...">
      <div class="carousel-caption">
        ...
      </div>
    </div>
    ...
  </div>

  <!-- Controls -->
  <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

 

Você pode ver mais no link:
http://getbootstrap.com/javascript/#carousel

Bom dia Marcos,

Primeiramente muito obrigado pela atenção.

Apesar de eu não ter muita experiencia com isso eu vou estar tentando fazer essa implementação.

Obrigado pela ajuda, um forte abraço!

[Marcos Renato]

Nada! se tiver qualquer dúvida na hora de implementar pode perguntar que ajudo você 

 

att