bxSlider - Remove Numbers from Pager?

Question

I'm using bxSlider from here: http://bxslider.com/examples/auto-show-pager and I have it working fine, but i want bullets to be used instead of the numbers so I added this to the css file:

    .bx-pager a{
  background: transparent url('/src/images/bullets.png') 0 0 no-repeat;
  padding: 0 4px;
}
.bx-pager a.pager-active{
  background-position: 0 -58px;
}

It works fine, but I can't seem to figure out how to remove the images.. so I'm left with this: http://cl.ly/223N0h251T0T251S2U2T

any ideas?

Answer 1

try this,

.bx-pager a{
  background: transparent url('/src/images/bullets.png') 0 0 no-repeat;
  padding: 0 4px;
  color: transparent;
  }
.bx-pager a.pager-active{
  background-position: 0 -58px;
  color: transparent;

  }

Change is here color: transparent;

Answer 2

You can try this way:

.bx-pager a {
  background: transparent url('/src/images/bullets.png') 0 0 no-repeat;
  padding: 0 4px;
  text-indent: -9999px;
  }
.bx-pager a.pager-active{
  background-position: 0 -58px;
  }