
Eu estava procurando sobre isso, até achar um lugar onde o guri ensinou como deixar, dai fucei o js do negocio todo até achar e consegui deixar os arrows fixos. Já perguntaram aqui se tinha como fazer isso, eu disse que sim, mas que ainda não sabia como fazer tal coisa. Pra quem quiser, esse é o JS com os arrows fixo, dai só usar no lugar daquele outro.
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script> <script type="text/javascript" src="http://static.tumblr.com/t0iuumg/4ARmldwcf/nivo.js"></script> <script type="text/javascript"> var $nv4wp = jQuery.noConflict(); $nv4wp(window).load(function() { $nv4wp('#slider').nivoSlider({ effect:'random', slices:15, boxCols: 4, boxRows: 2, animSpeed: 600, pauseTime: 3000, startSlide:0, directionNav:true, directionNavHide:true, controlNav:true, controlNavThumbs: true, controlNavThumbsFromRel: true, controlNavThumbsSearch: '.jpg', controlNavThumbsReplace: '_thumb.jpg', keyboardNav:true, pauseOnHover:true, manualAdvance: false, captionOpacity:0.5, prevText: 'Prev', nextText: 'Next', beforeChange: function(){}, afterChange: function(){}, slideshowEnd: function(){}, lastSlide: function(){}, afterLoad: function(){} }); }); </script>
Os efeitos do nivo são:
- random
- sliceDownRight
- sliceUpRight
- sliceUpLeft
- sliceUpDown
- sliceUpDownLeft
- fold
- fade
- boxRandom
- boxRain
- boxRainReverse
- boxRainGrow
- boxRainGrowReverse
A parte do js, tem isso:
<script type="text/javascript">
var $nv4wp = jQuery.noConflict();
$nv4wp(window).load(function() {
$nv4wp('#slider').nivoSlider({
effect:'random',
slices:15, // For slice animations
boxCols: 4, // For box animations
boxRows: 2, // For box animations
animSpeed:500, // Slide transition speed
pauseTime: 2000, // How long each slide will show
startSlide:0, // Set starting Slide (0 index)
directionNav:true, //Next & Prev
directionNavHide:true, //Only show on hover
controlNav:true, // 1,2,3... navigation
controlNavThumbs:false, // Use thumbnails for Control Nav
controlNavThumbsFromRel:false, // Use image rel for thumbs
controlNavThumbsSearch: '.jpg', // Replace this with...
controlNavThumbsReplace: '_thumb.jpg', // ...this in thumb Image src
keyboardNav:true, //Use left & right arrows
pauseOnHover:true, //Stop animation while hovering
manualAdvance:false, //Force manual transitions
captionOpacity:0.5, //Universal caption opacity
prevText: 'Prev', // Prev directionNav text
nextText: 'Next', // Next directionNav text
beforeChange: function(){}, // Triggers before a slide transition
afterChange: function(){}, // Triggers after a slide transition
slideshowEnd: function(){}, // Triggers after all slides have been shown
lastSlide: function(){}, // Triggers when last slide is shown
afterLoad: function(){} // Triggers when slider has loaded
});
});
</script>
Se você procurar por effect, vai ver que tem um random, certo? Dai se você por qualquer outro efeito no lugar de random, vai pegar apenas aquele efeito. O random faz pegar todos, aleatoriamente.
É sim, sabe a parte do JS? Então, usa esse com minhas modificações, deixei bem lento e fofo:
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script type="text/javascript" src="http://static.tumblr.com/tx5g7yp/Az3m9xml4/jquery.nivo.slider.pack.js"></script>
<script type="text/javascript" src="http://static.tumblr.com/tx5g7yp/zdnm9yjpf/slider.js"></script>
Dai o resto você usa normalmente. O Js fica em header.php e o style no style mesmo. ^^
Bom, a pedidos eu fiz alguns arrows para nivoslider. Vou ensinar a vocês algumas coisas do css do nivo que não ensinei quando fiz o tutorial. Alguns arrows eu fiz com direção errada, então se quiserem mudar pelo ps, fica a vontade.
CSS explicação:
Na parte do css do nivo, temos isso aqui:
/*=== Custom Slider Styles ===*/
/*============================*/
.slider {width:100%;}
.slider img {
position: absolute;
top:0px;
left:0px;
display:none;}
.slider a {border:0;
display:block;}
.nivo-controlNav {display:none;}
.nivo-directionNav a {display:block;
width: 31px;
height:34px;
background:url(URL DO ARROW AQUI) no-repeat;
text-indent:-9999px;
border:0;}
a.nivo-nextNav {background-position: -30px 0;
right:15px;}
a.nivo-prevNav {left: 15px;}
.nivo-caption {font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;}
.nivo-caption a {color:#efe9d1;
text-decoration:underline;}
Estão vendo aquele: .nivo-directionNav a onde tem valores com width e height e logo em seguid um background com a url da imagem do arrow, certo?
Então, a gente pode mexer naquele. Por exemplo, vou pegar o arrow de numero 01. Vou abri-lo no ps e ver qual o tamanho do WIDTH que ele tem. Lá eu vejo que é 72. Então, 72 dividido por 2 é quanto? 36 não é? Então, no width do .nivo-directionNav a a gente vai colocar 32px; e em height a gente vai colocar o valor que ele tem mesmo, o daqui é 36, então em height vai ser 36px. Upamos nosso arrow aqui e colocaremos ele no local onde fica a imagem do arrow.
Logo abaixo temos o a.nivo-nextNav lá temos um background-position com o valor que esta em negativo. Então, você vai por ali o valor que você dividiu do seu arrow inteiro, ou seja -32px. Note que temos um left e right com valor certo? Se você aumentar o arrow vai andar, o do tthy esta em 0 por isso fica juntinho da imagem do slider. Então, se querem igual, só tirar o valor do left e right que ficará legal.
Bom, é isso. Qualquer coisa só gritar aqui que respondo. Beijos, D.
Não tem o .nivo-caption na parte de css do nivo? Então, dai eu acrecentei lá:
.nivo-caption b {
letter-spacing: 3px;
font-style: normal;
font-family: 'Yanone Kaffeesatz', sans-serif;
font-size: 14px; text-transform:uppercase;
color: #416254;
border-bottom: #ccc 1px dotted; }
Coloque isso acima depois do .nivo-caption no css do nivo. Dai você vai editar como desejar, com a cor que quiser.
Caso queiram o meu caption, ele é assim, dai vais precisar tirar o que tem lá ou apenas pegar os elementos de css que fiz:
.nivo-caption {
font-family: Georgia;
font-size: 11px;
font-style: italic;
position:absolute;
left: 0px;
bottom:0px;
background:#fff;
color:#5f5f5f;
width: 100%;
z-index:50;
border-right: 5px solid #;
padding: 5px 0;}
Dai na hora de usar, tem a parte do title=”descrição” né? Que é onde o caption fica. Dai naquilo tu faz assim: <b>Titulo</b><br>Descrição.
Vai ficar mais ou menos assim:
<a href="URL" target="_blank">
<img src="IMAGEM" title="<b>TITULO</b><br> Sua descrição!" />
</a>
Isso acima é a parte do link com imagem, onde geralmente vai a descrição. Só isso!
Bom, no caption b, eu usei uma font personalizada, dai ela é essa:
Coloque isso antes de </head>
<link href="http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz:300,400,700t" rel="stylesheet" type="text/css">
Oins :) Primeiro essa é a page do nivoslider, (espero que leiam o começo e morram depois) pra quem não sabe. Então, amore, na parte do script do nivo, tem essa parte:
<script type="text/javascript">
var $nv4wp = jQuery.noConflict();
$nv4wp(window).load(function() {
$nv4wp('#slider').nivoSlider({
effect:'random',
slices:15, // For slice animations
boxCols: 4, // For box animations
boxRows: 2, // For box animations
animSpeed:500, // Slide transition speed
pauseTime: 2000, // How long each slide will show
startSlide:0, // Set starting Slide (0 index)
directionNav:true, //Next & Prev
directionNavHide:true, //Only show on hover
controlNav:true, // 1,2,3... navigation
controlNavThumbs:false, // Use thumbnails for Control Nav
controlNavThumbsFromRel:false, // Use image rel for thumbs
controlNavThumbsSearch: '.jpg', // Replace this with...
controlNavThumbsReplace: '_thumb.jpg', // ...this in thumb Image src
keyboardNav:true, //Use left & right arrows
pauseOnHover:true, //Stop animation while hovering
manualAdvance:false, //Force manual transitions
captionOpacity:0.5, //Universal caption opacity
prevText: 'Prev', // Prev directionNav text
nextText: 'Next', // Next directionNav text
beforeChange: function(){}, // Triggers before a slide transition
afterChange: function(){}, // Triggers after a slide transition
slideshowEnd: function(){}, // Triggers after all slides have been shown
lastSlide: function(){}, // Triggers when last slide is shown
afterLoad: function(){} // Triggers when slider has loaded
});
});
</script>
Então vou te explicar:
Procure por: pauseTime
Logo a frente de pausetime tem uma numeração, isso que determina a velocidade que seu slide vai ter. Ou seja, diminua para ver que ele vai passar mais rápido. Coloque um 300 e veras que vai ser muito rápido. Então, como você quer fazer um livro, aumentando aquela numeração para um valor ABSURDO, que dai vai da tempo da pessoa ler aquela página do livro e mudar pelos arrows que ficam no ladinho. :D
Procure também por: animSpeed
Em animSpeed, que fica logo acima de pausetime, isso determina a valocidade que as animações vai ter. Ou seja, diminua e veja que a trasição das imagens vão ficar mais rápidas. Deixe como desejar.
Bom é isso, eu fui mexer nos códigos até saber como eles funcionavam e consegui. ;*

