单击另一个寻呼机后，bxslider寻呼机活动状态不会发生变化

Question

我正在使用jQuery bsSlider作为我的滑块。页面加载后幻灯片将自动启动。问题是，在开始幻灯片放映后，如果我点击寻呼机/点，那个寻呼机/点也会在下一个滑块或上一个滑块进入后的某个时间保持活动状态！

例如，想象一下，有三个滑块。首先，第一个滑块是可见的，因此第一个点处于活动状态，如果我点击第二个点，第二个滑块将来，第二个点将变为活跃状态。但是，从那里，当第3张幻灯片自动出现时， 第2和第3点 都保持活跃状态​​！我希望，您可以通过查看屏幕截图来想象这个问题：

js code：

$('.bxslider').bxSlider();

如何解决？

Fiddle Work

Answer 1

你必须在css文件中注释这一行：

.bx-wrapper .bx-pager.bx-default-pager a:hover,
.bx-wrapper .bx-pager.bx-default-pager a.active
/* .bx-wrapper .bx-pager.bx-default-pager a:focus */ {
background: #000;
}

Answer 2

这个问题是“jquery.bxslider.css”中的css样式问题 在css代码中，您可以删除或评论1行代码

并添加回调函数您的JavaScript代码

这是示例代码

[jquery.bxslider.css]

/*.bx-wrapper .bx-pager.bx-default-pager a:hover,*/ //<<< remove css or comment
.bx-wrapper .bx-pager.bx-default-pager a.active {
/* background: #000; */
background: url(images/custom_pager.png) no-repeat 0 -20px;

[你的jx代码中的bxslider初始化]

$('.bxslider').bxSlider({
    /* options */
    //...
    //...
    onSlideAfter: function($slideElement, oldIndex, newIndex) {
        $(".bx-pager-item a").eq(oldIndex).removeClass("active");
        $(".bx-pager-item a").eq(newIndex).addClass("active");
    }
});

你可以查看bxslider的选项

  http://bxslider.com/options

中的