Ir para conteúdo
Fórum Script Brasil
  • 0

Barra de navegação em banners


Leonardo Sauer

Pergunta

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

Link para o comentário
Compartilhar em outros sites

3 respostass a esta questão

Posts Recomendados

  • 0

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

Link para o comentário
Compartilhar em outros sites

  • 0
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!

Link para o comentário
Compartilhar em outros sites

Participe da discussão

Você pode postar agora e se registrar depois. Se você já tem uma conta, acesse agora para postar com sua conta.

Visitante
Responder esta pergunta...

×   Você colou conteúdo com formatação.   Remover formatação

  Apenas 75 emoticons são permitidos.

×   Seu link foi incorporado automaticamente.   Exibir como um link em vez disso

×   Seu conteúdo anterior foi restaurado.   Limpar Editor

×   Você não pode colar imagens diretamente. Carregar ou inserir imagens do URL.



  • Estatísticas dos Fóruns

    • Tópicos
      152k
    • Posts
      651,8k
×
×
  • Criar Novo...