O slider é uma ferramenta muito interessante para qual quer site, pois ele cria efeitos de transições “bonitinhos” em galerias de imagens, exatamente a mesma coisa que um flash, porém com uma grande vantagem em relação ao flash, ele é mais leve, e considerando que um slider padrão normalmente fica na página principal de seu site (considerada a primeira parte de seu site, onde o usuário não tem que usar o botão de scroll lock ) é nesta parte de seu site que o primeiro conteúdo ira aparecer portanto será o melhor lugar para fazer uma boa apresentação de seus produtos, e mesmo com a velocidade de internet sempre aumentando colocar um arquivo em flash ali, pode causar uma certa demora, mesmo que de poucos segundos.
Para que possamos criar nosso exemplo vamos precisar fazer o download dos arquivos.
Estes arquivos já estão completos, e o único arquivo que você ira alterar será arquivo index.html e neste arquivo temos uma galeria com varias fotos. O interessante desta galeria é que ela tem 2 meios de rotação de imagens: 1 deles é clicando nas setas de navegação, o outro é clicando nos botões abaixo da imagem indo diretamente para as fotos que quer.
Vamos ao código
Dentro do arquivo index.html temos a galeria completa basta alterar os link das imagens para onde estão as suas imagens. Para isso abra a página com o programa de edição de código de sua preferência, e alterar o código “img src” para o caminho das suas imagens.
<img src="imagens/slide1.jpg" alt="" />
É basicamente só isso que precisamos alterar para criar esta página, os códigos jQuery, assim como tudo que é necessário já esta disponível nesta postagem para o Download.
Os códigos para ligar o jQuery e o CSS a sua página esta aqui :
<link rel="stylesheet" href="nivo-slider.css" type="text/css" /> <link rel="stylesheet" href="themes/default/default.css" type="text/css" media="screen" /> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js" type="text/javascript"></script> <script src="jquery.nivo.slider.pack.js" type="text/javascript"></script>
Agora basta “chamar” a função do plugin que ativa o slider:
<script type="text/javascript">
$(window).load(function() {
$('#slider').nivoSlider();
});
</script>
O código de nossa página fica assim :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Implementação de Slider com jQuery - YESbr Agência Web</title>
<link rel="stylesheet" href="nivo-slider.css" type="text/css" />
<link rel="stylesheet" href="themes/default/default.css" type="text/css" media="screen" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js" type="text/javascript"></script>
<script src="jquery.nivo.slider.pack.js" type="text/javascript"></script>
<script type="text/javascript">
$(window).load(function() {
$('#slider').nivoSlider();
});
</script>
</head>
<body>
<div style="width:400px;" class="theme-default">
<div id="slider" class="nivoSlider">
<img src="imagens/slide1.jpg" alt="" />
<a href="http://agencia.yesbr.com.br/"><img src="imagens/slide2.jpg" alt="" title="#htmlcaption" /></a>
<img src="imagens/slide3.jpg" alt="" title="Exemplo de caption" />
</div>
<div id="htmlcaption" class="nivo-html-caption">
<strong>Exemplo</strong> de <em>HTML</em> caption com <a href="#">link</a>.
</div>
</div>
</body>
</html>
Este código cria o exemplo de nosso slider, este tipo de slider é usado especialmente para parte principal do site, com descrição de eventos, ou produtos, ou ainda poder ser usado em outras partes de seu site, pois podemos criar galerias de imagens, este tipo de slider é bem utilizado em sites que necessitam de galerias de fotos, como hospedagens, hotéis etc.
É importante ressaltar que a primeira DIV do código serve apenas para limitar a largura do slider (a altura é ajustada automaticamente) e para ativar o tema do slider (mais temas estão disponíveis no arquivo para download). Já a segunda DIV não deve ser alterada (nem “ID”, nem “class”), pois é por meio dela que o plugin inicia o slider.
Você também poderá inserir links nas imagens, como visto na linha 24 do nosso código, e também uma descrição das imagens, que possui duas técnicas diferentes: a primeira é a mais simples; Basta inserir a descrição na tag “alt” da respectiva imagem (vide linha 35). Já a segunda maneira, permite inserir tags html na descrição. Para tal, utilize a tag “title” para indicar o ID da div em que a descrição se encontra (vide linha 24 com o ID da div, e as linhas 27 a 29 com a respectiva DIV).
No comment yet, add your voice below!