Soluções

Instalando o Nivo Slider em seu blog WordPress – sem Plugin

Anúncios Google

O Nivo Slider é um aplicativo em jQuery para exibição de slides de imagem, sem dúvidas um dos melhores disponíveis no mercado. Com estrutura muito simplificada, tem configurações que incluem legendas simples ou em HTML (permitindo uso de links ou qualquer outra marcação), vários tipos de transição, etc.

Desenvolvido pelo Dev7Studios, tem versões pagas e grátis, e vamos ver aqui como instalar sem dificuldade em seu blog ou site (como de costume, o processo mostrado é no WordPress). Lembrando que eliminar plugins é sempre bem-vindo, mas se você tiver dificuldade para lidar com HTML, CSS e um pouco jQuery, é melhor ficar com ele mesmo.

Para começar, baixe a versão que preferir no site do desenvolvedor. Se quiser a grátis, clique em Download jQuery Plugin. Ou dê um incentivo ao desenvolvedor adquirindo a versão paga, clicando em Buy. O plugin pronto para WordPress custa no mínimo US$29,00.

Nivo Slider download

Descompacte o arquivo baixado, você terá uma pasta com outra pasta dentro, chamada “nivo-slider”. Envie essa pasta (que contém arquivos como “jquery.nivo.slider” e “nivo-slider.css” para o servidor onde está seu blog. Eu considero uma boa colocá-la junto com seu template, dentro da “js” (se existir, senão crie uma).

Carregando scripts e estilos

Para funcionar, você precisar chamar os scripts e estilos no seu blog. Vamos usar como base o arquivo de demonstração (demo.html): ao examinar seu código, veremos os estilos carregados no header, e scripts no footer.

Abra então o header.php do seu blog, e antes do fechamento da tag header, insira:

<link rel="stylesheet" href="<?php bloginfo('template_url') ?>/js/nivo-slider/themes/default/default.css" type="text/css" media="screen" />
<link rel="stylesheet" href="<?php bloginfo('template_url') ?>/js/nivo-slider/themes/light/light.css" type="text/css" media="screen" />
<link rel="stylesheet" href="<?php bloginfo('template_url') ?>/js/nivo-slider/themes/dark/dark.css" type="text/css" media="screen" />
<link rel="stylesheet" href="<?php bloginfo('template_url') ?>/js/nivo-slider/themes/bar/bar.css" type="text/css" media="screen" />
<link rel="stylesheet" href="<?php bloginfo('template_url') ?>/js/nivo-slider/nivo-slider.css" type="text/css" media="screen" />

Com isso, quase todos os estilos já estão carregados. Abra seu arquivo style.css e acrescente:

.slider-wrapper { 
width: 100%; 
margin: 20px auto;
}
.clear { clear:both; }

Agora no footer.php, logo antes do fechamento da body, acrescente:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="<?php bloginfo('template_url') ?>/js/nivo-slider/jquery.nivo.slider.js"></script>
<script type="text/javascript">
$(window).load(function() {
$('#slider').nivoSlider();
});
</script>

Quase tudo pronto. Só falta criar a marcação dos seus sliders agora.

Criando sliders

Se nada aconteceu de errado (como uma incompatibilidade com plugins ou outros scripts que você já use), o Nivo está pronto, é só acrescentar a marcação onde quiser que os slides apareçam. Como não estamos usando um plugin de WordPress, não vai ter moleza de janelas e menus para automatizar o processo: tem que fazer “na unha”.

Mas não se preocupe pois não é o fim do mundo. O slider deve ser inserido dentro de uma “div-mãe-de-todos”, com a classe que indicará o estilo do slider (como você nota na pasta Themes, há quatro disponíveis).

<div class="slider-wrapper theme-default">

Além da classe slider-wrapper, ela leva a indicação do tema padrão (default). Se quiser alterar o estilo do slider, troque o default por um dos outros temas disponíveis (bar, dark ou light, veja mais à frente). Depois, outra div que abre o slider.

<div class="nivoSlider" id="slider">

Dentro desta colocamos as imagens do slider. A altura dele é automático e a largura foi ajustada em 100% na estilização que marcamos no style.css, mas é recomendável que você use imagens com o mesmo tamanho.

Se a largura do lugar em que vai exibir o slider é 650 pixels, procure criar imagens com essa largura, e as outras com a mesma largura e altura. Caso contrário, o slider vai mudar de tamanho a cada slide, e pode não ficar muito interessante visualmente.

Essa é uma marcação para um slider básico com quatro imagens:

<img src="url-da-imagem-1" alt="" /><img src="url-da-imagem-2" alt="" /><img src="url-da-imagem-3" alt="" /><img src="url-da-imagem-4" alt="" />

Ou seja: a simples chamada de imagens via HTML. Depois é só fechar as divs apropriadamente. Evite deixar espaços ou quebras de linha entre as imagens para prevenir-se contra erros. Há atributos que podem ser adicionados para criar legendas e miniaturas nos slides.

Vamos ver a seguir marcações para sliders com esses atributos.

Navegação com ou sem miniaturas

Para ativar as miniaturas na navegação do slider, altere o código que inseriu no footer. Onde estava:

<script type="text/javascript">
$(window).load(function() {
$('#slider').nivoSlider();
});
</script>

Mude para:

<script type="text/javascript">
$(window).load(function() {
$('#slider').nivoSlider({ controlNavThumbs:true });
});
</script>

Insira onde quer ver o slider a marcação similar a esta:

<div class="slider-wrapper theme-default">
<div id="slider" class="nivoSlider">
<img src="url-imagem-1" data-thumb="url-imagem-1" alt="" /><img alt="" src="url-imagem-2" data-thumb="url-imagem-2" /><img alt="" src="url-imagem-3" data-thumb="url-imagem-3" /><img alt="" src="url-imagem-4" data-thumb="url-imagem-4" /></div></div>

No “data-thumb”, indique o endereço da miniatura, que pode ser a mesma imagem do slider, ou qualquer outra. Se quiser um slider sem miniaturas – e com os pontos de navegação no lugar – é só retirar os atributos “data-thumb”.

Legendas

Existem dois meios de criar legendas nos slides: um mais simples com apenas texto, e outro que aceita conteúdo HTML como quebras de linha, divs, etc.

Texto simples

Basta acrescentar na marcação da imagem um atributo title. Por exemplo, no nosso slider anterior, adicione na primeira imagem:

<img src="url-imagem-1" data-thumb="url-imagem-1" alt="" title="Legenda do slider" />

Faça isso em quantos slides quiser.

Conteúdo em HTML

Um pouco mais complicado, exige a criação de mais divs. Comece fazendo como antes, acrescentando um “title” na marcação da imagem, mas dê-lhe como título um identificador. Por exemplo:

<img src="url-imagem-1" data-thumb="url-imagem-1" alt="" title="#legenda1" />

Depois crie, logo após a div com o id “slider” (fora daquela div que guarda as imagens, mas dentro da div “mãe-de-todos”), uma nova div com o mesmo id que o título da imagem que receberá a legenda.

Confuso, não? Vamos ver na prática:

<div class="slider-wrapper theme-default">//a div mãe-de-todos
<div id="slider" class="nivoSlider">//a div das imagens
<img src="url" data-thumb="url" alt="" title="#legenda1" /><img src="url2" data-thumb="url2" alt="" title="#legenda2" /><img src="url3" data-thumb="#url3" alt="" title="#legenda3" /><img src="url4" data-thumb="url4" alt="" title="#legenda4" />
</div>
<div id="legenda1" class="nivo-html-caption"><strong>Essa</strong> é a legenda da primeira imagem.
</div>
<div id="legenda2" class="nivo-html-caption">Essa legenda também aceita <a href="#">links</a>.
</div>
<div id="legenda3" class="nivo-html-caption"><strong>Legenda 3</strong></br />Qualquer marcação HTML é aceita.
</div>
<div id="legenda4" class="nivo-html-caption">Texto em <i>itálico</i>, sub<sub>escrito</sub><ul><li>E até</li><li>listas</li></ul>
</div>
</div>
</div>

Mais opções

Dentro da chamada em jQuery pelo slider feita no footer, a mesma que editamos para ativar as miniaturas, outras opções podem ser configuradas. Como ficaria com todas as opções:

<script type="text/javascript">
$(window).load(function() {
$('#slider').nivoSlider({
effect: 'fade', // Tipo de transição: 'sliceDown, sliceDownLeft, sliceUp, sliceUpLeft, sliceUpDown, sliceUpDownLeft, fold, fade, random, slideInRight, slideInLeft, boxRandom, boxRain, boxRainReverse, boxRainGrow, boxRainGrowReverse'
slices: 10, // número de fatias na animação
boxCols: 8, // número de colunas na animação de caixas
boxRows: 4, // número de linhas na animação de caixas
animSpeed: 250, // velocidade da transição
pauseTime: 2500, // duração da exibição de cada slide
startSlide: 2, // slide que inicia (0 index)
directionNav: true, // Navegação por Antes e Depois (ou setas)
controlNav: true, // navegação numerada (ou por pontos)
controlNavThumbs: true, // usar miniaturas na navegação
pauseOnHover: true, // pausar animação no hover
manualAdvance: false, // forçar início manual
prevText: 'Prev', // texto da navegação "anterior"
nextText: 'Next', // texto da navegação "próximo"
randomStart: false, // iniciar por um slide aleatório
beforeChange: function(){}, // função ativada antes da mudança de slide
afterChange: function(){}, // função ativada após mundança de slide
slideshowEnd: function(){}, // função ativada após exibição de todos os slides
lastSlide: function(){}, // função ativada após o último slide
afterLoad: function(){} // função ativada ao carregar os slides
});
});
</script>

Você pode ainda forçar um slide a usar algum efeito de transição através do atributo data-transition dentro da marcação da image, sobrepondo o que estiver no trecho de jQuery acima.

Nesse exemplo, a animação foi definida em fade, mas através de atributos data-transition, os slides 3 e 4 usam data-transition=”slideInLeft”. Foi ainda ajustada para iniciar no slide 2 (no caso, o terceiro, já que o zero conta como o primeiro).

Outros modelos

Para alterar o modelo do slider, basta mudar a classe da div principal de theme-default para theme-bar, theme-dark ou theme-light. Veja os exemplos clicando nos links.

Mais informações em:

É isso aí, instalando o Nivo Slider versão jQuery você tem praticamente o mesmo funcionamento do pago, e ainda se livra de um plugin. Dúvidas?

Author

Fundador do Tutoriart em 2010, é ex-instrutor de Photoshop, design web e gráfico. Em quase uma década de redação online, tem cerca de 1500 artigos publicados. Gerencia também o Memória BIT.

14 Comments

  1. Muito bom o artigo.Tudo que estou precisando. Quero alterar o modelo do slider para “theme-dark”, só que não sei onde mudar a classe da div principal, como você orienta. Onde fica essa div principal? Obrigada.

    • Obrigado. O código da div com o tema escuro, por exemplo, é esse:

      <div class="slider-wrapper theme-dark">
      <div id="slider" class="nivoSlider">
      <img src="http://server.com/images/toystory.jpg" title="#legenda1" />
      <img src="http://server.com/images/up.jpg" title="#legenda2" />
      <img src="http://server.com/images/walle.jpg" title="#legenda3" data-transition="slideInLeft" />
      <img src="http://server.com/images/nemo.jpg" title="#legenda4" data-transition="slideInLeft" />
      </div>
      • Ok Daniel. Mas agora, lendo seu artigo com calma, entendi que essa opção de tema dark é disponível para blog com wordpress. Para colocar em site(HTML), que é o meu caso, e que baixei o Nivo slider free, tenho como alterar o estilo padrão do slider para o dark? Quero fazer isso como uma forma de dar uma estilizada. Obrigada.

        • Não deve fazer diferença se é com WordPress ou site normal em HTML. Se você instalou tudo certo, indicou os caminhos de folhas de estilo e tudo mais, os temas se aplicam do mesmo jeito.

        • Olá Daniel. Seguindo sua observação se os arquivos estão no lugar certo, resolvi colocar a seguir parte em que defino o nivoslider no HTML, pois não consigo o efeito de tema dark. Na verdade, só tem 2 arquivos .css: nivo.slider.css(que está dentro da pasta nivo-slider descompactada) e o style.css(que está dentro da pasta Demo). Não tem a classe “slider-wrapper theme-dark” nem na css nivo.slider.css nem na style.css??? Desculpe quantidade de recortes, mas esse detalhe está emperrando concluir a Home. Obrigada.

          vocenaweb

          $(window).load(function() {
          $(‘#slider’).nivoSlider({effect: ‘fade’, pauseTime: 5000,
          });
          });

          …….
          Na …

          ……….
          Na style.css (dentro da pasta demo):
          /*============================*/
          /*=== Custom Slider Styles ===*/
          /*============================*/
          #slider-wrapper {
          background:url(images/slider.png) no-repeat;
          width:998px;
          height:392px;
          margin:0 auto;
          padding-top:74px;
          margin-top:50px;
          }

  2. Como faço pra usar isso para mostrar meus post recentes, puxando a imagem do próprio post?

    • DanielLemes Reply

      Tem que adaptar um desses códigos que pega posts recentes (tipo esse do exemplo abaixo) pra chamar as imagens, que ali é a the_post_thumbnail. Aí troque o lugar das imagens…

      …pelo código, algo como:

      query(‘showposts=5’);

      while ($osposts->have_posts()) : $osposts->the_post(); ?>
      <a href="”>

      Não testei, mas é por aí.

  3. Ola Daniel, tudo bem?
    Obrigada pelo tutorial, me ajudou muito. só tenho uma dúvida: como eu faço para tirar as bolinhas da base das imagens?
    Att,
    Amanda

    • Oi Amanda, tudo bem! Dá pra esconder os marcadores usando isso nos estilos:

      .nivo-controlNav {
      left: -9999px;
      position: absolute;
      }
  4. Não constumo muito comentar , mas eu preciso agradecer o tutorial , no site do nivo tem , só que com o seu eu achei mais facil de fazer, enfim , Obrigado!

  5. Muito bom esse artigo Daniel , mais me tire uma duvida tem como colocar link nas imagens? Se tem, como faço isso,?

    • Obrigado, Ricardo. Não testei, mas provavelmente é só envolver cada imagem com seu link, assim:

      <a href="seu-link"><img src="url" data-thumb="url" alt="" title="#legenda1" /></a>
      

      …e assim por diante.

Write A Comment

Pin