Glide.js - 前/次のボタンを無効にする/有効にする

Question

Glide.jsを使用する（ここではdocumentation sectionです）スライドショーを最初に読み込むときに前ボタンを無効にすることはできませんでしたが、 。私がする必要があるのは、2つのスライド間を循環することだけです。

[次へ]ボタンと同じことですが、その逆：最初は有効ですが、2番目のスライドが読み込まれると無効になります。

私はいくつか試してみた：

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

を...しかし、何らかの理由で属性disabledが追加されていません。

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

...しかし、最初のアプローチと同じ結果です。

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

...しかし、これはクラスを追加するだけです（実際には切り替えることはありません）。ボタンはまだ前のスライドを読み込むように機能します。すべてのヘルプは大歓迎ですhttp://codepen.io/ricardozea/pen/ca8d29139b409914e0795d9772d75421

：

はここでデモです。

ありがとうございました。

Answer 1

.attr()ドキュメントを1として

.attr(attributeName)
は、マッチした要素の集合内の最初の要素の属性の値を取得します。

属性を「ルックアップ」するために1つのパラメータが使用されます。属性の設定を変更するには、2番目のパラメータを指定する必要があります。

.attr(attributeName, value)
は、マッチした要素のセットのために1つ以上の属性を設定します。

に変更し、それを：

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

また、どんなスタイリングの変更を適用するには「無効」属性を探してcodepenイマイチであなたのCSSを思われます。

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

Answer 2

まあ、私found a jQuery plugin私はちょうどtoggleClass();を行うようtoggleAttr();を使用することができます：だから、技術使用を組み合わせることができます。私のような設計者にとって、これは天の恵み

あるGlide.jsからafterInitとafterTransitionオプションと組み合わせるこのプラグインは、私は2枚のスライドを切り替えると、前のページと次のページボタンのdisabled属性を切り替えることができました。

CSSでは、無効になったボタンを属性セレクタで対象としました。

これは私のjQueryのスクリプトソリューションです：

/*! 
* 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"); 
    } 
}); 

無効ボタンをターゲットに属性セレクタを使用してCSS：http://codepen.io/ricardozea/pen/73ecc288b581d78332fc6e69017c7a54?editors=0010