Criando Efeito Carrossel de Imagens com jQuery

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.