Adicionar efeito de transição num determinado período de tempo

[rikaschmitt 54]

Bom dia galera.

 

Tenho um bannerr com uma imagem de fundo, um menu lateral e um texto. Cada "slide" do banner tem seu texto e sua imagem. O problema é que eu não sabia que esse banner teria que ser rotativo, depois do site todo pronto que o designer solicitou essa alteração.

 

No meu caso eu fiz ele do zero, não utilizei nenhum plugin.. e estou um pouco perdido de como fazer essa animação de transição entre os banners...

 

Um exemplo de como está meu banner.

 

Alguém pode me ajudar?

[Rafael Sirotheau 43]

Como assim rotativo? Autoplay?

[rikaschmitt 54]

Isso.

Automaticamente, num determinado período, os banners vão trocando...

[Rafael Sirotheau 43]

Define um setInterval que vai 'clicar' no link.

.trigger('click')

Uma dica: Quando você fizer esse tipo de funcionalidade do zero, tenha sempre em mente que deve haver uma variavel que armazena informações, classes para identificar elementos ativos, etc. Por exemplo, algo assim:

var slides = {
quantidade: 3,
indexAtual: 1,
tempoTransicao: 3000,
.....
}

Veja:
http://jsfiddle.net/rafasirotheau/ktw7Ltn1/2/

[rikaschmitt 54]

Muito bom Rafael, vou dar uma olhada nisso.

 

Sou ainda novo no javascript/jQuery.

 

Muito obrigado.

[Rafael Sirotheau 43]

Fiz uma versão modificada, que utiliza menos código, apenas para mostrar algumas funções que você poderia utilizar para otimizar seu banner.

Algumas coisas que fiz:
- Estou utilizando apenas classe para definir o banner ativo. Dessa forma, no CSS eu defino o efeito de transição.

- Juntei os blocos de banners em um wrapper, pra reduzir código no js e deixar a transição mais bonita.

- Nesse codigo novo, nao é preciso mexer no JS se for preciso adicionar mais banners. Basta adicionar os blocos no HTML.

O código ainda pode ser refatorado pra ficar ainda mais clean, sendo assim, deixo ele aqui apenas para referencia de funcionalidades. Espero que ajude:

http://jsfiddle.net/rafasirotheau/q1b32yd1/1/

Abs!

[rikaschmitt 54]

Ah, valeu.

Vou estudar essas novas funções.

[Lucas Medina 17]

Você pode fazer da forma que fez, mas isso vai demandar um controle do conteúdo interno da div principal.

Minha sugestão é: colocar o conteúdo de cada banner separadamente, como uma lista, alinhá-los horizontalmente, e utilizar da propriedade overflow do CSS para exibir somente o banner desejado naquele momento.

 

Na mão, é um tanto mais extenso fazer um carrossel, entretanto não impossível.

Deixei um exemplo básico no JSFiddle:

 

http://jsfiddle.net/lucasmedina/64ojjr7b/

 

Edit: Opa, acho que alguém já arranjou um resultado, rs.