bx_slider css about bxslider-3

[RyanBrackett]

Hey man, I had the same issue. I was able to remedy the problem by going into jquery.bxSlider.js and adding a <span> around the pager number inside of the <a> tag. In my CSS document, I simply used {display: none;} on that <span> and it worked great. Basically, you're hiding the <span> while the <a> tag still shows. You can put a background color or an image behind the <a> tag. Here's how I did it:

Search in jquery.bxSlider.js for this
<a href="" class="pager-link pager-'+i+'">'+i+'</a>

Then, replace that with this
<a href="" class="pager-link pager-'+i+'"><span>'+i+'</span></a>

In your CSS, do this
.pager-link { padding: 0px 10px; background-color:#0066FF; } .pager-link span { display: none; } .pager-active { background-color: red;}

I hope this helps!

RB :-)

[NunoBentes]

Hello Ryan

Excelent!!! Thanks for your help!!! I had a problem similar of Josh Davies!!

Just a sugestion:

In your CSS, do this
.pager-link {} /* Delete paddings to avoid extra spaces
.pager-link span { display: none; }
.pager-active { background-color: red;}

In this part of the current CSS, do this (then all you need to do is setup width and height according your background image size!!! I think it´s easier!!! )
.bx-pager a {
margin-right: 5px;
color: #fff;
display:inline-block; /* Add this line /
width:20px; / Add this line /
height:20px; / Add this line _/
/_padding: 3px 8px 3px 6px; /* Remove this line /
font-size: 12px;/ /* Remove this line */
zoom:1;
background: url(bx_styles/gray_pager.png) no-repeat 0 -20px;
text-decoration:none;
}

:)

I apreciate a lot your help finding that bit of code inside of jquery.bxSlider.js.

Regards
Nuno