Código slide de destaques modelo 1

no dia 21 março 2015


HTML:
<center>
<div id="slider">
<a href="https://draft.blogger.com/LINK%20AQUI"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEir1ToQl0bs_jCID17pSd8DZqQMHBwyQdb6GioQMLLvWcAq3DPAjADMle-PytbNMU-Q_ofnKDqtWsGpXOgcBmpxiGCPJNvUIYAuEmFZWwXdvoIrKK6JiXpCnas1THM2e44YK5-ATnoKjHKu/s1600/exemplo1.jpg=" title=" Aqui a legenda da imagem" /></a>

<a href="https://draft.blogger.com/LINK%20AQUI"><img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOaUBUhK_5xBFg0iqE-zy9yW69CWeovvzbsRiiBf0QuZWzDFWkv4gS5FlFl4bcbTt8i2dVOVLaGkVK6IE3n0ERbkopdyaHu7eYpW5m_2kc299Jph1yGBQ5w_n6LMR3IW78kYCQljVnlm1_/s1600/exemplo2.jpg" title=" Aqui a legenda da imagem" /></a>

<a href="https://draft.blogger.com/LINK%20AQUI"><img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1Z0UAfwCdI2S56QFLX4f1P4fcmAYFeRcxgXoZPYU8OhY8MFrbZv98zJXptN-DT3EKIdJkk5nz1KDKFdpabXQYLkx6GnQUC3MeJgeztAQsj5HGpf8BulS-6vvl8BayzbTJvJkrpla5L6OQ/s1600/exemplo3.jpg" title=" Aqui a legenda da imagem" /></a>

<a href="https://draft.blogger.com/LINK%20AQUI"><img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHgatiCM0qY6eNPaElHhD7Q1lCCV7zMMjP_Sx4cbnzDnIGFY0UcP7E2sIn8DfVh5WUMWPXJ8AvLbz2NBtrE379UaoeN3aVF17BWZZ7noGV3pKQjrgc2-l4132ffkKacxos9p9VM2Y-2GFz/s1600/exemplo4.JPG" title=" Aqui a legenda da imagem" /></a>

<a href="https://draft.blogger.com/LINK%20AQUI"><img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6CXmuIPhXd0RnvStjOk94qPQiSlxsWmaAV_wFFtl102jkqpCOZrxbD5iZzwrhk4MUvnFkLXAffV7cy5JBdq1xNNnaA57DrmRY5ibJeffeGi8w1B8-gnqxURSNViHsAh5o_tZsh3WENFAt/s1600/exemplo6.jpg" title=" Aqui a legenda da imagem" /></a>
</div>
<div class="clear">
</div>
</center>

Javascript (abaixo de <head>:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
<script src='http://yourjavascript.com/1611641113/jquery.nivo.slider.pack.js' type='text/javascript'/>
<script type='text/javascript'>
jQuery(window).load(function(){
    jQuery(&quot;#slider&quot;).nivoSlider({
        effect:&quot;fade&quot;,
        slices:15,
        boxCols:8,
        boxRows:4,
        animSpeed:500,
        pauseTime:4000,
        startSlide:0,
        directionNav:true,
        controlNav:true,
        controlNavThumbs:false,
        pauseOnHover:true,
        manualAdvance:false,
afterLoad: function(){$(&#39;.nivo-caption&#39;).css(&quot;left&quot;,&quot;0&quot;)},
beforeChange: function(){$(&#39;.nivo-caption&#39;).css(&quot;left&quot;,&quot;-700px&quot;)},
afterChange: function(){$(&#39;.nivo-caption&#39;).css(&quot;left&quot;,&quot;0&quot;)}
    });
});
</script>

CSS:
/* SLIDE
---------------------------------------------*/
#slider {background: url('http://static.tumblr.com/wvgucgb/xIzn3uqba/ajax-loader.gif') no-repeat 50% 50%; width: 790px; height: 320px; margin: 0 0 40px 0; border-radius: 10px;}
#slider img {position: absolute; top: 0; left: 0; display: none;}
#slider a {border: 0; display: block;}
#slider img {max-width: 790px; height: auto; border-radius: 10px;}
/* If an image is wrapped in a link */
.nivoSlider {overflow:hidden;}
.nivoSlider a.nivo-imageLink {position: absolute; top: 0; left:; width: 100%; height: 100%; border: 0; padding: 0; margin: 0; z-index: 6; display: none;}
/* Caption styles */
.nivo-caption {position: absolute; left: 0px; bottom: 0px; color:#fff; opacity: 0.3; width: 100%; z-index: 8; background: url('http://static.tumblr.com/wvgucgb/Dt3n9pu1g/slide.png');
-webkit-transition:all 1s ease; /* delay = 1 s */ -moz-transition:all 1s ease; -ms-transition:all 1s ease; -o-transition:all 1s ease; transition:all 1s ease; left:-790px; width: 100%;}
.nivo-caption p {font: italic 20px Georgia; letter-spacing: -1px; padding: 10px 15px; margin: 0; text-transform: lowercase;}
.nivo-caption a {display: inline !important;}
.nivo-html-caption {display: none;}
/* The slices and boxes in the Slider */
.nivo-slice {display: block; position: absolute; z-index: 5; height: 100%;}
.nivo-box {display: block; position: absolute; z-index: 5;}
/* Direction nav styles (e.g. Next & Prev) */
.nivo-directionNav a {background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8c4q1rujtCPsHd1Kxl0f0fi6oKROjrF3LB2NaqHj7FMUh26c4etCgohore2TrJd5rscqgHt8l3xWo9DdsWP7HB55SVpGaTyNK75cCLMIjftLbfQUGJUHdSU1nWaPuJE33eL-V2ONB5gbs/s1600/setas-fff.png') no-repeat; display: block; width: 30px; height: 30px; text-indent: -9999px; border: 0; position: absolute; top: 45%; z-index: 9; cursor: pointer;}
.nivo-prevNav {left: 0;}
.nivo-nextNav {right: 0;}
a.nivo-nextNav {background-position: -30px 0; right: 15px;}
a.nivo-prevNav {left: 15px;}
/* Control nav styles (e.g. 1,2,3...) */
.nivo-controlNav {}
.nivo-controlNav a {background: url('http://static.tumblr.com/wvgucgb/VkLn9ptgj/bullet.png') no-repeat; width: 15px; height: 13px;  margin-top: 300px;margin-left: 3px;float: right; display: block; text-indent: -9999px; border: 0; position: relative; z-index: 9; cursor: pointer;}
.nivo-controlNav a.active {background-position: 0 -13px;}
http://loja.cozinhadoquintal.com.br
Comente com sua conta Blogger
Comente com sua conta Google+

Postagens mais visitadas

Minha lista de blogs