How can I make this javascript stop when the last slide is shown

Question

I want to make this javascript stop when the last slide is shown, so that the next button won't work, but same with the previous button when the first slide is shown. For the previous button, when I press it and the slider is at the first slide I want it to stay to the current slide.

Javascript code:

var slideIndex = 1;
showDivs(slideIndex);

function plusDivs(n) {
    showDivs(slideIndex += n);
}

function showDivs(n) {
    var i;
    var x = document.getElementsByClassName('slide');
    if (n < 1) {slideIndex = 1;}
    for (i = 0; i < x.length; i++) {
        x[i].style.display = 'none';
    }
    x[slideIndex-1].style.display = 'block';
    }

HTML code:

<div class="links-to-wbp">
                    <div class="slide">
                        <a href="/physics/index.html"><img class="wbp" alt="thumb1" src="img/thumb1.png"/></a><a href="/francais/index.html"><img class="wbp" alt="thumb2" src="img/thumb2.png"/></a><a href="/strict/index.html"><img class="wbp" alt="thumb3" src="img/thumb3.png"/></a></div>
                <div class="slide">
                        <img class="wbp" alt="thumb4" src="img/thumb4.png"/><img class="wbp" alt="thumb5" src="img/thumb5.png"/><img class="wbp" alt="thumb6" src="img/thumb6.png"/></div>
                <div class="slide">
                        <img class="wbp" alt="thumb7" src="img/thumb7.png"/><img class="wbp" alt="thumb8" src="img/thumb8.png"/><img class="wbp" alt="thumb9" src="img/thumb9.png"/></div>
                     <div onclick="plusDivs(-1)" class="button previous_button">&#60;</div>
                    <div onclick="plusDivs(+1)" class="button next_button">&#62;</div>
                </div>

Answer 1

I want to make this javascript stop when the last slide is shown, so that the next button won't work.

For that you can add a new if statement to your showDivs function

if (n > x.length) {slideIndex = x.length}

so your showDivs function should look like this now:

function showDivs(n) {
    var i;
    var x = document.getElementsByClassName('slide');
    if (n > x.length) {slideIndex = x.length}
    if (n < 1) {slideIndex = 1;}
    for (i = 0; i < x.length; i++) {
        x[i].style.display = 'none';
    }
    x[slideIndex-1].style.display = 'block';
    }

but same with the previous button when the first slide is shown. For the previous button, when I press it and the slider is at the first slide I want it to stay to the current slide.

This should be already working because thats the purpose of the following statemnt in your showDiv function:

if (n < 1) {slideIndex = 1;}

Answer 2

To achieve expected result, add below line to the showDivs function

//add this line to stop after last slide
  if(n > x.length){
      n= slideIndex =x.length;
   }

Codepen- https://codepen.io/nagasai/pen/vZVeZV

Solution:

Above mentioned solution, will check whether the next value is more than the count of slide class(ie, 3 in this case)

If it is more than the count of slide class, reset n and slideIndex back to the length of slide class.

For previous slide at first slide, there is already if condition which works

if (n < 1) {slideIndex = 1;}

Answer 3

you must check if value of slideIndex greater than length array of slides then assign this length to slideIndex. The same if value of slide index smaller than 1 then assign 1 to it.

Simple code like bellow:

function plusDivs(n) {
    slideIndex += n;
    if(slideIndex >= x.length){slideIndex = x.length;}    
    if(slideIndex <=1){slideIndex=1}
    showDivs(slideIndex += n);
}