title: jquery bxslider slider with custom pager - auto play not adding active class to pager?
body: <p>I've created a <a href="http://jsfiddle.net/motocomdigital/NXzcx/3/" rel="nofollow">jsFiddle</a> to demonstrate my issue. <a href="http://jsfiddle.net/motocomdigital/NXzcx/3/" rel="nofollow">http://jsfiddle.net/motocomdigital/NXzcx/3/</a></p>
  
  <p><br /></p>
  
  <p><strong>OVERVIEW</strong></p>
  
  <p>I'm just starting to develop a website, and I want to use a versatile jQuery plugin to use for all my sliders and tickers on the site, instead of multiple jQuery plugins.</p>
  
  <p>I've done a little searching around and stumbled across <a href="http://bxslider.com/" rel="nofollow">jQuery bxslider</a> - the documentation looked good so I decided to give it ago.</p>
  
  <p>I'm trying to create a similar slider to the one featured on the <a href="http://www.google.com/shopping" rel="nofollow">google shopping</a> page. I can appreciate that this <a href="http://bxslider.com/" rel="nofollow">jQuery bxslider plugin</a> might no be able to achieve the exact transitions between pagers.</p>
  
  <p><br /></p>
  
  <p><strong>THE PROBLEM</strong></p>
  
  <p>Please see my <a href="http://jsfiddle.net/motocomdigital/NXzcx/3/" rel="nofollow">http://jsfiddle.net/motocomdigital/NXzcx/3/</a> for reference.</p>
  
  <p>As per the <a href="http://www.google.com/shopping" rel="nofollow">google shopping</a> page example, I've managed to get the slideshow to automatically play, but it does not seem to add the <code>.page-active</code> class to current pager? ...and when you select the pager, it does not continue to automatically play? And the documentation does not seem to explain this.</p>
  
  <p>Any ideas how I can achieve this?</p>
  
  <p>I followed this demo here... <a href="http://bxslider.com/examples/thumbnails-pager-method-1" rel="nofollow">http://bxslider.com/examples/thumbnails-pager-method-1</a></p>
  
  <p><br /></p>
  
  <p><strong>THE CODE</strong></p>
  
  <pre><code>$(function() {
  
      // assign the slider to a variable
      var slider = $('#banner-slider').bxSlider({
          controls: false,
          mode: 'vertical',
          auto: true
      });
  
      // assign a click event to the external thumbnails
      $('.banner-pager a').click(function() {
          var thumbIndex = $('..banner-pager a').index(this);
          // call the "goToSlide" public function
          slider.goToSlide(thumbIndex);
  
          // remove all active classes
          $('.banner-pager 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
      $('.banner-pager a:first').addClass('pager-active');
  
  });
  </code></pre>
  
  <p><br /></p>
  
  <p>Any help would most awesome! Or if you can suggest a more versatile jQuery plugin then great. Thanks</p>