Отключение следующей кнопки на последнем изображении в слайдере изображений Java script

Я создаю слайдер изображений с помощью Java скрипта с кнопкой next для переключения между изображениями. Таким образом, автоматически при достижении последнего изображения он начинает с первого. Я хочу отключить кнопку next на последнем изображении. Или заменить ее на другую кнопку, например submit или что-то еще

HTML:

<div class="slider">
        <!-- fade css -->
        <div class="myslide fade">
            <div class="txt">
                <h1>IMAGE 1</h1>
                <p>Web Devoloper<br>Subscribe To My Channel For More Videos</p>
            </div>
            <img src="img1.jpg" style="width: 100%; height: 100%;">
        </div>
        
        <div class="myslide fade">
            <div class="txt">
                <h1>IMAGE 2</h1>
                <p>Web Devoloper<br>Subscribe To My Channel For More Videos</p>
            </div>
            <img src="img2.jpg" style="width: 100%; height: 100%;">
        </div>
        
        <div class="myslide fade">
            <div class="txt">
                <h1>IMAGE 3</h1>
                <p>Web Devoloper<br>Subscribe To My Channel For More Videos</p>
            </div>
            <img src="img3.jpg" style="width: 100%; height: 100%;">
        </div>
        </div>
a class="next" onclick="plusSlides(1)">&#10095;</a>

JS:

const myslide = document.querySelectorAll('.myslide'),
      dot = document.querySelectorAll('.dot');
let counter = 1;
slidefun(counter);

let timer = setInterval(autoSlide, 8000);
function autoSlide() {
    counter += 1;
    slidefun(counter);
}
function plusSlides(n) {
    counter += n;
    slidefun(counter);
    resetTimer();
}
function currentSlide(n) {
    counter = n;
    slidefun(counter);
    resetTimer();
}
function resetTimer() {
    clearInterval(timer);
    timer = setInterval(autoSlide, 8000);
}

function slidefun(n) {
    
    let i;
    for(i = 0;i<myslide.length;i++){
        myslide[i].style.display = "none";
    }
    for(i = 0;i<dot.length;i++) {
        dot[i].className = dot[i].className.replace(' active', '');
    }
    if(n > myslide.length){
       counter = 1;
       }
    if(n < 1){
       counter = myslide.length;
       }
    myslide[counter - 1].style.display = "block";
    dot[counter - 1].className += " active";
}

Заранее спасибо.

<button class="next" id="nextBtn" onclick="plusSlides(1)">&#10095;</button>

function slidefun(n) {
   
   // ... your existing logics

   const nextBtn = document.getElementById('nextBtn');

   if ( counter === myslide.length ) {
      nextBtn.disabled = true; 
   }
}