Slide simples de instalar - 3 passos apenas



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>
Odnei Sales
Odnei Sales

This is a short biography of the post author. Maecenas nec odio et ante tincidunt tempus donec vitae sapien ut libero venenatis faucibus nullam quis ante maecenas nec odio et ante tincidunt tempus donec.

Nenhum comentário:

Postar um comentário