Benutzerdefinierte Schieberegler Ausgabe

Question

Ich habe einen benutzerdefinierten Schieberegler mit objektorientiertem Javascript geschrieben, wie unten zu sehen. Ich habe das Modul in eine Geige hier https://jsfiddle.net/5z29xhzg/7/ aufgenommen. Nach dem Verschieben nach links oder rechts werden die Folien geklont und entsprechend angehängt, so dass der Benutzer den Schieberegler beliebig oft durchlaufen kann. Es gibt eine separate Funktion zum Steuern der aktiven Registerkarte. Bei getrennter Verwendung funktionieren die Tabs und der Slider perfekt, aber ich habe ein Problem, wenn beide zusammen verwendet werden. Klicken Sie zum Beispiel auf "blaue Schürze" und dann auf den linken Schiebeknopf (der Sie zur "dave & butters" -Scheibe bringen soll), gelangen Sie zur Glückselerrutsche. Oder klicken Sie auf die letzte Folie mit den Tabs und klicken Sie dann auf die nächste Schaltfläche zeigt nichts an. Kann jemand auf den Fehler in dem Objekt hinweisen, das ich geschrieben habe? Jede Hilfe wird sehr geschätzt!

GiftSlider = { 
    prev: '.slider-container .prev', 
    next: '.slider-container .next', 
    slide: '.slide', 
    slidesContainer: '#slides', 
    navLink: '.gift-nav li a', 
    init: function() { 
     // Initialize nextSlide function when clicking right arrow 
     $(this.next).click(this.nextSlide.bind(this)); 
     $(this.next).click(this.activeTabs.bind(this)); 
     // Initialize prevSlide function when clicking left arrow 
     $(this.prev).click(this.prevSlide.bind(this)); 
     $(this.prev).click(this.activeTabs.bind(this)); 
     // Initialize toggleSlides and activeTab functions when clicking nav links 
     $(this.navLink).click(this.toggleSlides.bind(this)); 
     $(this.navLink).click(this.activeTabs.bind(this)); 
    }, 
    nextSlide: function(e) { 
     // Prevent default anchor click 
     e.preventDefault(); 
     // Set the current slide 
     var currentSlide = $('.slide.current'); 
     // Set the next slide 
     var nextSlide = $('.slide.current').next(); 
     // remove the current class from the current slide 
     currentSlide.removeClass("current"); 
     // Move the current slide to the end so we can cycle through 
     currentSlide.clone().appendTo(this.slidesContainer); 
     // remove the last slide so there is not two instances 
     currentSlide.remove(); 
     // Add current class to next slide to display it 
     nextSlide.addClass("current"); 
    }, 
    prevSlide: function(e) { 
     // Prevent defaulct anchor click 
     e.preventDefault(); 
     // Set the current slide 
     var currentSlide = $('.slide.current'); 
     // Set the last slide 
     var lastSlide = $('.slide').last(); 
     // remove the current class from the current slide 
     currentSlide.removeClass("current"); 
     // Move the last slide to the beginning so we can cycle through 
     lastSlide.clone().prependTo(this.slidesContainer); 
     // remove the last slide so there is not two instances 
     lastSlide.remove(); 
     // Add current class to new first slide 
     $('.slide').first().addClass("current"); 
    }, 
    toggleSlides: function(e) { 
     // Prevent defaulct anchor click 
     e.preventDefault(); 
     var itemData = e.currentTarget.dataset.index; 
     var currentSlide = $('.slide.current'); 
     currentSlide.removeClass("current"); 
     newSlide = $('#slide-' + itemData); 
     // currentSlide.clone().appendTo(this.slidesContainer); 
     newSlide.addClass("current"); 
     // console.log(newSlide); 
    }, 
    activeTabs: function() { 
     // *** This could be much simpler if we didnt need to match the slider buttons 
     // *** up with nav tabs. Because I need to track the slider as well, I have 
     // *** made this its own function to be used in both instances 
     // get the active slide 
     var activeSlide = $('.slide').filter(':visible'); 
     // get the active slide's id 
     var currentId = activeSlide.attr('id'); 
     // grab just the number from the active slide's id 
     var currentNum = currentId.slice(-1); 
     // remove any active gift-nav links 
     $(this.navLink).removeClass("active"); 
     // get the current tab by matching it to the current slide's id 
     var currentTab = $('.gift-nav li a[data-index="' + currentNum + '"]'); 
     // make that active 
     currentTab.addClass("active"); 
    } 
} 

