Plugins do jQuery – jCarrousel

Olá pessoal vou iniciar aqui uma série de artigos sobre alguns plugins que eu uso e recomendo, o primeiro é o jCarrousel

Vantagens

Este plugin permite que você possa exibir imagens, textos e links dentro de um “slide” que pode ficar passando para os lados ou usando outro plugin fazer alguns efeitos.

Botões de próximo e anterior, para passar o slides

Outra vantagem é a manipulação simples do CSS, com ele você pode editar muita coisa que vai deste o tamanho a posição dos botões.

Desvantagens

Vejo neste plugin apenas dois probleminhas que com alguns plugins passei dificuldade em ter compatibilidade e neste plugin não há o efeito de fade, que em algusn sites fica bem melhor do que “escorregar”.

Este plugin não tem a paginação automática, uma lista de quantidade de itens abaixo do slide, onde você clicar e é levado ao slide.

Mão a massa

Download Demosntração

Agora vou mostra como é fácil usar e configurar este plugin, vamos começar com o HTML que será nosso slide, vou fazer algo simples apenas como demonstração, veja:

<ul id="carousel" class="estilo-carousel">
    <li>Slide um</li>
    <li>Slide dois</li>
    <li>Slide três</li>
</ul>

Note que com este plugin dentro de cada “LI” você pode colocar imagens , textos e links

Agora baixe o plugin juntamente com o jQuery e depois chame-os na sua página, atenção na ordem pois em javascript isso influencia e muito.

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

E depois chamamos a função que vai fazer 50% da mágica:

<script type="text/javascript">
    $(function(){
        $("#carousel").jcarousel();
    });
</script>

Agora ao CSS que faz os outros 50%, eu defini que meu slide terá uma largura de 400px e de altura 200px