Bom, pra usar, basta salvar a imagem upar ela onde você quer, e trocar no css do nivoslider.









































#meuslide
{position: absolute;
top: numeropx;
left: numeropx;
width: numeropx;
height: numeropx;}
Dai você da valores ao top e left, até ficar no lugar em que você quer. E para usar você vai ter que colocar isso dentro da vid do seu header:
<div id="meuslide">
conteudo do seu slide
</div>
Se a div não aparecer na dash, entra no TTHY.

Oi, tudo bom com vocês? Sim, que bom. Então, vou ensinar como faz o slide daqui, o nome desse slide é NIVO. Ele é um plugin pra wordpress que é facilmente achado no google…na página dele mesmo. Lá, existem vários exemplos de como a gente pode usar. Tem com ribbons, com caixa e sombra…mas aqui vou ensinar o modo simples. O modo que vocês pegariam rápido.
Todo slide precisa de um script, e esse não é diferente. Coloque antes de </head> isso aqui:
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script> <script type="text/javascript" src="http://static.tumblr.com/ifqwhnb/GBsm20q7d/jquery.nivo.slider.pack.js"></script> <script type="text/javascript"> var $nv4wp = jQuery.noConflict(); $nv4wp(window).load(function() { $nv4wp('#slider').nivoSlider({ effect:'random', slices:15, // For slice animations boxCols: 4, // For box animations boxRows: 2, // For box animations animSpeed: 500, // Slide transition speed pauseTime: 3000, // How long each slide will show startSlide:0, // Set starting Slide (0 index) directionNav:true, //Next & Prev directionNavHide:true, //Only show on hover controlNav:true, // 1,2,3... navigation controlNavThumbs:false, // Use thumbnails for Control Nav controlNavThumbsFromRel:false, // Use image rel for thumbs controlNavThumbsSearch: '.jpg', // Replace this with... controlNavThumbsReplace: '_thumb.jpg', // ...this in thumb Image src keyboardNav:true, //Use left & right arrows pauseOnHover:true, //Stop animation while hovering manualAdvance:false, //Force manual transitions captionOpacity:0.8, //Universal caption opacity prevText: 'Prev', // Prev directionNav text nextText: 'Next', // Next directionNav text beforeChange: function(){}, // Triggers before a slide transition afterChange: function(){}, // Triggers after a slide transition slideshowEnd: function(){}, // Triggers after all slides have been shown lastSlide: function(){}, // Triggers when last slide is shown afterLoad: function(){} // Triggers when slider has loaded }); }); </script>
CSS:
Coloque antes de </style>
/* The Nivo Slider styles */
#slider {position:relative;}
#slider img {position:absolute; top:0px; left:0px; display:none;}
#slider a {border:0; display:block;}
.nivoSlider {position:relative; width: 356px;}
.nivoSlider img {position:absolute; top:0px; left:0px;}
/* If an image is wrapped in a link */
.nivoSlider a.nivo-imageLink {position:absolute; top:0px; left:0px; width:100%; height:100%; border:0;
padding:0;margin:0; z-index:6; 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;}
/* Caption styles */
.nivo-caption {position:absolute;left:0px; bottom:0px; background:#000; color:#fff; text-transform: uppercase; width: 100%;
z-index:50; border-right: 5px solid #;padding: 5px 0;}
.nivo-caption p {padding:0 20px;margin:0;font-size:14px;}
.nivo-caption a {display:inline !important;}
.nivo-html-caption {display:none;}
/* Direction nav styles (e.g. Next & Prev) */
.nivo-directionNav a {position:absolute;top:45%;z-index:99;cursor:pointer;}
.nivo-prevNav {left:0px;}
.nivo-nextNav {right:0px;}
/*============================*/
/*=== Custom Slider Styles ===*/
/*============================*/
.slider {width:100%;}
.slider img {position:absolute;top:0px;left:0px;display:none;}
.slider a {border:0;display:block;}
.nivo-controlNav {display:none;}
.nivo-directionNav a {display:block;width:31px;height:34px;background:url(http://media.tumblr.com/tumblr_m5sfxp36Ay1r5ehrc.png) no-repeat;text-indent:-9999px;border:0;
}
a.nivo-nextNav {background-position:-30px 0;right:15px;}
a.nivo-prevNav { left:15px;}
.nivo-caption {font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;}
.nivo-caption a {color:#efe9d1; text-decoration:underline;}
Onde tem background:#000; color:#fff; é a cor do caption, você pode mudar como preferir. Vamos agora ao HTML, ou seja, as divs pra que o slide apareça. Bom, agora é o simples.
<div id="slide"><div id="slider"> <a href="OLINK" target="_blank"><img src="http://static.tumblr.com/ifqwhnb/P5Qm20oxb/untitled-9.png" width="763" height="277" /></a> <a href="OLINK" target="_blank"><img src="http://static.tumblr.com/ifqwhnb/PdVm20p29/untitled-9.png" width="763" height="277" /></a> <a href="OLINK" target="_blank"><img src="http://static.tumblr.com/ifqwhnb/Kbhm20p8r/untitled-9.png" title="Com Caption :D"width="763" height="277" /></a> </div></div>
Você sempre precisa definir o valor da altura e largura da sua imagem, ou seja, onde tem width=”763” height=”277” você pode colocar o valor da sua imagem. Esse código ai, foi o que eu usei na página de visualização.
Para posicionar onde você quer, você precisa usar um div position, outra div antes de <div id=”slide”>. Não esqueça nunca fechear a div, okay?
Qualquer coisa, só gritar aqui que explico qualquer dúvida.

Theme feito exclusivamente para o 



HTML, CSS e todo o design.