1) Coloque esse código no seu css.
.pix_diapo { background: #ccc; /* ALTERA O FUNDO */ height: 200px; /* ALTERA A ALTURA */ margin: 0 10px; overflow: hidden; position: relative; width: 500px; /* ALTERA A LARGURA */ } .pix_diapo > div { display: none; height: 100%; left: 0; position: absolute; top: 0; width: 100%; } #pix_prev, #pix_next { cursor: pointer; display: block; height: 40px; margin-top: -20px; position: absolute; top: 50%; width: 40px; z-index: 1001; } #pix_prev { background: url(https://1.bp.blogspot.com/-Al7QbuoAXBk/V93WwGLc0bI/AAAAAAAAA6Q/z-7RPfi4o4g--nVIvazGNXDzxEv44T8agCLcB/s1600/prev.png) no-repeat; left: 10px; } #pix_next { background: url(https://2.bp.blogspot.com/-ayGaSKn5bHM/V93WvsfBbQI/AAAAAAAAA6M/hFZn4UUep2gjJMoya8s7WQ4aEz3W83kWwCLcB/s1600/next.png) no-repeat; left: auto!important; right: 10px!important; } .pix_relativize { overflow: hidden; position: relative; } .imgFake { cursor: pointer; } .elemHover { position: absolute; } .caption { background: #000; /* ALTERA O FUNDO DA LEGENDA */ bottom: 20px; color: #fff; display: block; font-size: 13px; /* ALTERA O TAMANHO DA FONTE */ padding: 15px; margin-bottom: -20px; width: 500px; /* ALTERA A LARGURA */ text-transform: uppercase; font-family: 'Arial'; /* ALTERA A FONTE */ } .ui-loader { display: none; }
2) Coloque os scripts antes da tag < / head>.
<script src='http://static.tumblr.com/wldnpu3/m1lmufnqi/jquery.min.js' type='text/javascript'></script>
<script src='http://static.tumblr.com/wldnpu3/t42mufnr5/jquery.mobile-1.0rc2.customized.js' type='text/javascript'></script>
<script src='http://static.tumblr.com/wldnpu3/uRUmufnrx/jquery.hoverintent.js' type='text/javascript'></script>
<script src='http://static.tumblr.com/utmut0z/YHWniwou8/diapo.js' type='text/javascript'></script>
<script src='http://static.tumblr.com/wldnpu3/Yi4mufnsy/jquery.easing.1.3.js' type='text/javascript'></script>
<script>
$(function(){
$('.pix_diapo').diapo();
});
</script>
3) Coloque esse código onde quer que apareça o slide.
<div class="pix_diapo">
<div>
<a href="LINK "><img src="LINK DA IMAGEM "/></a>
<div class="elemHover caption fromRight elemToHide">
LEGENDA AQUI</div>
</div>
0 Comentários