JQuery

Inscreva-se em nosso canal no Youtube Daviwp

Carrossel de imagens com jCarousel Lite

08/05/2011 JQuery (9) comentários

entrando com mais uma vídeo aula de AJAX, desta vez para criar um carrossel de imagens com jQuery utilizando o plugin jCareousel Lite.

Vimos aqui como estruturar, estilizar e aplicar o carrossel mais utilizado na web, porem dando contexto para que vocês consigam usufruir do plugin com todos seus efeitos!

Style

<style type="text/css">
	#carosel{width:556px;}
	#carosel img{width:150px; padding:5px; border:1px solid #ccc; margin:0 5px;}
	.prev{float:left; width:20px; height:102px; border:0; background:#069 url(scripts/anterior.jpg) no-repeat;}
	.next{float:right; width:20px; height:102px; border:0; background:#069 url(scripts/proximo.jpg) no-repeat;}
	</style>

Script

<script type="text/javascript" src="scripts/jquery.js"></script>
<script type="text/javascript" src="scripts/jcarousel.js"></script>
<script type="text/javascript">
$(function(){
   $(".carosel").jCarouselLite({
     btnNext: ".next",
     btnPrev: ".prev",
     visible: 3,
     auto: 5000,
     speed: 2000
   })
})
</script>

Script

<div id="carosel">
<button></button>
<button></button>
 <div>
 <ul>
 <li><img src="images/01.jpg" alt="" /></li>
 <li><img src="images/02.jpg" alt="" /></li>
 <li><img src="images/03.jpg" alt="" /></li>
 <li><img src="images/04.jpg" alt="" /></li>
 <li><img src="images/05.jpg" alt="" /></li>
 </ul>
 </div><!--carosel calsse-->
</div><!-- carosel div-->

Autor: Robson Upinside

daviwp

Meu nome é Davi Alves desenvolvedor web e WordPress developer, residente de Belo Horizonte, sou um dos organizadores do WordCamp evento oficial do WordPress em BH e co-fundador do Belo Horizonte WordPress Group juntamente com o fundador Mateus Neves, sou articulista de alguns sites, e fundador do daviwp.com, aqui compartilho conhecimentos para toda galera aficionada em WordPress.