<div class="thumbs">
  <a href=""></a>
  <a href=""></a>
  <a href=""></a>
  <a href=""></a>
</div>

  .thumbs a {
    display:block;
    width:150px;
    height:100px;

    float:left;
    background-image:url('images/m2g_logo.png');
}

$(function(){
      $('#slider1').bxSlider({
        pager: true,
        buildPager: function(slideIndex){
          switch (slideIndex){
            case 0:
              return '<a href=""><img src="" /></a>';
            case 1:
              return '<a href=""><img src="" /></a>';
            case 2:
              return '<a href=""><img src="" /></a>';
            case 3:
              return '<a href=""><img src="" /></a>';
          }
        }
      });
    });

$(function(){
      $('#slider1').bxSlider({
        pager: true,
        buildPager: function(slideIndex){
              return '<a href=""><div></div></a>';
        }
      });
    });

a.pager-active > div{
    background: url("pager_selected.png") no-repeat scroll !important;
    display:inline;
    outline:none;
}

.bx-pager a > div{
    display:inline;
    padding:2px; /*set this to half the width of your image*/
    background: url("pager_unselected.png") no-repeat scroll;
    position:relative;
    top:10px;
    outline:none;
}

.bx-pager{
    text-align:center;
 }