javascript - onmouseup がトリガーされたときに、スライダーの前/後のバニラ JS でオーバーレイの削除/追加に問題がありますか?

Question

私はJavascriptが初めてで、ここにあるスライダーの前/後を作成しようとしています - https://codepen.io/HarryWilson/pen/jOPzbGz。

 document.body.addEventListener('mouseup',function(){
  active = false;
  overlay = false; 
  document.querySelector('.scroller').classList.remove('scrolling');
  overlayOffDuringSlide();
  // this is the area of code which is causing the final problem
});

上記は、私が問題領域として特定した JS コードの領域です。いずれかの画像をクリックするとオーバーレイが消えるという事実を除けば、スライダーのすべてが正常に機能しています。問題が Javascript の「マウスアップ」セクションによって引き起こされていることを確認し、変数を追加するか、if ステートメントを変更して、誰かが画像の上またはクリックしている間もそのままになるようにしました。

このコードペンも参照してください - https://codepen.io/HarryWilson/pen/LYVmeZp

   document.body.addEventListener('mouseup',function(){
   active = false;
   overlay = false; 
   // THis is the problem area 
   // Maybe check some kinda condition for the overlay being on and if it is, keep it on ... 
   document.querySelector('.scroller').classList.remove('scrolling');
     if (document.querySelector(".overlay").style.display = "block"){
      overlayOn();
     }
     else {
      overlayOffDuringSlide();
     }
    });

ここでは、これらを 2 つ並べて作成しました。上記のコードは、私が回避策を試した方法です (これは画像クリックの問題に対しては機能しますが、スクローラー上でマウスアップすると新しい問題が発生します。最初のスライダー (左側) は、画像をクリックしたときに目的の効果を示しますが、スクローラーにクリックの問題があります. 私が思いついたすべての修正は、スライダーに 1 つの問題を残します. スクローラーが onmouseup でオーバーレイを元に戻すか、画像が onmouseup でオーバーレイを削除します.画像（クリックしても）を表示し、スクローラーを使用しているときに（クリックしても）オーバーレイが消えるようにします.私は1つしか修正できず、他の？