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.
Deixe seu comentário: