Salve! mais uma vez aqui para mostrar, mais um pouco do poder do plugin Cycle do jQuery.
Sei que existem ‘plugins especificos’, bem robustos.. porém imagine a situação em que vc tem um slideshow e um carousel no mesmo site. Chamar 2 plugins, um para cada coisa, qndo na verdade, apenas o cycle resolveria.. não parece legal ne?!
Além de que a forma de pensar é diferente. Aqui temos a iniciativa do começar a fazer. Criar o HTML, pensar no CSS necessário.. essa iniciativa faz a diferença.
O efeito que vou criar, é o mesmo do primeiro exemplo deste plugin de carousel. Acredito que vai ajudar a abrir a mente, desmistificando algumas coisas, e entendendo o motivo de outras.
Posso dividir em 4 partes, o HTML que precisamos:
Container
<div id="wrap_carousel">
Engloba o resto, e dá o contexto de posicionamento, que precisamos.
Setas
<img src="left_arrow.jpg" alt="" id="prev" />
e
<img src="right_arrow.jpg" alt="" id="next" />
Voltar e Avançar no carousel. Controles manuais da exibição.
Caixa para overflow
<div id="carousel">
Esta é a segunda parte mais importante do nosso html. Com ela, escondemos as próximas fotos(para conseguirmos o efeito de ‘rolar passando’).
Blocos de Conteúdo
É a parte mais importante do nosso HTML, para esse efeito.
<ul> <li><img src="http://www.egrappler.com/contents/jscarouselv2/demo/images/img_1.jpg" alt="" /></li> <li><img src="http://www.egrappler.com/contents/jscarouselv2/demo/images/img_2.jpg" alt="" /></li> <li><img src="http://www.egrappler.com/contents/jscarouselv2/demo/images/img_3.jpg" alt="" /></li> <li><img src="http://www.egrappler.com/contents/jscarouselv2/demo/images/img_4.jpg" alt="" /></li> <li><img src="http://www.egrappler.com/contents/jscarouselv2/demo/images/img_5.jpg" alt="" /></li> </ul>
Como são exibidas de 5 em 5 imagens, cada bloco de conteudo nosso, possui exatamente essas 5 imagens.
Quando o cycle, fizer a transição, ele irá rolar esse bloco para escondê-lo, e trazer o próximo para ser exibido.
Se quisessemos mostrar de 3 em 3 fotos, cada bloco nosso, deveria ter 3 <li>, com as respectivas imagens. E assim por diante.
Assim como da outra vez, em que fizemos uma galeria de fotos com jQuery, o script é ridículo:
$(document).ready(function(){
$('#carousel').cycle({
fx: 'scrollHorz',
prev: '#prev',
next: '#next'
});
});
Código completo com o css:
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script type="text/javascript" src="http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.latest.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#carousel').cycle({
fx: 'scrollHorz',
prev: '#prev',
next: '#next'
});
});
</script>
<style type="text/css">
* { margin: 0; padding: 0; list-style: none; }
body {
background-color: #2F2F2F;
padding: 40px;
}
#wrap_carousel {
background-color: #121212;
border: 1px solid #7A7677;
width:700px;
height: 95px;
padding: 13px 30px;
position: relative;
}
#carousel li img {
border: 1px solid #7A7677;
width: 100%;
}
#carousel li {
float: left;
overflow: hidden;
width: 120px;
height: 95px;
margin: 0 10px;
display: inline;
}
#prev,
#next {
position: absolute;
top: 10px;
cursor: pointer;
}
#prev {
left: 10px;
}
#next {
right: 10px;
}
</style>
</head>
<body>
<div id="wrap_carousel">
<img src="left_arrow.jpg" alt="" id="prev" />
<div id="carousel">
<ul>
<li><img src="http://www.egrappler.com/contents/jscarouselv2/demo/images/img_1.jpg" alt="" /></li>
<li><img src="http://www.egrappler.com/contents/jscarouselv2/demo/images/img_2.jpg" alt="" /></li>
<li><img src="http://www.egrappler.com/contents/jscarouselv2/demo/images/img_3.jpg" alt="" /></li>
<li><img src="http://www.egrappler.com/contents/jscarouselv2/demo/images/img_4.jpg" alt="" /></li>
<li><img src="http://www.egrappler.com/contents/jscarouselv2/demo/images/img_5.jpg" alt="" /></li>
</ul>
<ul>
<li><img src="http://www.egrappler.com/contents/jscarouselv2/demo/images/img_6.jpg" alt="" /></li>
<li><img src="http://www.egrappler.com/contents/jscarouselv2/demo/images/img_7.jpg" alt="" /></li>
<li><img src="http://www.egrappler.com/contents/jscarouselv2/demo/images/img_8.jpg" alt="" /></li>
<li><img src="http://www.egrappler.com/contents/jscarouselv2/demo/images/img_9.jpg" alt="" /></li>
<li><img src="http://www.egrappler.com/contents/jscarouselv2/demo/images/img_10.jpg" alt="" /></li>
</ul>
<ul>
<li><img src="http://www.egrappler.com/contents/jscarouselv2/demo/images/img_11.jpg" alt="" /></li>
<li><img src="http://www.egrappler.com/contents/jscarouselv2/demo/images/img_12.jpg" alt="" /></li>
<li><img src="http://www.egrappler.com/contents/jscarouselv2/demo/images/img_13.jpg" alt="" /></li>
<li><img src="http://www.egrappler.com/contents/jscarouselv2/demo/images/img_14.jpg" alt="" /></li>
<li><img src="http://www.egrappler.com/contents/jscarouselv2/demo/images/img_15.jpg" alt="" /></li>
</ul>
</div>
<img src="right_arrow.jpg" alt="" id="next" />
</div>
</body>
</html>