CriandoBits
Identifique-se Entrar Esqueceu a senha? Esqueci minha senha

JavaScript/jQuery - Banner rotativo com efeitos de transição

Por Benedito Silva Júnior - publicado em 19/07/2016


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. 

 
Voltar a pagina anteriorVoltarSubir ao topo da páginaTopo