Neste post vou mostrar como incluir um banner rotativo no seu site.
As imagens deste post foram escolhidas aleatoriamente apenas para título de demonstração.
Em primeiro lugar, baixe o arquivo
banner.zip contendo todas as pastas e códigos que utilizaremos.
Descompacte as pastas na mesma pasta raiz onde está o arquivo html que será incluido o banner.
Abra o arquivo banner.html e copie o código conforme descrição abaixo.
No cabeçalho da sua página, será necessário incluir as seguintes linhas de código:
<link href="css/camera.css" rel="stylesheet"></link><i> <script src="js/jquery.js"></script> <script src="js/jquery-migrate-1.2.1.js"></script> <script src="js/script.js"></script> <script src="js/superfish.js"></script> <script src="js/jquery.ui.totop.js"></script> <script src="js/jquery.mobilemenu.js"></script> <script src="js/jquery.easing.1.3.js"></script> <script src="js/jquery.tooltipster.js"></script> <script src="js/camera.js"></script> <!--[if (gt IE 9)|!(IE)]><!--> <script src="js/jquery.mobile.customized.min.js"></script> <!--<![endif]--> <script src="js/modernizr.custom.js"></script> <script> $(document).ready(function(){ jQuery('#camera_wrap').camera({ loader: 'pie', pagination: true , minHeight: '200', thumbnails: true, height: '40.85106382978723%', caption: true, navigation: true, fx: 'mosaic' }); $().UItoTop({ easingType: 'easeOutQuart' }); $('.tooltip').tooltipster(); }); </script>
No código html após as tags <body> inclua o texto abaixo:
<div class="slider">
<div class="camera_wrap" id="camera_wrap">
<div data-thumb="images/thumb.png" data-src="images/slide.jpg">
<div class="caption fadeFromBottom">
Descrição Banner 1
</div>
</div>
<div data-thumb="images/thumb1.jpg" data-src="images/slide1.jpg">
<div class="caption fadeFromBottom">
Descrição Banner 2
</div>
</div>
<div data-thumb="images/thumb2.png" data-src="images/slide2.jpg">
<div class="caption fadeFromBottom">
Descrição Banner 3
</div>
</div>
<div data-thumb="images/thumb3.png" data-src="images/slide3.jpg">
<div class="caption fadeFromBottom">
Descrição Banner 4
</div>
</div>
</div>
</div>
<script src="js/classie.js"></script>
<script src="js/thumbnailGridEffects.js"></script>
Salve os arquivos e caso seja necessário, altere as propriedades da classe slider, a qual tem as proporções do banner configuradas.
