bxslider 寻呼机活动状态在单击另一个寻呼机后不会改变答案

【问题标题】：bxslider pager active state does not change after clicking another pagerbxslider 寻呼机活动状态在单击另一个寻呼机后不会改变
【发布时间】：2016-04-21 15:48:46
【问题描述】：

我的滑块使用jQuery bsSlider。幻灯片在页面加载后自动开始。问题是，在开始幻灯片放映后，如果我单击一个寻呼机/点，则该寻呼机/点在下一个滑块或上一个滑块出现后仍保持活动状态！

例如，想象一下，有三个滑块。一开始，第一个滑块是可见的，所以第一个点是活动的，如果我点击第二个点，第二个滑块会来，第二个点会变得活跃。但是，从那里开始，当 第三张幻灯片 自动出现时，第二和第三个点 都保持活动状态！我希望，您可以通过查看屏幕截图来想象问题：

js代码：

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

如何解决？

Fiddle Work

【问题讨论】：

这仅在我单击其中一个点时发生，因此滑块有两个事件，一个由auto 触发，另一个由click 触发。如果我不点击导航点，滑块会正常工作

标签： jquery bxslider

【解决方案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;
}

【讨论】：

我是这样解决的：.bx-wrapper .bx-pager.bx-default-pager a:focus {background-color: #ccc;} .bx-wrapper .bx-pager。 bx-default-pager a.active:focus { 背景色：#000; } jsfiddle.net/learner73/ku39cpdx/14

【解决方案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;

[您在 javascript 代码中的 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

【讨论】：