Slider.

[Pedro Alonso 0]

Então, eu to tentando implementar o NivoSlider no meu site, só que onde tinha as "bolinhas", aparece números. Aonde tinha as setas (< Next/Prev >), aparece next/prev :C, alguém com um bom coração me ajuda.

[Wanderson Valerio 102]

Vá até o CSS do NivoSlider, e onde existem os background-images, coloque os caminhos corretos nas imagens de background no CSS, isso deve resolver.

[Pedro Alonso 0]

Não tem background-images :/

Uma imagem de como tá:

 

CSS do NivoSlider.

 

/*
* jQuery Nivo Slider v3.0.1
* http://nivo.dev7studios.com
*
* Copyright 2012, Dev7studios
* Free to use and abuse under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
*/

/* The Nivo Slider styles */
.nivoSlider {
position:relative;
width:100%;
height:auto;
overflow: hidden;
}
.nivoSlider img {
position:absolute;
top:0px;
left:0px;
}
.nivo-main-image {
display: block !important;
position: relative !important; 
width: 100% !important;
}

/* 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%;
top:0;
}
.nivo-box {
display:block;
position:absolute;
z-index:5;
overflow:hidden;
}
.nivo-box img { display:block; }

/* Caption styles */
.nivo-caption {
position:absolute;
left:0px;
bottom:0px;
background:#000;
color:#fff;
width:100%;
z-index:8;
padding: 5px 10px;
opacity: 0.8;
overflow: hidden;
display: none;
-moz-opacity: 0.8;
filter:alpha(opacity=8);
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box;    /* Firefox, other Gecko */
box-sizing: border-box;         /* Opera/IE 8+ */
}
.nivo-caption p {
padding:5px;
margin:0;
}
.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:9;
cursor:pointer;
}
.nivo-prevNav {
left:0px;
}
.nivo-nextNav {
right:0px;
}
/* Control nav styles (e.g. 1,2,3...) */
.nivo-controlNav {
text-align:center;
	padding: 12px 0;
}
.nivo-controlNav a {
cursor:pointer;
}
.nivo-controlNav a.active {
font-weight:bold;
}

[André do Vale 76]

Copia o CSS da página então, mais as imagens, claro. Por exemplo, a classe .nivo-controlNav a:

 

.theme-default .nivo-controlNav a {
 display: block;
 width: 22px;
 height: 22px;
 background: url(bullets.png) no-repeat;
 text-indent: -9999px;
 border: 0;
 margin-right: 3px;
 float: left;
}

[Pedro Alonso 0]

Já tentei fazer isso daí, mais fica tudo desconfigurado. HTML não é meu forte :S

[André do Vale 76]

Tava navegando pelo site do produto, e lá tem a solução almejada: http://nivo.dev7studios.com/support/advanced-tutorials/using-themes-with-the-nivo-slider/ :thumbsup:

[Pedro Alonso 0]

Copia o CSS da página então, mais as imagens, claro. Por exemplo, a classe .nivo-controlNav a:

 

.theme-default .nivo-controlNav a {
 display: block;
 width: 22px;
 height: 22px;
 background: url(bullets.png) no-repeat;
 text-indent: -9999px;
 border: 0;
 margin-right: 3px;
 float: left;
}

 

 

Tava navegando pelo site do produto, e lá tem a solução almejada: http://nivo.dev7studios.com/support/advanced-tutorials/using-themes-with-the-nivo-slider/ :thumbsup:

 

Desconfigurou a parada toda ;s, e continuou aparecendo Next/Prev 1,2,3,4,5.

 

Agora eu consegui colocar o que você falou em cima, já tá aparecendo as "bolinhas", só que não aparece qual é a selecionada, agora e tentar colocar nos arrows. vlw.

[Pedro Alonso 0]

Aeeew, consegui colocar as bolotas, agora falta colcoar só os arrows :33. E eu tenho uma dúvida, como eu faço um "float:center"?

[André do Vale 76]

Aeeew, consegui colocar as bolotas, agora falta colcoar só os arrows :33. E eu tenho uma dúvida, como eu faço um "float:center"?

 

Se o elemento for block, um "margin: 0 auto" deve resolver.

 

Caso seja inline, ou inline-block, além do "margin: 0 auto", você terá de declarar para o pai dele um "text-align: left".