JQuery Carousel II

A algum tempo fiz uma postagem sobre o JQuery Carousel, no entanto ele utilizava de botões de ação(next e prev), dessa vez vou ensina-los a fazer um Jquery Carousel automático e com botões diferenciados. Vamos lá?

Primeiro não vamos precisar baixar o jquery, vamos utilizar o link direto da API do Google, então dentro da sua tag Header coloque o seguinte comando:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>

<script type="text/javascript" src="http://malsup.github.com/jquery.cycle.all.js"></script>

<script type="text/javascript" src="js/js.js"></script>

Na qual o primeiro script puxa o link do api do Google, o segundo script puxa o link do script do carousel, e o terceiro é a configuração que você irá escolher para o seu efeito carousel, lembre-se de criar o seu arquivo script, ou então coloque-a dentro da tag head.

O efeito que escolhi para o exemplo foi o “fead”, porem existem outros disponíveis no site, então vejamos como ficou o comando:

// JavaScript Document
$(document).ready(function() {
 $("#slideshow ul#slide").cycle({
  fx : 'fade',
  speed : 2000,
  timeout : 5000,
  pager : '#nav',  
  pagerAnchorBuilder : function(idx, slide) {
   return '#nav li:eq(' + (idx) + ') a';
  }
  
    });
});

Vamos entender um pouco desse código:

Primeira observação o selector #slideshow é o nome da div onde irá rodar o efeito de transição de slides, ul#slide é o nome recebido pela lista não ordenada. fx : 'fade' é o nome do efeito que escolhi para utilizar,  speed : 2000, é a velocidade da transição de slides, timeout : 5000, é tempo em que um slide ficara disponível para leitura, pager : '#nav', é o nome dado a ul de lista não ordenada dos botões de links. pagerAnchorBuilder , é uma função para poder navegar entre os slides independente da ordem.

Agora na pagina onde você deseja que fique a sua transição de slides coloque os seguintes comandos:

<div id="slideshow"><!--Inicia a Transição de Slides !-->

<ul id="nav">

                    <li id="link-1"><a href="#" title="index1"></a></li>

                    <li id="link-2" ><a href="#" title="index2"></a></li>

                    <li id="link-3" ><a href="#" title="index3"></a></li>        

            </ul>        

            <ul id="slide">

<li class="portfolio"><img src="img01"/></li>

                    <li class="blog"><img src="img02" /></li>

                    <li class="noticia"><img src="img03" /></li>

            </ul>

</div><!--Termina a Transição de Slides!-->     

Preserve o nomes de id tanto o da div quanto as de ul, caso faça opção por mudar as de li para facilitar a identificação de cada conteúdo que você criou, tenha bastante cuidado, pois estes nomes são importantes para a definição da folha de estilos, conforme mostra o exemplo abaixo.

CSS

#slideshow{width:690px; height:200px; margin-top:18px; margin-left:5px; margin-bottom:5px;}

Acima temos um exemplo de como eu fiz o estilo da minha div #Slideshow, você claro, irá configurar de acordo com a sua necessidade, de tamanho, background, margens, etc.

Abaixo tempos novamente o significado dos nomes das li, no meu caso cada uma identifica uma imagem diferente da minha transição de slides.

.portfolio{background:url('img01') no-repeat;}

.blog{background:url('img02') no-repeat;}

.noticia{background:url('img03') no-repeat;}

Conforme mostra o comentário abaixo, a ul e nav controlam os botões de ação.Vc pode criar seus próprios botões e com efeito sprite, como estes que eu fiz como mostra a imagem abaixo, e é neste botões que se baseiam o restante do css abaixo.

/*format ul nav controla os bullets e os efeitos sprites*/

#nav{float:left; width:122px; height:18px; margin-left:620px; margin-top:184px;
position:relative; z-index:10;}

#nav li{float:left; width:18px; height:15px; background:url('images/bullets.png') no-repeat;
margin-left:5px; cursor:pointer; display:block; overflow:hidden; }



#nav li a{display:block; float:left; height:15px; width:18px;}

#link-1{background-position: -54px 0px !important}         

#link-2{background-position: -27px 0px !important}

#link-3{background-position: -1px 0px !important}



#nav li#link-1.activeSlide{background-position: -54px -17px !important;}

#nav li#link-2.activeSlide{background-position: -27px -17px !important;}

#nav li#link-3.activeSlide{background-position: -1px -17px !important;}

Para ver o exemplo funcionando corretamente, acesse o site:

www.frtavares.com.br

Tente fazer o jquery carousel, no inicio é um pouco desafiador, mas precisamos insistir para pegar o jeito, caso tenha mais duvidas por favor deixe um comentário, assim que puder eu irei responder, espero que tenham gostado e boa sorte!