jquery bxslider slider with custom pager - auto play not adding active class to pager?
<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>
