UpInside Treinamentos

Criando Efeito Carrossel de Imagens com jQuery

Que tal aprender a criar o famoso efeito carousel (carrossel) de imagens utilizando apenas jQuery. E além disso confira um script de automatização do efeito aqui na UpInside Treinamentos!

  • Compartilhe esse post
  • Compartilhar no Facebook00
  • Compartilhar no Google Plus00
  • Compartilhar no Twitter
  • Compartilhar na UpInside

Muito utilizado para aproveitar melhor os espaços na exibição de produtos, artigos ou imagens. O efeito carrossel é uma boa alternativa para circular mais conteúdo no mesmo espaço sem perder estilo.

Mas será que precisamos utilizar Plug-ins para realizar uma tarefa tão simples como esse efeito? Veremos nesta aula que não.

CORREÇÃO: Duarante a aula passei o time da animação entre aspas simples. Você deve passar apenas o valor para alterar efetivamente.

Linha 15 e 22 onde temos '500', passe apenas 500

Caso queira automatizar a exibição fica aqui uma função para te ajudar:

 function automatizar(segundos) {
var back = null;

var auto = setInterval(function () {
if ($('.carrossel').css('margin-left') === '0px') {
ident = '0';
}

if (ident < count && back === null) {
ident++;
$('.carrossel').animate({'margin-left': '-=' + slide + 'px'}, 500);
} else {
if (ident === 1) {
back = null;
} else {
back = true;
}
ident--;
$('.carrossel').animate({'margin-left': '+=' + slide + 'px'}, 500);
}

$('.forth, .back').click(function () {
clearInterval(auto);
});
}, segundos * 1000);
}

Com isso seu efeito inicia com o carrossel rodando automaticamente, e quando o usuário interaja com alguma das ações, o controle e passado para o mesmo parando a automatização. Para utilizar é muito simples:

automatizar(3);

Isto está dizendo para realizar o carrossel automaticamente e alternar as imagens de 3 em 3 segundos.

Caso não tenha visto a aula sobre galeria de produtos. AQUI está o link.

Gostou @AlunoNome? Então deixe seu comentário e não esqueça de compartilhar essa aula.

  • Compartilhe esse post
  • Compartilhar no Facebook00
  • Compartilhar no Google Plus00
  • Compartilhar no Twitter
  • Compartilhar na UpInside

Olá, deixe seu comentário para Criando Efeito Carrossel de Imagens com jQuery

Já temos 15 comentário(s). DEIXE O SEU :)
Andre Luiz

Andre Luiz

me ajudou muito no meu projeto
★★★★★DIA 21.05.17 15h38RESPONDER
Gustavo Web
Enviando Comentário Fechar :/
Henrique Oliveira

Henrique Oliveira

Olá, no momento em que atribuo o if (ident < count) na classe forth ele não funciona, clico e não sai do lugar, eis meu código:

