Tutorial: Slide.js

  • 16:08
  • 01 maio 2016


Tutorial de ultima hora..rs é simples e básico slide, avisando que não é automático, você tem que editar a imagem em algum editor como PhotoShop ou no próprio PhotoScape. vou deixar em psd a imagem pra quem quiser usar como exemplo. é super fácil, segue abaixo:



1. cole acima de }]]></b:skin> o código a seguir:

.rslides_container {
position: relative;
width: 100%;
margin: 20px auto 0;
max-width: 985px;
}
.rslides {
list-style: none outside none;
margin: 0 auto;
max-height: 400px;
max-width: 1100px;
overflow: hidden;
padding: 0;
position: relative;
width: 100%;
}
.rslides li {
-webkit-backface-visibility: hidden;
position: absolute;
border: 0px solid #555;
display: none;
left: 0;
top: 0;
margin: 0;
padding: 0;
list-style: none;
}
.rslides img {
display: block;
height: auto;
float: left;
width: 100%;
border: 0;
margin: 0;
max-width: 100%;
}
ul.rslides .rslides_nav {
height: 30px;
position: absolute;
text-indent: -99999px;
top: 45%;
width: 30px;
z-index: 9999;
display: none;
}
ul.rslides:hover .rslides_nav {
display: block;
}
.prev {background: url("http://static.tumblr.com/pfobaef/JzXo6it1k/bts.png") repeat scroll 0 0 transparent;
float: left;
left: 15px;
}
.next {background: url("http://static.tumblr.com/pfobaef/JzXo6it1k/bts.png") repeat scroll right 0 transparent;
float: right;
right: 15px;
}

2. Procure por: </head> e cole abaixo.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js'/>
<script src='http://code.jquery.com/jquery-1.11.0.min.js' type='text/javascript'/>
<script src='https://googledrive.com/host/0B-P4_Fs3S76yQ1RVNnl0bVlLMXM' type='text/javascript'/>
<script type='text/javascript'>
/*<![CDATA[*/
$(function() {
$(".rslides").responsiveSlides({
auto: true,
speed: 500,
timeout: 3000,
nav: true,
pause: true,
prevText: "Previous",
nextText: "Next",
navContainer: "ul.rslides",
});
});
/*]]>*/</script>

3. Agora você tem 2 opção, colar o html no gadget acima do post ou colocar acima de <header> ou </header>, no blog de teste colei abaixo de </header>

<div class='rslides_container'>
<div class='slider'>
<ul class='rslides'>
<li><a href='LINK' target='_blank'><img alt='' src='http://static.tumblr.com/pfobaef/Hajo6is8i/img_slide_1.png'/></a></li>
<li><a href='LINK' target='_blank'><img alt='' src='http://static.tumblr.com/pfobaef/fP4o6is8w/img_slide_2.png'/></a></li>
</ul>
</div>
</div>

(Esse Slide foi testado no template travel). Por hoje é isso pessoal.. Bjs e até mais..! 

Compartilhe

Veja Também:

Comentário(s)
2 Comentário(s)

  1. Salvando aqui nos favoritos pra usar futuramente <3

    ResponderExcluir
    Respostas
    1. Oii Jackie :D feliz ver você aqui no meu cantinho <3
      Pode usar a vontade flor.. Bjs

      Excluir