JCarousel

Trata-se de um plug-in do JQuery para controlar uma lista (ul li) de imagens de forma rotativa, tanto no sentido vertical como no sentido horizontal.

Neste post, irei ilustrar com um exemplo o funcionamento do código, e citar suas diversas variantes. Será abordado apenas as versões estaticas do projeto, mas o ajax pode ser utilizado sempre que necessário pra carregar as imagens dinamicamente.

O Site do projeto (http://sorgalla.com/projects/jcarousel) em inglês, possui muitas informações.

Bem, vamos ao trabalho!

Inicio

Primeiro, temos que baixar o arquivo do Projeto Jcarousel, disponível em duas versões: jcarousel.tar.gz ou  jcarousel.zip

Depois,  temos que linkar as bibliotecas, do JQuery e do JCarrousel, bem como os seus respectivos CSS’s ( do JCarousel e do Skin – apos abordarei esse tema). Logo, colocando os Scripts em uma pasta denominada “js” e os CSS’s em uma pasta chamada “css”, temos:

<script src="js/jquery-1.2.1.pack.js"></script>
<script src="js/jquery.jcarousel.pack.js"></script>
<link rel="stylesheet" href="css/jquery.jcarousel.css"/>
<link rel="stylesheet" href="css/skin.css"/>

Após feito isso, basta criar uma lista simples com as imagens que deseja utilizar, conforme abaixo:

<ul id="mycarousel" class="jcarousel-skin-nome">
    <li><img src="img/figura1.jpg" alt="" /></li>
    <li><img src="img/figura2.jpg" alt="" /></li>
    <li><img src="img/figura3.jpg" alt="" /></li>
    <li><img src="img/figura4.jpg" alt="" /></li>
    <li><img src="img/figura5.jpg" alt="" /></li>
</ul>

Para configurar o Carosel, usaremos o seguinte Script, dentro da tag <header> da pagina:

<script type="text/javascript">
    jQuery(document).ready(function() {
        jQuery('#mycarousel').jcarousel();
    });
</script>

Desta forma, temos um carosel simples, horizontal e com 3 imagens por vez.
Confira o exemplo!

O JCarousel funciona perfeitamente seguintes navegadores:

• IE6+, Firefox 1.5+ (PC/Mac/Linux);
• Opera 9, Safari 2 (Mac);
• Safari 3 (Pc);
• Konqueror 3.4 (Linux).

Lembrando que caso o JavaScript esteja desativado (lenda) o conteúdo não se perde.

Breve veremos como configurar as opções avançadas do Carosel.

Até lá!   ^^

Créditos (Gênios):

Livraria JQuery: John Resig
Livraria JCarousel: Bill Scott