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

前提・実現したいこと

jQueryにて

発生している問題

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

該当のソースコード

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

補足情報

jquery-3.6.0

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

行動規範の内容に同意します

回答1件

ベストアンサー

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

javascript
1var pos = 1
2
3$('.btnNext').click(function(){  //スライド進むボタン
4	pos += 1
5	slideNext();
6});
7
8$('.btnPrev').click(function(){ //スライド戻るボタン
9	pos -= 1
10	slidePrev();
11});
12
13
14function deleteButton(){
15	if(pos === 2 || pos === 4){  
16	    $('.btnNext').animate({"opacity": "0"},500); //.btnNextが消える
17	}else{
18	    $('.btnNext').animate({"opacity": "1"},500); //.btnNextが復活する
19	}
20}
21

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

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