Glide.js - Deaktivieren/Aktivieren Zurück/Weiter Tasten

Question

Verwenden Glide.js (hier ist die documentation section) Ich konnte nicht die Prev-Schaltfläche deaktiviert, wenn die Diashow zuerst lädt, aber dann aktivieren, sobald die zweite Folie geladen wurde . Alles, was ich tun muss, ist zwischen zwei Dias zu wechseln.

Gleiches gilt für die Schaltfläche Weiter, aber umgekehrt: Zuerst aktiviert, aber deaktiviert, wenn die zweite Folie geladen wird.

Ich habe ein paar Dinge ausprobiert:

beforeInit: function() { 
    $(".prev").attr("disabled"); 
} 

... aber aus irgendeinem Grund das Attribut disabled wird nicht hinzugefügt.

beforeInit: function() { 
    $(".prev").attr("disabled"); 
}, 
afterInit: function() { 
    $(".prev").removeAttr("disabled"); 
} 

... aber dasselbe Ergebnis wie der erste Ansatz.

beforeInit: function() { 
    $(".prev").toggleClass("disabled"); 
} 

... aber das kommt noch hinzu, eine Klasse (es ist das eigentlich nicht wechseln) und die Taste funktioniert immer noch die vorherige Folie zu laden.

Hier ist eine Demo: http://codepen.io/ricardozea/pen/ca8d29139b409914e0795d9772d75421

Jede Hilfe wird sehr geschätzt.

Danke.

Answer 1

Gemäß der .attr() Dokumentation

.attr(attributeName)
den Wert eines Attributs für das erste Element in dem Satz von abgestimmten Elementen Get.

Ein einzelner Parameter in wird verwendet, um das Attribut "nachzuschlagen". Sie müssen einen zweiten Parameter angeben, um die Einstellung des Attributs zu ändern.

.attr(attributeName, value)
Stellen ein oder mehrere Attribute für den Satz von abgestimmten Elementen.

Ändern Sie es an:

$(".prev").attr("disabled", "disabled"); 

Zusätzlich wäre es Ihre CSS in der codepen ist nicht der Suche nach dem Attribut "disabled" erscheinen alle Styling-Änderungen zu übernehmen. So können Sie die Techniken kombinieren mit:

$(".prev").attr("disabled", "disabled").addClass('disabled'); 

Answer 2

Nun, ich found a jQuery plugin, die mir erlaubt toggleAttr(); zu verwenden wie toggleClass(); tun. Für einen Designer wie ich, dann ist dies ein Geschenk des Himmels

Dieses Plugin kombiniert mit den afterInit und afterTransition Optionen aus Glide.js mich zwischen zwei Schiebern und schalten Sie den disabled Attribut auf den Prev und Next-Tasten zum Umschalten erlaubt.

In der CSS zielte ich die deaktivierten Schaltflächen mit einem Attributselektor.

Dies ist meine jQuery Skript Lösung:

/*! 
* toggleAttr() jQuery plugin 
* @link http://github.com/mathiasbynens/toggleAttr-jQuery-Plugin 
* @description Used to toggle selected="selected", disabled="disabled", checked="checked" etc… 
* @author Mathias Bynens <http://mathiasbynens.be/> 
*/ 
jQuery.fn.toggleAttr = function(attr) { 
return this.each(function() { 
    var $this = $(this); 
    $this.attr(attr) ? $this.removeAttr(attr) : $this.attr(attr, attr); 
}); 
}; 

//Glide 
$("#Glide").glide({ 
    type: "slideshow", 
    autoplay: false, 
    animationDuration: 1000, 
    hoverpause: true, 
    autoheight: true, 
    afterInit: function() { 
    $(".prev").toggleAttr("disabled"); 
    }, 
    afterTransition: function() { 
    $(".prev").toggleAttr("disabled"); 
    $(".next").toggleAttr("disabled"); 
    } 
}); 

Die CSS ein Attributselektor die gesperrten Tasten zum Ziel mit:

[disabled] { background: red; } 

Hier ist eine Arbeits Demo in CodePen: http://codepen.io/ricardozea/pen/73ecc288b581d78332fc6e69017c7a54?editors=0010