Banner rotativo com efeitos de transição em Java Script

Com JavaScript é possível criar uma variedade de banners para exibição de conteúdo em sites. Neste post veja banner rotativo com efeitos de transição em Java Script.

1. Antes de tudo, faça o download do jQuery, do plugin do Coin Slider e do arquivo CSS, clicando aqui;

2. Copie os arquivos baixados para o servidor. Devem constar os arquivos “coin-slider-styles.css”, “coin-slider.min.js” e “jquery-1.11.2.min.js”.

O arquivo “jquery-1.11.2.min.js” pode ser omitido, desde que informado um outro arquivo de outro local (veremos isso mais a diante);

3. Faça a chamada dos arquivos do servidor na sua página. Para isso, inclua as seguintes linhas depois da tag </head>:

<script type="text/javascript" src="jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="coin-slider.min.js"></script>
<link rel="stylesheet" href="coin-slider-styles.css" type="text/css" />

É possível usar um outro arquivo jquery hospedado nos servidores do Google. Para isso, substitua o caminho do jQuery acima por

https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js

Dentro das tags <body> inclua as seguintes linhas:

 <div id='coin-slider'>
  <a href="link" target="_blank"> //link da imagem
   <img src='img01.jpg' /> //caminho da imagem
   <span>Imagem 01</span> //descrição da imagem
  </a>
  <a href="link" target="_blank">
   <img src='img02.jpg' />
   <span>Imagem 02</span>
  </a>
  <a href="link" target="_blank">
   <img src='img03.jpg' />
   <span>Imagem 03</span>
  </a>	
  </div>
  <script type="text/javascript">
   $(document).ready(function() {
   $('#coin-slider').coinslider({ width: 500, height:313 }); //tamanho do banner
 </script>

Insira os códigos acima no local desejado da página. Serão mostradas imagens diferentes a cada 5 segundos e entre transições.

Opções de configuração:

width: 565, // largura do slider panel
height: 290, // altura do slider panel
spw: 7, // quadros por largura
sph: 5, // quadros por altura
delay: 3000, // intervalo de tempo entre as imagens, em milissegundos
sDelay: 30, // intervalo de tempo entre as imagens, em milissegundos
opacity: 0.7, // opacidade do título e da navegação
titleSpeed: 500, // velocidade de aparição do títuo em milissegundos
effect: ", // random, swirl, rain, straight
navigation: true, // botões anterior e próximo
links : true, // mostrar links nas imagens
hoverPause: true // pausar a transição ao parar o mouse em cima da imagem

Atenção ao configurar o “spw” e “sph” pois a colocação de muitos quadros faz a transição ficar muito lenta, e o site também.

QUER SER UM PROGRAMADOR FULL-STACK E DOMINAR AS PRINCIPAIS TECNOLOGIAS DO MERCADO?

Aprenda através de projetos reais e aulas práticas. São 20 cursos completos + cursos bônus. Grupos privados exclusivos, atualizações constantes e lives semanais.

Python, PHP, Java Script, CSS, Node, Angular JS, MySQL, Photoshop, Flutter, AWS, Apache e muito mais!

CLIQUE NA IMAGEM ABAIXO E CONFIRA MAIS DETALHES:

CLIQUE AQUI E SAIBA MAIS

Preecher campos automaticamente com base no CEP em Java Script

Dúvidas ou sugestões? Deixem nos comentários! Para mais dicas, acesse o nosso canal no YouTube:
https://youtube.com/criandobits

Quer receber GRÁTIS o e-book "Como Formatar um Computador em 5 Minutos"?

Banner rotativo com efeitos de transição em Java Script

Receba grátis o e-book Como Formatar um PC em 5 Minutos

Deixe um comentário Cancelar resposta