带自定义寻呼机的jquery bxslider滑块 - 自动播放不向寻呼机添加活动类？

Question

我已经创建了一个jsFiddle来演示我的问题.http://jsfiddle.net/motocomdigital/NXzcx/3/

概述

我刚刚开始开发一个网站,我想使用一个多功能的jQuery插件来用于网站上的所有滑块和代码,而不是多个jQuery插件.

我做了一些搜索并偶然发现了jQuery bxslider - 文档看起来不错,所以我决定先放弃它.

我正在尝试创建一个与谷歌购物页面上的功能相似的滑块.我可以理解这个jQuery bxslider插件可能无法实现寻呼机之间的精确转换.

问题

请参阅我的http://jsfiddle.net/motocomdigital/NXzcx/3/以供参考.

根据谷歌购物页面的例子,我设法让幻灯片显示自动播放,但它似乎没有将该.page-active类添加到当前的寻呼机？...当您选择寻呼机时,它不会继续自动播放？文档似乎没有解释这一点.

我有什么想法可以达到这个目的吗？

我在这里看了这个演示... http://bxslider.com/examples/thumbnails-pager-method-1

代码

$(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');

});

任何帮助都会非常棒!或者,如果你可以建议一个更通用的jQuery插件,那么很棒.谢谢

Answer 1

有回调函数

onAfterSlide: function(currentSlideNumber, totalSlideQty, currentSlideHtmlObject){  
    $('.banner-pager a.pager-active').removeClass('pager-active').next().addClass('pager-active');  
}

这应该可以解决类 pager-active 的自动切换问题。此外，每次单击后，您都必须再次开始幻灯片放映，以解决自动播放问题

slider.reloadShow();   

仅在单击处理程序内。