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

Benedito Silva Júnior 30/11/2021

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 de forma bem prática e fácil

Mão na massa!

Siga o passo a passo abaixo para criar o banner rotativo com efeitos de transição:

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.

Dúvidas ou sugestões sobre banner rotativo com efeitos de transição em Java Script? Deixem nos comentários! Para mais dicas, acesse o nosso canal no YouTube:
https://youtube.com/criandobits

O seu computador está lento, travando ou dando tela azul… e você não faz ideia do que fazer?
Saiba que isso pode estar te fazendo perder dinheiro — seja com manutenção cara ou oportunidades que você está deixando passar.
Com o Super Técnico 2.0, você aprende na prática como diagnosticar defeitos, montar computadores do zero e fazer upgrades que realmente aumentam o desempenho, mesmo que você esteja começando do absoluto zero.
Você pode usar esse conhecimento para:
✔ Resolver seus próprios problemas sem depender de ninguém
✔ Ganhar dinheiro com manutenção e suporte técnico
✔ Ou até entrar de vez no mercado de TI

Tudo com aulas diretas ao ponto, sem enrolação e focadas no que realmente funciona no dia a dia.
👉 CLIQUE AQUI AGORA e veja todos os detalhes antes que essa oportunidade passe:

Mão na massa!

Opções de configuração

Deixe um comentário Cancelar resposta