.estilo-carousel .jcarousel-direction-rtl{direction:rtl;}
.estilo-carousel .jcarousel-container-horizontal{width:400px;}
.estilo-carousel .jcarousel-container-vertical{height:938px;}
.estilo-carousel .jcarousel-item{width:400px;height:200px;}
.estilo-carousel .jcarousel-item-horizontal{margin-left:0;margin-right:10px;}
.estilo-carousel .jcarousel-direction-rtl .jcarousel-item-horizontal{margin-left:10px;margin-right:0;}
.estilo-carousel .jcarousel-item-vertical{margin-bottom:10px;}
.estilo-carousel .jcarousel-item-placeholder{background:#fff;color:#000;}
.estilo-carousel .jcarousel-next-horizontal{position:absolute;top:50px;right:0;width:30px;height:100px;cursor:pointer;}
.estilo-carousel .jcarousel-prev-horizontal{position:absolute;top:50px;width:30px;height:100px;cursor:pointer;}
.estilo-carousel .jcarousel-clip-horizontal,
.estilo-carousel .jcarousel-clip-vertical{width:400px;height:200px;}

Aqui uma versão otimizada, note que eu defino o tamanho do slide é no CSS, veja no exemplo abaixo como ficou, como disse é uma versão de testes simples, você pode abusar de sua ciatividade e modifica-lo como quiser.

Download Demosntração

Parâmetros

Que tal darmos uma incrementada com os parâmetros, existem pluguins que nos fornecem alguma ajuda na hora de montar o seu resultado final, neste por exemplo podemos definir a quantidade de itens, por hora ou falar dos mais básicos você pode conferir mais atributos aqui veja os que mais uso:

Propiedade	O que faz?
scroll	Quantidade de itens no seu slide
animation	Este atributo é passado “fast” ou “slow” para o tempo da animação
auto	Se vai começar os slides sozinhos ou não
wrap	Este atributo define se será um loop ou não suas opção são: first”, “last”, “both” ou “circular”
buttonNextEvent	Este atributo define como será a ação para o próximo slide se é “click”, “hover”, etc…
buttonPrevEvent	Este atributo define como será a ação para o slide anteioror é “click”, “hover”, etc…

Outra Saída

Com base em um plugin algumas pessoas desenvolvem outro melhorando e incrementando, vejam este por exemplo, aqui o cara consegue trabalhar outros efeitos como o fade, mas tome cuidado pois alguns atributos e estilos são bem diferentes, este tem a vantagem deter a paginação automática.

Adriano Meira

Adriano Meira é o criador do blog, trabalha desde 2012 como Webdesigner e hoje formado em design gráfico trabalho para a Brasil na Web e como free-lancer nas áreas de Design para Web (Webdesigner), Design Gráfico, Impressos e criação de marcas.

Comente este artigo você também!

Nome:

Email:

Site:

Mensagem:

BBCode

Comentários (9)

Everton Fontes disse:

04/07/2012 às 20:17

Adriano.. talves você consiga me ajudar..
É o seguinte meu projeto está pronto mas o carrousel não tem o desempenho que queria no chrome.. apenas no chrome que ele faz isso.. você saberia me iluminar sobre essa imcompatibilidade?
Adriano Meira disse:

09/07/2012 às 21:24

Olá Everton desculpa demora, cara me mostre ai o seu código ou me de um link para eu ver melhor e te ajudar. Até mais
Paulo disse:

16/08/2012 às 18:16

Cara e como eu faço para poder fazer a lista de imagens “circular”?
Adriano Meira disse:

17/08/2012 às 18:09

Olá Paulo

Se entendi bem você deseja que o carousel volte na primeira imagem em “loop”, ou seja passa a primeira, segunda, terceira e volta para a primeira imagem sem passar pela terceira e segunda, isso mesmo? Se for assim não tem como este plugin não permite este tipo de efeito veja na documentação oficial.

Tente este aqui ele é bem legal e tem essa função que citei.

Até mais
Juliana disse:

20/08/2013 às 12:07

Oi Adriano, será que pode me ajudar?
Eu gostaria de saber como faço para editar a paginação dos slides… Eu consegui colocar a paginação mas queria que ao invés de números fossem bolinhas que mudam de cor conforme a posição de cada slide, como o hover de um menu, sabe? Como faço?
Adriano Meira disse:

21/08/2013 às 19:39

Olá Juliana

Opa bem simples, aqui vou colocar um código de CSS que uso para meus exemplos, mas se ficar difícil me mostre um link ou coloque na resposta aqui (o html) como e gerado a paginação, no código estou comentando cada etapa.

/* Estilo como se fosse UL, remove as bolinhas e margens da lista*/ .paginacao{ margin:0; padding:0; list-style:none; width:100%; height:30px; } /* Coloca todas as LI´s em linha e no centro */ .paginacao li{display:inline-block; margin:0 5px;}
/* Transforma os links e bolinhas*/ .paginacao a{ display:block; width:30px; height:30px; text-indent:-9999em; /* Coloca o texto para longe da bolinha */ background:#CCC; border-radius:50%; /*Faz ela ficar redonda*/ } /* Ao passar o mouse muda de cor */ .paginacao a.active, .paginacao a.atual{background:#F00}

Qualquer dúvida poste ai!
Juliana disse:

29/08/2013 às 16:59

Obrigada por me responder! rs Desculpe a demora, eu acabei deixando o site de lado porque eu sou mil e uma utilidades aqui na agência, vou retomar agorinha! Usarei esse código que você me passou e se eu conseguir (ou não rs) eu mando mensagem novamente…
Vicente disse:

04/03/2015 às 14:48

Boa tarde Adriano.
Não sei se ainda está na ativa neste site, mas se puder me ajudar agradeço muito. Ou qualquer outro colega.
Direto ao assunto, construi uma barra de progresso para timer, um timebar, e funciona perfeitamente.
O que preciso é fazer essa simples função em javascript, acionar o parâmetro “bntNext” dentro do plugin jcarousellite, toda vez que a barra “zera”.
tentei algo assim, mas sem sucesso::

//===================== Barra Progresso =====================

function startbar(){

var gett = $(function(){}); // linka a função jquery
var crsl = $(“.peq-carousel”).click({bntNext:”next”}); // especifica o parametro e simula o click

var barr = document.getElementById(‘timeBar’); // linka à barra de progresso na folha html
var maxx = barr.max;
var vall = barr.value;

//———————————

if ( vall = maxx ){
barr.value=0; // zera a barra de progresso
startbar(); // inicia novamente a barra de progresso
crsl; // executa a ação de click par mover o slide no momento em que a barra de progresso zera
}
}
// Fim Barra Progresso
Welliton disse:

24/08/2015 às 17:54

Cara ótimos tutoriais, só percebi um detalhe, no botão demonstração está escrito “Demosntração”. Abç