Slide só com CSS/HTML?

FabianoS · 17 de abril de 2015

Bom nao sei como fazer sou leigo ainda , quero um silide simples sem efeitos com jquery.

minha ideia e essa 2 botões , left,right. ao clicar passar a imagem, tentei bolar um mais nao como terminar.

<style>#main{width:700px; height:300px; border:solid 1px #C3c3c3; }.ctn{float:left; margin-top:135px; margin-left:0px;}.ctn2{float:right; margin-top:135px; margin-right:0px;}</style></head><body><div id="main"><img class="ctn" src="contro1.png"/><img class="ctn2" src="contro1.png"/></div></body></html>

DiF · 17 de abril de 2015

@FabianoS

Dá para fazer. usando o CSS3 e animations. só é complicadinho para quem ainda está iniciando... por isso é melhor fazer com algum plugin jquery que facilita.

FabianoS · 17 de abril de 2015

@FabianoS

Dá para fazer. usando o CSS3 e animations. só é complicadinho para quem ainda está iniciando... por isso é melhor fazer com algum plugin jquery que facilita.

Sim eu ja tive uma base, de um slide com CSS3 , mais nao gosto de copiar gosto de fazer eu mesmo, e nao estudei jquery ainda,

DiF · 17 de abril de 2015

Então.. fazer com CSS3 é BEM mais difícil e complicado que fazer em jquery, visto que com jquery podes usar um plugin qualquer e atribuir a função para o elemento que possui as imagens.

No css, você vai precisar entender como funciona os keyframes e animations..

se quiser tentar entender veja: http://www.smashingmagazine.com/2012/04/25/pure-css3-cycling-slideshow/

Mas hj dia certas coisas não precisam ser reinventadas( fazer um troço do zero) podes usar os plugins já criados em jquery( e adaptar para seu projeto) ou usar em CSS3 que existe exemplos aos montes no google

Como você disse que é leigo no assunto, recomendo NÃO fazer em css3... e sim em jquery( que por sinal é beeeem simples basta entender algumas linhas)

FabianoS · 17 de abril de 2015

Então.. fazer com CSS3 é BEM mais difícil e complicado que fazer em jquery, visto que com jquery podes usar um plugin qualquer e atribuir a função para o elemento que possui as imagens.

No css, você vai precisar entender como funciona os keyframes e animations..

se quiser tentar entender veja: http://www.smashingmagazine.com/2012/04/25/pure-css3-cycling-slideshow/

Mas hj dia certas coisas não precisam ser reinventadas( fazer um troço do zero) podes usar os plugins já criados em jquery( e adaptar para seu projeto) ou usar em CSS3 que existe exemplos aos montes no google

Como você disse que é leigo no assunto, recomendo NÃO fazer em css3... e sim em jquery( que por sinal é beeeem simples basta entender algumas linhas)

Bom sim praticamente e o mesmo exemplo que tinha visto, bom vou procurar um plugin em jquery então, valeu thanks.

DiF · 17 de abril de 2015

@FabianoS

Posso recomendar estes:

http://jquery.malsup.com/cycle/

ou

http://jquery.malsup.com/cycle2/

No jquery possui N plugins bons... estes dois são os mais simples e possuem alguns efeitos legais.. o uso é bem simples.

FabianoS · 20 de abril de 2015

@FabianoS

Posso recomendar estes:

http://jquery.malsup.com/cycle/

ou

http://jquery.malsup.com/cycle2/

No jquery possui N plugins bons... estes dois são os mais simples e possuem alguns efeitos legais.. o uso é bem simples.