$(document).ready(function(){ 

    // Init our objects 
    GiftSlider.init(); 

}); 

Answer 1

Der Fehler scheint in toggleSlides zu sein.

EDIT: Folgende nicht

Beim Laden der Seite nicht funktioniert, currentSlide Rutsche ist 1. Nun sagen Sie die 3. Registerkarte. An diesem Punkt müssen Sie die Folie vor der 3. Registerkarte verschieben, d. H. Die 2. Registerkarte bis zum Ende. Wenn Sie currentSlide.clone().appendTo(this.slidesContainer); sagen, verschieben Sie stattdessen die erste Folie an das Ende. Deshalb, egal auf welche Registerkarte Sie geklickt haben, wenn Sie auf die vorherige Schaltfläche geklickt haben, ging es zur ersten Folie.

Wenn Sie stattdessen newSlide.prev().clone().appendTo(this.slidesContainer); tun, scheint der Code gut zu funktionieren.

toggleSlides: function(e) { 
    // Prevent defaulct anchor click 
    e.preventDefault(); 
    var itemData = e.currentTarget.dataset.index; 
    var currentSlide = $('.slide.current'); 
    currentSlide.removeClass("current"); 
    newSlide = $('#slide-' + itemData); 
    //currentSlide.clone().appendTo(this.slidesContainer); 
    newSlide.prev().clone().appendTo(this.slidesContainer); 
    newSlide.addClass("current"); 
    //console.log("In toggle slide: "+newSlide.next().attr("id")); 
    //console.log("In toggle slide: "+newSlide.prev().attr("id")); 
    //console.log("In toggle slide: "+$('.slide.current').next().attr("id")); 
}, 

Dies scheint zu funktionieren. Schau es dir unter https://jsfiddle.net/rfgnm992/1/ an. Ihr nextSlide und previousSlide scheint die aktuelle Folie am Anfang zu halten. toggleSlides tat das nicht.

toggleSlides: function(e) { 
     // Prevent defaulct anchor click 
     e.preventDefault(); 
     var itemData = e.currentTarget.dataset.index; 
     var currentSlide = $('.slide.current'); 
     currentSlide.removeClass("current"); 
     newSlide = $('#slide-' + itemData); 
     //keep new slide at the beginning and move the preceding slides to the end 
     newSlide.nextAll().addBack().prependTo(this.slidesContainer); 
    //console.log("NewSlide.next: "+newSlide.next().attr('id') + "NewSlide.next.next: "+newSlide.next().next().attr('id')+"newSlide.next.next.next: "+newSlide.next().next().next().attr('id')); 
     //currentSlide.clone().appendTo(this.slidesContainer); 
     newSlide.addClass("current"); 
     // console.log(newSlide); 
    }, 

Answer 2

Entschuldigung ich kam etwas später als erwartet zurück. Ich habe dort nachgesehen. Denke, du verkomplizierst Dinge mit der ganzen Append/Prepend/Cloning-Sache.

