jQuery – Utilizando plugin jCarousel do jQuery
Neste artigo demonstrarei o uso do jCarousel para criar um carossel ou slider de imagens ou informações. Necessitaremos do jQuery e do jCarousel para criarmos este efeito em nossa aplicação.
Primeiro criaremos nossa home page o qual chamarei de index.html.
<!DOCTYPE html P UBLIC “-//W3C//DT D XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>Uso do jCarousel</title>
</head>
<body>
<div>
<ul id=”chorizontal”>
<li>ITEM 01</li>
<li>ITEM 02</li>
<li>ITEM 03</li>
<li>ITEM 04</li>
<li>ITEM 05</li>
<li>ITEM 06</li>
<li>ITEM 07</li>
<li>ITEM 08</li>
<li>ITEM 09</li>
<li>ITEM 10</li>
</ul>
</div>
</body>
</html>
Após criado nossa home page, na seção head adicionaremos as tags de script para adicionar uma referencia ao jQuery e adicionar uma referencia ao jCarousel.
<script type=”text/javascript” src=”jquery-1.4.3.min.js”></script>
<script type=”text/javascript” src=”jcarousel/lib/jquery.jcarousel.js”></script>
Além desta referencia, criaremos uma referencia ao css que enfeitara nossa aplicação, também a incluindo na seção head.
<link href=”jcarousel/skins/ie7/skin.css” rel=”stylesheet” type=”text/css” />
O css que vai estar neste documento é o seguinte.
.jcarousel-skin-ie7 .jcarousel-container {
-moz-border-radius: 10px;
background: #D4D0C8;
border: 1px solid #808080;
}
.jcarousel-skin-ie7 .jcarousel-direction-rtl {
direction: rtl;
}
.jcarousel-skin-ie7 .jcarousel-container-horizontal {
width: 245px;
padding: 20px 40px;
}
.jcarousel-skin-ie7 .jcarousel-container-vertical {
width: 75px;
height: 245px;
padding: 40px 20px;
}
.jcarousel-skin-ie7 .jcarousel-clip-horizontal {
width: 245px;
height: 77px;
}
.jcarousel-skin-ie7 .jcarousel-clip-vertical {
width: 77px;
height: 245px;
}
.jcarousel-skin-ie7 .jcarousel-item {
width: 75px;
height: 75px;
border: 1px solid #fff;
}
.jcarousel-skin-ie7 .jcarousel-item:hover {
border-color: #808080;
}
.jcarousel-skin-ie7 .jcarousel-item-horizontal {
margin-left: 0;
margin-right: 7px;
}
.jcarousel-skin-ie7 .jcarousel-direction-rtl .jcarousel-item-horizontal {
margin-left: 7px;
margin-right: 0;
}
.jcarousel-skin-ie7 .jcarousel-item-vertical {
margin-bottom: 7px;
}
.jcarousel-skin-ie7 .jcarousel-item-placeholder {
}
/**
* Horizontal Buttons
*/
.jcarousel-skin-ie7 .jcarousel-next-horizontal {
position: absolute;
top: 43px;
right: 5px;
width: 32px;
height: 32px;
cursor: pointer;
background: transparent url(next-horizontal.gif) no-repeat 0 0;
}
.jcarousel-skin-ie7 .jcarousel-direction-rtl .jcarousel-next-horizontal {
left: 5px;
right: auto;
background-image: url(prev-horizontal.gif);
}
.jcarousel-skin-ie7 .jcarousel-next-horizontal:hover {
background-position: -32px 0;
}
.jcarousel-skin-ie7 .jcarousel-next-horizontal:active {
background-position: -64px 0;
}
.jcarousel-skin-ie7 .jcarousel-next-disabled-horizontal,
.jcarousel-skin-ie7 .jcarousel-next-disabled-horizontal:hover,
.jcarousel-skin-ie7 .jcarousel-next-disabled-horizontal:active {
cursor: default;
background-position: -96px 0;
}
.jcarousel-skin-ie7 .jcarousel-prev-horizontal {
position: absolute;
top: 43px;
left: 5px;
width: 32px;
height: 32px;
cursor: pointer;
background: transparent url(prev-horizontal.gif) no-repeat 0 0;
}
.jcarousel-skin-ie7 .jcarousel-direction-rtl .jcarousel-prev-horizontal {
left: auto;
right: 5px;
background-image: url(next-horizontal.gif);
}
.jcarousel-skin-ie7 .jcarousel-prev-horizontal:hover {
background-position: -32px 0;
}
.jcarousel-skin-ie7 .jcarousel-prev-horizontal:active {
background-position: -64px 0;
}
.jcarousel-skin-ie7 .jcarousel-prev-disabled-horizontal,
.jcarousel-skin-ie7 .jcarousel-prev-disabled-horizontal:hover,
.jcarousel-skin-ie7 .jcarousel-prev-disabled-horizontal:active {
cursor: default;
background-position: -96px 0;
}
As imagens podem ser obtidas no seguinte endereço:
http://www.icefusion.com.br/imagens/posts/jQuery/jCarousel/prev-horizontal.gif
http://www.icefusion.com.br/imagens/posts/jQuery/jCarousel/next-horizontal.gif
http://www.icefusion.com.br/imagens/posts/jQuery/jCarousel/loading.gif
http://www.icefusion.com.br/imagens/posts/jQuery/jCarousel/loading-small.gif
http://www.icefusion.com.br/imagens/posts/jQuery/jCarousel/loading_small.gif
O script para que o jCarousel possa funcionar, vai ser o seguinte.
<script type=”text/javascript”>
$(document).ready(function(){
$(‘#chorizontal’).jcarousel({
scroll:1,
animation:1800
});
});
</script>
Além disso, peguei um problema nos navegadores google chrome e safari o qual o jCarousel não funcionava. porém realizei o seguinte procedimento. Acessei o arquivo jquery.jcarousel.js e na linha 191 comentei o seguinte bloco de comandos.
/*if ($.browser.safari) {
this.buttons(false, false);
$(window).bind(‘load’, function() { self.setup(); });
} else */
Após isso a minha aplicação rodou normalmente.