Criando um slideshow carrossel com Jquery

Nesse tutorial trabalharemos passo-a-passo na criação de um slideshow do tipo Carrossel, utilizando jQuery.

O primeiro passo é criar a marcação HTML. Não é necessário, mas pode ser interessante trabalhar para que as imagens sejam links – para outras páginas ou para si próprias, em tamanho original. Por isso será criada uma lista, em que cada item receberá uma imagem e essa imagem será um link, como no código abaixo:

<div id="carrossel">
<div id="slides">
<ul>
	<li><a href="#"><img alt="Img 1" src="images/im_01.jpg" /></a></li>
	<li><a href="#"><img alt="Img 2" src="images/im_02.jpg" /></a></li>
	<li><a href="#"><img alt="Img 3" src="images/im_03.jpg" /></a></li>
</ul>
</div>
<div id="buttons"><a id="prev" href="#">prev</a>
<a id="next" href="#">next</a></div>
</div>

O próximo será trabalhar o CSS. Note que não há nada de “especial”. Estou trabalhando o id dos elementos, estilizando o tamanho das imagens e posições, e alterando o estilo da lista, removendo os marcadores que são padrão para esse tipo de elemento e determinando uma largura (que deve ser igual ao tamanho de uma imagem multiplicado pela quantidade de imagens). A posição setada com left:0 e top:0 fará com que as imagens de posicionem umas acima das outras.

#carousel {
width:255px;
height:290px;
margin:0 auto;
}

#slides {
overflow:hidden;
position:relative;
width:250px;
height:250px;
border:1px solid #ccc;
}

#slides ul {
position:relative;
left:0;
top:0;
list-style:none;
margin:0;
padding:0;
width:750px;
}

#slides li {
width:250px;
height:250px;
float:left;
}

#slides li img {
padding:5px;
width: 240px;
height: 240px;
opacity: 0.8;
}

#slides li img:hover {
padding:5px;
width: 240px;
height: 240px;
opacity: 1;
}

Agora trabalharemos o Jquery. Certifique-se que você tenha inserido o link para a biblioteca iQuery previamente em sua página (se não sabe como faze-lo, dê uma olhada na série Introdução a jQuery).

$(document).ready(function() {

//Velocidade da rotação e contador
var speed = 5000;
var run = setInterval('rotate()', speed);

//Pega o valor da largura e calcular o valor da posição da esquerda
var item_width = $('#slides li').outerWidth();
var left_value = item_width * (-1);

//Coloca o último item antes do primeiro item, caso o usuário clique no botão de ANTERIOR
$('#slides li:first').before($('#slides li:last'));

//Coloca o item atual na posição correta
$('#slides ul').css({'left' : left_value});

//Se o usuário clica no botão ANTERIOR
$('#prev').click(function() {

//Pega a posição da direita
var left_indent = parseInt($('#slides ul').css('left')) + item_width;

//Move o item
$('#slides ul').animate({'left' : left_indent}, 200,function(){

//Move o último item e o coloca como o primeiro
$('#slides li:first').before($('#slides li:last'));

//Coloca o item atual na posição correta
$('#slides ul').css({'left' : left_value});

});

//Cancela o comportamento do click
return false;

});

//Se o usuário clica no botão PROXIMO
$('#next').click(function() {

//Pega a posição da direita
var left_indent = parseInt($('#slides ul').css('left')) - item_width;

//Move o item
$('#slides ul').animate({'left' : left_indent}, 200, function () {

//Move o último item e o coloca como o primeiro
$('#slides li:last').after($('#slides li:first'));

//Coloca o item atual na posição correta
$('#slides ul').css({'left' : left_value});

});

//Cancela o comportamento do click
return false;

});

//Se o usuário está com o mouse sob a imagem, para a rotacao, caso contrário, continua
$('#slides').hover(

function() {
clearInterval(run);
},
function() {
run = setInterval('rotate()', speed);
}
);

});

//O temporatizador chamará essa função e a rotação será feita
function rotate() {
$('#next').click();
}

Agora é só salvar e rodar a página no seu navegador. O resultado é algo como a imagem abaixo:

Para baixar os arquivos desse tutorial, clique aqui.

// Comente!

comentários

eufacoprogramas

Olá, eu sou a Gabi e eu criei o "Eu Faço Programas" em 2011, quando ainda trabalhava em desenvolvimento web. Atualmente meu trabalho é focado em estratégia digital e redes sociais. Quer saber mais? www.imgabi.com

5 Comentários

  • Responder fevereiro 7, 2012

    Evelyn Jacovani

    Eu preciso fazer um caroussel, mas no lugar das imagens preciso usar divs, pq haverá imagens e textos.
    Esse exemplo tbm funciona com divs no lugar da imagem?

    Obrigada e parabéns pelo blog =)

    • Responder fevereiro 7, 2012

      admin_pr

      que bom que deu certo antes mesmo de eu poder te responder 😉

    • Responder novembro 9, 2012

      Clébio

      Olá Evelyn, você conseguiu fazer com divs? Se sim, pode me passar o link de onde encontrou essa informação, estou precisando fazer o mesmo.
      Obrigado!

  • Responder fevereiro 27, 2014

    João Vitor

    Como faço para alterar a velocidade de troca de imagens? Para não alternar as imagens tão rápido.

  • Responder março 10, 2016

    Oseias Freitas

    Ola pessoal! Eu queria saber se e posivel usar no lugar de imagens usar as próprias páginas em estado atual ou pelomenos videos,
    E se e posivel alterar a posição do carrossel, coloca-lo de lado por exemplo. Parece meio ambicioso mas acho que seria bem bacana! Desde ja agradeço.

// Siga as boas práticas: Comente!