Ich habe es funktioniert, aber es ist immer noch ein kleiner Fehler darin. Es wechselt Grand, Forward und Back und die richtigen Links heben hervor, wenn Sie jedoch auf einen zufälligen Link klicken, wird dieser nicht sofort hervorgehoben, aber wenn Sie auf die Next/Prev-Buttons klicken, werden die relevanten Links aus dem ausgewählten Bild hervorgehoben. Es ist sicherlich ein Fortschritt !!! Ich bin sicher, ich könnte es mit einem anderen Blick ausrollen, aber es ist 2 Uhr morgens, und ich habe es schon anderthalb Stunden lang angeschaut!

Hier ist ein fiddle und ein Ausschnitt (js nur cos mein msg zu lang war - ich nehme nur den Absatz am Ende des Inhalts, keine CSS-Änderungen)

GiftSlider = { 
    prev: '.slider-container .prev', 
    next: '.slider-container .next', 
    slide: '.slide', 
    slidesContainer: '#slides', 
    navLink: '.gift-nav li a', 
    init: function() { 
     // Initialize nextSlide function when clicking right arrow 
     $(this.next).click(this.nextSlide.bind(this)); 
     $(this.next).click(this.activeTabs.bind(this)); 
     // Initialize prevSlide function when clicking left arrow 
     $(this.prev).click(this.prevSlide.bind(this)); 
     $(this.prev).click(this.activeTabs.bind(this)); 
     // Initialize toggleSlides and activeTab functions when clicking nav links  
     $(this.navLink).click(this.activeTabs.bind(this)); 
    $(this.navLink).click(this.toggleSlides.bind(this)); 
    }, 
    nextSlide: function(e) { 
     // Prevent default anchor click 
     e.preventDefault(); 
     // Set the current slide 
     var currentSlide = $('.slide.current'); 
     // Set the next slide 
    var currentId = currentSlide.attr('id'); 
    var currNum = (currentId.slice(-1)); 
    var nextNum; 
    var increment = 1; 
    if (currNum == 4){ 
     nextNum = 1; 
    } 
    else 
    { 
     nextNum = parseInt(currNum) + parseInt(increment) ; 
    } 
     var nextSlide = $('#slide-' + nextNum); 
     // remove the current class from the current slide 
     currentSlide.removeClass("current"); 
     // Add current class to next slide to display it 
     nextSlide.addClass("current"); 
    // remove the last slide so there is not two instances 
    }, 
    prevSlide: function(e) { 
     // Prevent default anchor click 
     e.preventDefault(); 
     // Set the current slide 
     var currentSlide = $('.slide.current'); 
     // Set the last slide 
    var currentId = currentSlide.attr('id'); 
    var currNum = (currentId.slice(-1)); 
    var prevNum; 
    var decrement =1; 
    if (currNum == 1){ 
     prevNum = 4; 
    } 
    else 
    { 
     prevNum = parseInt(currNum) - parseInt(decrement) ; 
    } 
     var prevSlide = $('#slide-' + prevNum); 
    // Move the last slide to the beginning so we can cycle through 
     currentSlide.removeClass("current"); 
    // Add current class to new first slide 
     prevSlide.addClass("current"); 
    }, 
    toggleSlides: function(e) { 
     // Prevent defaulct anchor click 
     e.preventDefault();  
    var itemData = e.currentTarget.dataset.index; 
     var currentSlide = $('.slide.current'); 
     currentSlide.removeClass("current"); 
     newSlide = $('#slide-' + itemData); 
     newSlide.addClass("current"); 

    }, 
    activeTabs: function() { 
     var activeSlide = $('.slide').filter('.current'); 
     // get the active slide's id 
     var currentId = activeSlide.attr('id'); 
     // grab just the number from the active slide's id 
     var currentNum = currentId.slice(-1); 
     // remove any active gift-nav links 
     $(this.navLink).removeClass("active"); 
     // get the current tab by matching it to the current slide's id 
     var currentTab = $('.gift-nav li a[data-index="'+ currentNum + '"]'); 
     // make that active 
     currentTab.addClass("active"); 
    } 
} 

$(document).ready(function(){ 

    // Init our objects 
    GiftSlider.init(); 

});