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.
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 =)
que bom que deu certo antes mesmo de eu poder te responder 😉
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!
Como faço para alterar a velocidade de troca de imagens? Para não alternar as imagens tão rápido.
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.