bxslider Pager aktiven Zustand ändert sich nicht nach dem Klicken auf einen anderen Pager

Question

Ich verwende jQuery bsSlider für meine Slider. Die Diashow startet automatisch nach dem Laden der Seite. Das Problem ist, dass nach dem Start der Diashow, wenn ich auf einen Pager/Punkt klicke, dieser Pager/Punkt für einige Zeit nach dem Kommen des nächsten Sliders oder vorherigen Sliders auch aktiv bleibt!

Zum Beispiel, Imagine, gibt es drei Schieberegler. Zunächst 1. Schieber sichtbar ist, so ersten Punkt aktiv ist, wenn ich klicken zweiten Punkt, 2. Schieber kommen und zweiten Punkt aktiv wird. Aber von dort, wenn 3. Folie kommen automatisch, beide 2. und 3. Punkt bleiben aktiv! Ich hoffe, können Sie das Problem vorstellen, durch den Screenshot zu sehen:

js Code:

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

Wie es zu beheben?

Fiddle Work

Answer 1

dieses Problem ist CSS-Style Problem in "jquery.bxslider.css".
in CSS-Code, können Sie 1 Zeile Code

löschen oder kommentieren und Callback-Funktion Ihre Javascript-Code

hier ist Beispielcode

[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; 

hinzufügen

[Ihre Initialisierung für bxslider in JavaScript-Code]

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

können Sie das bxslider die Option Ansicht

in http://bxslider.com/options

Answer 2

Sie haben diese Zeile in der CSS-Datei Kommentar:

.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; 
}