Probleme mit jQuery Slider

Question

Ein paar Probleme mit einem jquery Slider, die ich versuche zu machen.

Auf JSF: jsfiddle.net/0hq91y5v/

ich fünf Punkt li Links haben, die ich zu jeder Folie zu verbinden bin versucht. Ich möchte es natürlich so machen, dass das Klicken auf jede Schaltfläche die Klasse in activeDot ändert und die Klasse von der aktuellen aktiven Schaltfläche entfernt. Ich habe das in jQuery versucht, aber es funktioniert nicht.

Ich habe auch etwas Code hinzugefügt, um zu versuchen und verblassen zwischen den verschiedenen Folien nach dem Klicken auf jede Schaltfläche mit der gleichen Methode, indem Sie die activeSlide-Klasse für jeden, aber dies wird auch nicht funktionieren.

Schließlich, mit Blick auf den Code, den ich verwendet habe, was wäre eine bessere/mehr semantische Methode zum Hinzufügen und Entfernen der ActiveSlide-Klasse beim Klicken auf die zugehörige Schaltfläche, anstatt zu tun, wie ich habe und eine Funktion für jeden Taste?

Answer 1

Sie müssen einige Änderungen an Ihrem aktuellen jQuery Code und Markup vornehmen.

einen Blick auf fiddle

dieser Code Sie das Verhalten Sie erwarten erreichen helfen, können Sie fadeIn() und fadeOut() hinzufügen, wie Sie benötigen.

$(document).ready(function() { 

    var activeSlide = $('#homeSlider > .activeSlide'); 
    var activeDot = $('#homeSliderNav > ul > li.activeDot'); 

    $('#homeSliderNav > ul > li').click(function() { 
     $('#homeSliderNav > ul > li').removeClass('activeDot'); 
     $(this).addClass('activeDot'); 
     $('.slide').removeClass('activeSlide'); 
     var slide = this.getAttribute('data-id'); 
     $('#' + slide).addClass('activeSlide'); 

    }); 

});