Slide responsivo para colocar no seu blog/site

Coloque um Slide Responsivo (adaptável a qualquer dispositivo) no seu blog/site, totalmente em CSS (sem Scripts, Javas etc..) 😃
TUTORIAL
Adicione um Gadget HTML no layout do blog e cole o código abaixo:  Você só precisa alterar o endereço do link e imagem (destacado em rosa)

<br/>
<div id="slider">
<figure>
  <a href="LINK"><img src="IMAGEM" alt/> </a>
  <a href="LINK"><img src="IMAGEM" alt/> </a>
  <a href="LINK"><img src="IMAGEM" alt/> </a>
  <a href="LINK"><img src="IMAGEM" alt/> </a>
</figure>
</div>
<style>
  @keyframes slidy {
0% { left: 0%; }20% { left: 0%; }25% { left: -100%; }45% { left: -100%; }50% { left: -200%; }70% { left: -200%; }75% { left: -300%; }95% { left: -300%; }100% { left: -400%; }
}
body { margin: 0; }
div#slider { overflow: hidden; }
div#slider figure img { width: 20%; float: left; }
div#slider figure { position: relative; width: 500%; margin: 0;left: 0;text-align: left; font-size: 0;animation: 30s slidy infinite; }
</style>
<br/><br/>
adaptado do código: Dudley Storey

RESULTADO DO SLIDE:

Dúvidas deixem nos comentários 😊



Veja também

Comentários

Sua opinião é muito importante!
:3 :p :s :9 :| :'( :8( ;) :D :( 8) :)

Postar um comentário