Em: JQuery
(7) comentários
Carrossel de imagens com jCarousel Lite
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
