JQUERY CAROUSEL

Este é um breve tutorial sobre o Jquery Carousel, utilizados para passar imagens e banner.

Primeiramente baixe o arquivo jquery em:

http://jquery.com/

Clicando no ícone conforme mostra a imagem abaixo: 

Em seguida baixe o jquery carousel lite no seguinte link:

http://www.gmarwaha.com/jquery/jcarousellite/

Este side possui varias demonstrações, ou seja diversos tipos, escolha aquele adequado ao seu gosto.

Após baixar estes documentos e colocar no seu diretório, vá para seu código fonte, e entre as tags <head>  </head> coloque o seguinte código:

    $(function(){        
          $(".carousel").jCarouselLite({
                btnPrev : '.prev',
                btnNext : '.next',
                auto    : 6000,
                speed   : 500,
                visible : 7,                                
          })
    })

Na qual:

-  “.carousel” é o nome da sua classe ou div.

- .Next e .prev são os botões de ação.

- Auto siginifica que as imagens irão passar automaticamente no tempo de 6 segundos, caso você não queira automático basta retirar esta parte do código.

- Speed é a velocidade de transição das imagens, deixe suave entre 500 e 2000.

- Visible é a quantidade de imagens que você deseja exibir.

Também é possível atribuir outras funções, como por exemplo o posicionamento de transição das imagens, ou seja Vertical ou Horizontal, vai de acordo com o desejo da pessoa.

As demais configurações são feitas em seu CSS, ou seja, o tamanho das imagens, o tamanho do carrousel, o local dos botões, etc.

Bons estudos.