jQueryにて表示されているスライドによってイベントを付けたり消したりしたい

Question

jQueryにて表示されているスライドによってイベントを付けたり消したりしたい

前提・実現したいこと

jQueryにて

発生している問題

五枚あるスライドのうち、.deleteCardというクラスがついているスライドが画面に表れている時、.btnNextを透明にしたいんです。
しかし、.deleteCardは二枚ある（スライド２、スライド４）のですが、二枚目の時に透明なってくれません。解決策はあるでしょうか。
jsはコメントアウトして機能の説明をしています。

該当のソースコード

https://codepen.io/pen/?template=WNZEQBy

補足情報

jquery-3.6.0

いろいろ試したのですが、よく分からなくなりました。
ご回答いただけましたら幸いです。

Answer 1

画面幅を計算するより、位置を持つほうが簡単じゃないでしょうか。

var pos = 1

$('.btnNext').click(function(){  //スライド進むボタン
	pos += 1
	slideNext();
});

$('.btnPrev').click(function(){ //スライド戻るボタン
	pos -= 1
	slidePrev();
});


function deleteButton(){
	if(pos === 2 || pos === 4){  
	    $('.btnNext').animate({"opacity": "0"},500); //.btnNextが消える
	}else{
	    $('.btnNext').animate({"opacity": "1"},500); //.btnNextが復活する
	}
}

deleteCardクラスで判断したいなら、

function deleteButton(){
        if ($($(".slide__card")[pos - 1]).hasClass('deleteCard')) {
            $('.btnNext').animate({"opacity": "0"},500); //.btnNextが消える
        } else {
            $('.btnNext').animate({"opacity": "1"},500); //.btnNextが復活する
        }
}

Comments

[haihai]

その発想はなかったです！ありがとうござい,ます！