Programação / jQuery

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!

Por Robson V. Leite

Publicado por Robson V. Leite
em 14/01/2015 às 12h32

Lista VIP UpInside

Entre para nossa lista VIP e receba vídeo aulas, artigos e tutoriais exclusivos e com prioridade

  QUERO ENTRAR
Compartilhe:

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:

Em Programação:

Deixe seu comentário: