jQuery(document).ready(function(){
  var slider = $('.bxslider').bxSlider({
    auto: true,
    mode: 'fade',
    pager: false,
    onSlideBefore: function(obj, oldSlide, currentSlide){
      $('.thumbs a').removeClass('pager-active');
      $('.thumbs a').eq(currentSlide).addClass('pager-active');
    }
  });

  // assign a click event to the external thumbnails
  $('.thumbs a').click(function(){
   var thumbIndex = $('.thumbs a').index(this);
    // call the "goToSlide" public function
    slider.goToSlide(thumbIndex);
 
    // remove all active classes
    $('.thumbs a').removeClass('pager-active');
    // assisgn "pager-active" to clicked thumb
    $(this).addClass('pager-active');
    // very important! you must kill the links default behavior
//    return false;
  });

  // assign "pager-active" class to the first thumb
  $('.thumbs a:first').addClass('pager-active');
});