Javascript Animação de Imagens

[wowmiguelfcp]

Boas.

Malta eu estou neste momento a trabalhar numa webpage para a empresa onde trabalho e preciso da vossa ajuda.

Eu na página principal tenho um conjunto de imagens que alternam de x em x tempo. Mas eu quero que as imagens alternam com uma animação a fugirem para a esquerda, estilo powerpoint animação para a esquerda.

O código java script que tenho neste momento é assim:

var myIndex = 0;

$(document).ready(function() {     
   
   //Execute the slideShow
   carousel();

});

function carousel()
{
  var i;
  var x = document.getElementsByClassName("mySlides");
  for (i = 0; i < x.length; i++)
   {
  x[i].style.display = "none";  
  }
  myIndex++;
  if (myIndex > x.length) {myIndex = 1}   
  x[myIndex-1].style.display = "block";  
  setTimeout(carousel, 3000); // Change image every 3 seconds
}

Que preciso de alterar para isso?

 

[franklopez]

Procura o carrousel do bootstrap

 

[franklopez]

Já faz o que tu queres vê o exemplo e configura as tuas coisas

 

[wowmiguelfcp]

Eu já tinha visto o Bootstrap mas tou com dúvidas de como usar isso e por isso de momento não queria usar muito isso... Queria mesmo era saber o que alterar no código.

Depois de ter o site feito e mostrar, então aí procedo às melhorias.

 

[franklopez]

O bootstrap é facil só tens de fazer os includes de css e dojquery acho eu. O bootstrap tb tem um design bastante cuidado out of the box.

 

[franklopez]

Não vale a pena reinventar a roda

 

[wowmiguelfcp]

É só fazer mesmo os includes, não é preciso mais nada?

E a CSS e as funções JS que já tenho, não interfere em nada?

 

[franklopez]

Não. Podes fazer os teus includes na mesma

 

[franklopez]

Tens é de copiar o exemplo do carrousel e meter lá as tuas imagens

 

[wowmiguelfcp]

Humm sendo assim sou gajo de experimentar.

Já agora, tira me uma dúvida sff:

Gostava de usar a barra de navegação que está aqui https://bootswatch.com/darkly/

O que preciso de fazer?

 

[franklopez]

Não mistures cenas. Usa a navbar do bootstrap

 

[tuniq]

Se só quiseres usar o carousel do bootstrap, não precisas de usar a framework toda. Podes tirar só as partes referentes ao carousel em si (do css e do js).

Essa barra de navegação é feita com bootstrap. Se fores ver o código da página, tens lá tudo. É a primeira div dentro do body. Se copiares esse código e fizeres include do bootstrap, vai ficar tal e qual, sem teres de criar/alterar estilos.

 

[bashir]

Penso que pode importar só o ficheiro sass do carousel do bootstrap.


https://github.com/twbs/bootstrap-sass/blob/master/assets/stylesheets/bootstrap/_carousel.scss

 

[wowmiguelfcp]

Mal possa vou experimentar então o bootstrap! Fazer os includes... Entendido!

Obrigado malta

 

[wowmiguelfcp]

Malta já fiz include do bootstrap e já pus os links à minha maneira no site.

No entanto, queria por a cor verde (está a cinzento e preto no site) na barra de navegação que está aqui https://bootswatch.com/darkly/ e posicionar noutro local. Em que ficheiro CSS e campo tenho de alterar?


EDIT: Tinha a ver com a minha CSS que estava a dar conflito. No entanto a cor está a preto e eu queria a verde.

 

[franklopez]

Usas o chrome e fazes ctrl+shif+i e abres o modo de debug

 

[franklopez]

Depois vais clicando na barra e vês as classes de css assocciadas alteras in line no chrome e vês cono fica depois tens de copiar a classe inteira para o teu css e mudas o que quiseres. Tens é de te certificar que o teu ficheiro de css está em ultimo pois só assim fazes override à classe de css do bootstrap

 

[wowmiguelfcp]

E em relação à cor da barra? Eu copiei o código associado à verde e mesmo assim nada.

 

[franklopez]

Tens de ver. Tipicamente o texto é color: #qqcoisa

 

[wowmiguelfcp]

Diz me uma coisa, eu tenho que sacar os ficheiros todos? É que só saquei os ficheiros CSS, não saquei os .less nem os .scss