No post anterior, mostrei como colocar o Unslider no seu blogspot. Nesse post, mostrarei como configurar outro slider: o BxSlider. A vantagem de colocar o BxSlider é que ele tem um número muito grande de configurações, por isso é muito mais versátil.

Uma desvantagem do BxSlider é que ele não vem por padrão com a navegação dos slides pelo teclado, mas isso pode ser implementado.

O primeiro passo para incluir o BxSlider é adicionando o CSS no seu modelo. Para isso, vá na configuração de modelo, Personalizar, Avançado, Adicionar CSS e inclua o conteúdo do CSS do BxSlider. Esse arquivo de estilos foi modificado do original para pegar as imagens de uma url externa.

Teremos que incluir os JavaScript. Para isso, você deve acessar o layout do seu site e incluir um gadget do tipo "HTML/JavaScript". Nesse gadget, você deve incluir o seguinte código:

 <script src="//code.jquery.com/jquery-latest.min.js"></script>  
 <script src="https://googledrive.com/host/0Bz60gXzIeiEqUHdFVHhtSWdUWTQ"></script>  

Agora, o seu blog está pronto para receber o BxSlider. Crie um post, insira as imagens que você quer que fiquem no slider em sequência. Depois que inserir as imagens, mude o modo de edição para HTML. Só vai funcionar se você inserir os códigos no modo HTML.

Identifique o bloco de imagens que você acabou de inserir. Antes do início do bloco, você deve inserir uma div com um identificador para o slider. No nosso exemplo, usaremos o id "testeBxSlider".

 <div id="testeBxSlider">  

No fim do bloco, você deve encerrar a div inserindo o código abaixo:

 </div>  

Agora, no final do arquivo, insira o seguinte código para ativar o slider, substituindo o testeBxSlider pelo identificador que você colocou na sua div.

Cuide para que esse identificador seja único pois se você usar o mesmo identificador, pode dar problema caso mais de um post com o mesmo identificador seja exibido na mesma página.

 <script type="text/javascript">  
 $(document).ready(function(){  
   var container = $("#testeBxSlider");  
   /* Prepara as imagens para serem exibidas no slider */  
   while(container.find("div.separator img").length > 0) {  
     container.find("div.separator img").unwrap();  
   }  
   container.find("div.separator").remove();  
   container.find("img").wrap("<div class='bximg' />");  
   container.children().not("div.bximg").remove();  
   container.find("img").css({"margin-left":"auto", "margin-right":"auto", "display":"block"}); // Centraliza imagem  
   container.bxSlider({  
     slideSelector: "div.bximg"  
   });  
 });  
 </script>  

Pronto. Seu Slider está funcionando. Note que, nesse último trecho de código, você pode configurar as opções do BxSlider no momento da chamada de "container.bxSlider". Também tem um trecho para centralizar as imagens. Se você não quer suas imagens centralizadas, pode remover essa linha. Abaixo, um exemplo do uso desse slider.

Leia Mais