jquery bxslider slider with custom pager - auto play not adding active class to pager?

Question

I've created a jsFiddle to demonstrate my issue. http://jsfiddle.net/motocomdigital/NXzcx/3/

OVERVIEW

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.

I've done a little searching around and stumbled across jQuery bxslider - the documentation looked good so I decided to give it ago.

I'm trying to create a similar slider to the one featured on the google shopping page. I can appreciate that this jQuery bxslider plugin might no be able to achieve the exact transitions between pagers.

THE PROBLEM

Please see my http://jsfiddle.net/motocomdigital/NXzcx/3/ for reference.

As per the google shopping page example, I've managed to get the slideshow to automatically play, but it does not seem to add the .page-active 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.

Any ideas how I can achieve this?

I followed this demo here... http://bxslider.com/examples/thumbnails-pager-method-1

THE 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');

});

Any help would most awesome! Or if you can suggest a more versatile jQuery plugin then great. Thanks

Answer 1

with the new version the problem will be solved. we can use :

pagerCustom: $('.banner-pager')

example page from plugin site here is the example Thumbnail pager - method 1

and here is your example