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.

  • Always a good job right here. Keep rolling on trhuogh.

  • Cara, muito boa sua explicação. Tenho estudado muito jQuery e aprendi umas coisas legais aí. Parabéns!

    • Davi

      Obrigado Afrânio volte sempre brother!

  • Davi,
    Se eu qusier usar esse carrossel com o slider por exemplo eu teria apenas que incluir o easing: “easeinout”? Estou fazendo modificações aqui de acordo com as demos e não está dando certo. Será que é mais complexo do que imagino?

    • Davi

      utiliza assim
      $(“.aqui sua div principal .aqui sua segunda div”).jCarouselLite({
      btnNext: “.imageSlider .next”,
      btnPrev: “.imageSlider .prev”,
      visible: 1,
      speed: 500,
      easing: “easeinout”
      });

  • Coloquei o visible: 1 e ficou como eu queria, só não entendi o easing: “easeinout”

    • Davi

      Afrânio é mais uma flixibilidade mesmo no efeito ele estabiliza mais a transação

  • daviwp

    Olá Augusto,

    não entendi direito mas acho que esse script não faz isso.

  • daviwp

    Olá Matheus,

    Obrigado! volte sempre.