Verwenden von jQuery Data zum Erkennen einer aktiven Folie und Ausführen von Funktion

Question

Hallo Ich benutze jQuery, um eine benutzerdefinierte Navigation zu machen, aber ich kann nicht herausfinden, wie die aktive Folie zu erkennen und einen aktiven Zustand auf die Schaltfläche für diese Folie anwenden.

ich ein Setup jsfiddle besser zu zeigen, was ich versuche, die gleiche Funktion wie die Punkte/Pager in dem Schieber zu tun, im Grunde aber auf die Taste 1, 2 und 3.

Im neu auf die .data Teil von jQuery: P

http://jsfiddle.net/unknown601/yxErC/17/

<div class="number" id="" data-slider="0"> 
    Button 1 
</div> 
<div class="number" id="" data-slider="1"> 
    Button 2 
</div> 
<div class="number" id="" data-slider="2"> 
    Button 3 
</div> 

<ul class="slider"> 
    <li data-current="1"> 
    <img src="http://placehold.it/350x150"> 
    <p>Slider-1</p> 
    </li> 

    <li data-current="2"> 
    <img src="http://placehold.it/350x150"> 
    <p>Slide 2</p> 
    </li> 

    <li data-current="3"> 
    <img src="http://placehold.it/350x150"> 
    <p> Slide 3</p> 
    </li> 

</ul> 



    #current { 
    color: red; 
    font-weight: bold; 
} 

.number:hover { 
    color: blue; 
    cursor: pointer; 
} 

erhielt die Tasten, um den Schieber zu steuern :)

var Slider; 

$(document).ready(function() { 
    Slider = $('.slider').bxSlider({ 
    pager: true 
    }); 
    $('.number').on('click', function(e) { 
    e.preventDefault(); 
    var index = $(this).attr('data-slider'); 
    Slider.goToSlide(index); 
    }); 
}); 

Answer 1

Working fiddle.

Sie könnten Klasse angeklickten Schaltfläche hinzufügen und sie von anderen Knopf im Click-Ereignis entfernen:

$('.number').on('click', function(e) { 
    e.preventDefault(); 
    var index = $(this).attr('data-slider'); 

    $('.number').removeClass('active'); //Remove class active from all buttons 
    $(this).addClass('active'); //Add active class to the clicked one 

    Slider.goToSlide(index); 
}); 

Weil Sie versuchen, Tasten aktiv werden müssen, den Schieber in Bezug Sie onSlideBefore() Rückruf add/remove verwenden könnte aktive Klasse auf Tasten basierend auf data-slider:

Slider = $('.slider').bxSlider({ 
    pager: true, 
    onSlideBefore: function($slideElement, oldIndex, newIndex) { 
     $('.number').removeClass('active'); 
     $('.number[data-slider="'+newIndex+'"]').addClass('active'); 
    } 
}); 

Hoep, das hilft.

Answer 2

Möchten Sie eine benutzerdefinierte Schaltfläche "Vorherige/Nächste Seite" erstellen? Wenn dies der Fall ist, können Sie die aktuelle (aktive) Seite aufrufen, indem Sie getCurrentSlide() anrufen. Ausführliche Informationen finden Sie in der Dokumentation unter http://bxslider.com/option. Und wenn Sie nur wollen, Navigationssteuerung außerhalb des Schlittens machen, gibt es ein Beispiel auf bxslider Seite: http://bxslider.com/examples/custom-next-prev-selectors

Answer 3

Versuchen:

var Slider; 
var minState = 0; 
var maxState = 2; 
var currState = 0; 

$(document).ready(function() { 
    Slider = $('.slider').bxSlider({ 
    pager: true 
    }); 

    var changeActiveLink = function() { 
    $('.active').removeClass('active'); 
    $('.number[data-slider='+currState+']').addClass('active'); 
    } 
    $('.number').on('click', function(e) { 
    e.preventDefault(); 
    var index = $(this).attr('data-slider'); 
    Slider.goToSlide(index); 
    currState = index; 
    changeActiveLink(); 
    }); 
    $('.bx-pager-link').on('click', function(e){ 
    e.preventDefault(); 
    var activeButton = $(this).data('slide-index'); 
    currState = activeButton; 
    changeActiveLink(); 
    }); 
    $('.bx-next').on('click', function(e){ 
    e.preventDefault(); 
    if(currState == maxState) { 
     currState = 0; 
    } else { 
     currState++; 
    } 
    changeActiveLink(); 
    }); 
    $('.bx-prev').on('click', function(e){ 
    e.preventDefault(); 
    if(currState == 0) { 
     currState = maxState; 
    } else { 
     currState--; 
    } 
    changeActiveLink(); 
    }) 

}); 

http://jsfiddle.net/yxErC/32/