$(function () {
var numImages = 5;
var marginPadding = 30;
var ident = 0;
var count = ($('.carrossel.item').lenght / numImages) - 1;
var slide = (numImages * marginPadding) + ($('.carrossel img').outerWidth() * numImages);

$('.forth').click(function () {
if (ident < count) {
ident++;
$('.carrossel').animate({'margin-left': '-=' + slide + 'px'}, 500);
}
});

$('.back').click(function () {
if (ident
★★★★★DIA 04.10.16 20h07RESPONDER
N/A
Enviando Comentário Fechar :/
Daiane Pereira

Daiane Pereira

Quando adiciono o if na função, a rolagem nao funciona mais, o que poderia ser?
★★★★★DIA 31.10.16 14h45RESPONDER
N/A
Enviando Comentário Fechar :/
Ronaldo Ramos

Ronaldo Ramos

Boa tarde sei que os códigos acima é para galeria de fotos mas tem como vc fazer um para botão de cadastro e outro para login.
★★★★★DIA 13.07.16 16h42RESPONDER
Leandro Santos
Enviando Comentário Fechar :/
Leonardo  Amaral De Brito

Leonardo Amaral De Brito

Excelente tutorial. Já vou utilizar aqui no meu projeto. Mas tenho uma dúvida: como faço para integrar esse efeito ao explicado no exercício da galeria de imagens. Ou seja, quando clicar na foto do carrossel, a imagem selecionada vai ser ampliada acima?
Abraços
★★★★★DIA 30.05.16 19h05RESPONDER
N/A
Enviando Comentário Fechar :/
Diogo Dos Santos

Diogo Dos Santos

parabéns robson assisto todas as suas video aulas e aprendi muita coisa ja estou anos nesse mundo da programação mais sempre tem o que aprender ja ja estarei comprando os outros curso pra não perder nada muito sucesso prati continue sempre assim..
★★★★★DIA 09.05.16 01h41RESPONDER
N/A
Enviando Comentário Fechar :/
Ricardo Nunes

Ricardo Nunes

Boa noite,

Como ficaria a função para deixar o slider em um loop, na ultima imagem ele mostra a primeira imagem?
★★★★★DIA 08.05.16 21h26RESPONDER
N/A
Enviando Comentário Fechar :/
Arlei Ribeiro Dos Santos

Arlei Ribeiro Dos Santos

Muito bom Robson. Show de bola essa vídeo aula.
Consegui fazer e funcionou perfeitamente. E o bom de tudo é que dá pra testar com as outras imagens na ".box_carrossel" e na "var numImages" . :)

Muito bom mesmo....Parabéns!!!
★★★★★DIA 15.03.16 22h10RESPONDER
N/A
Enviando Comentário Fechar :/
Wellington Soares De Aquino

Wellington Soares De Aquino

OI quando peço o valor da variavel 'widht' so Vem a palavra NaN dai o codigo nao mais funciona vc pode me ajudar
★★★★★DIA 05.10.15 13h23RESPONDER
Wellington Soares De Aquino, Robson V. Leite, Bruno Ferreira Matias, Jose Pedro Pinheiro da Silva
Enviando Comentário Fechar :/
Robson V. Leite

Robson V. Leite

widht ou width? Tem diferença :)
★★★★★DIA 06.10.15 16h22RESPONDER
N/A
Enviando Comentário Fechar :/
Daniel  Ribeiro

Daniel Ribeiro

Muito bom Robson!
Uma dúvida, onde exatamente devo utilizar esta chamada da função automatizar() ?
Fiz algumas tentativas mas sem sucesso, poderia passar um exemplo funcional?

Obrigado.
★★★★★DIA 08.09.15 20h13RESPONDER
N/A
Enviando Comentário Fechar :/
Marcos Leão Moreira

Marcos Leão Moreira

Olá Daniel Ribeiro basta inseri dentro da função principal e após chamar automatizar(2); por exemplo, segue abaixo:

$(function(){

var width = (parseInt($('.carrossel .item').outerWidth() + parseInt($('.carrossel .item').css('margin-right')))) * $('.carrossel .item').length;

$('.carrossel').css('width', width);

var numImages = 3;
var MarginPadding = 50;

var ident = 0;
var count = ($('.carrossel .item').length / numImages) -1;
var slide = (numImages * MarginPadding) + ($('.carrossel img').outerWidth() * numImages);

$('.forth').click(function(){
if(ident < count){
ident++;
$('.carrossel').animate({'margin-left': '-=' + slide + 'px'}, 500);
}

});

$('.back').click(function(){
if(ident >= 1){
ident--;
$('.carrossel').animate({'margin-left': '+=' + slide + 'px'}, 500);
}

});


function automatizar(segundos) {
var back = null;

var auto = setInterval(function () {
if ($('.carrossel').css('margin-left') === '0px') {
ident = '0';
}

if (ident < count && back === null) {
ident++;
$('.carrossel').animate({'margin-left': '-=' + slide + 'px'}, 500);
} else {
if (ident === 1) {
back = null;
} else {
back = true;
}
ident--;
$('.carrossel').animate({'margin-left': '+=' + slide + 'px'}, 500);
}

$('.forth, .back').click(function () {
clearInterval(auto);
});
}, segundos * 1000);
}

automatizar(2);

});
★★★★★DIA 11.03.16 23h56RESPONDER
Rodrigo Peretti
Enviando Comentário Fechar :/
Lucas Lima Andrade

Lucas Lima Andrade

Boa noite,

fiquei com uma dúvida. Como faço pra trabalhar com o carrossel responsivo? ^^
★★★★★DIA 24.08.15 19h29RESPONDER
Robson V. Leite, Lucas Lima Andrade, Hebert Andrade
Enviando Comentário Fechar :/
Robson V. Leite

Robson V. Leite

É so aplicar o CSS flexível, as media queries, ajustar o conteúdo e pronto :)
★★★★★DIA 27.08.15 19h03RESPONDER
Lucas Lima Andrade, tcharles caldas caldas
Enviando Comentário Fechar :/
Hebert Andrade

Hebert Andrade

e sobre a questão do numero de itens que irão aparecer na caixa do carroseul, no js ele é fixo como 3, colocando ele responsivo teria que alterar essa parte certo? ou não?, pois há casos que irá aparecer so 2 itens ou 1, dependendo do dispositivo que irá abrir a página
★★★★★DIA 09.09.15 10h26RESPONDER
Robson V. Leite
Enviando Comentário Fechar :/
Enviando Comentário Fechar :/