How to make Next button and Previous button non-working after I reach last and first slide respectively?

Question

I have problem with my slideshow. I am using javascript from w3.js and I am curious what to add to the code, to stop the buttons work on last and first slide. I looked for many examples out there, but none of them worked for me.

JS

w3.slideshow = function (sel, ms, func) {
    var i, ss, x = w3.getElements(sel),
        l = x.length;
    infinite: false;
    ss = {};
    ss.current = 1;
    ss.x = x;
    ss.ondisplaychange = func;
    if (!isNaN(ms) || ms == 0) {
        ss.milliseconds = ms;
    } else {
        ss.milliseconds = 1000;
    }
    ss.start = function () {
        ss.display(ss.current)
        if (ss.ondisplaychange) {
            ss.ondisplaychange();
        }
        if (ss.milliseconds > 0) {
            window.clearTimeout(ss.timeout);
            ss.timeout = window.setTimeout(ss.next, ss.milliseconds);
        }
    };
    var clicks = 1;
    ss.next = function () {
        infinite: false;
        ss.current += 1;
        if (ss.current > ss.x.length) {
            ss.current = 1;
        }
        ss.start();
    };
    ss.previous = function () {
        infinite: false;
        ss.current -= 1;
        if (ss.current < 1) {
            ss.current = ss.x.length;
        }
        ss.start();
    };
    ss.display = function (n) {
        w3.styleElements(ss.x, "display", "none");
        w3.styleElement(ss.x[n - 1], "display", "block");
    }
    ss.start();
    return ss;
};

HTML

<div class="note">
    <h1>4Nadpis elearningu</h1>
    <p>4Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ornare ut sem at lobortis. Integer mattis venenatis enim eget semper. Integer finibus, augue a venenatis consequat, odio purus porta odio, in lobortis velit libero eget nunc. Nunc purus nisi, mollis ac facilisis sed, varius ut ipsum. Donec elementum sagittis elit, quis pellentesque risus lobortis vel. In et erat consequat, vestibulum felis et, luctus urna. Aliquam ipsum elit, varius fermentum rutrum eget, lobortis non purus. Nulla id nunc viverra nisi porttitor fermentum ut eu diam. In at vestibulum quam. Aenean non eros erat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ornare convallis lacus, vel dictum nibh convallis sed. Phasellus sem arcu, posuere id blandit ac, placerat dignissim erat. In congue lorem id vestibulum consequat. Proin feugiat ligula nec velit viverra commodo. Donec vitae maximus felis.</p>
</div>
<div class="note">
    <h1>5Nadpis elearningu</h1>
    <p>5Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ornare ut sem at lobortis. Integer mattis venenatis enim eget semper. Integer finibus, augue a venenatis consequat, odio purus porta odio, in lobortis velit libero eget nunc. Nunc purus nisi, mollis ac facilisis sed, varius ut ipsum. Donec elementum sagittis elit, quis pellentesque risus lobortis vel. In et erat consequat, vestibulum felis et, luctus urna. Aliquam ipsum elit, varius fermentum rutrum eget, lobortis non purus. Nulla id nunc viverra nisi porttitor fermentum ut eu diam. In at vestibulum quam. Aenean non eros erat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ornare convallis lacus, vel dictum nibh convallis sed. Phasellus sem arcu, posuere id blandit ac, placerat dignissim erat. In congue lorem id vestibulum consequat. Proin feugiat ligula nec velit viverra commodo. Donec vitae maximus felis.</p>
</div>
<br>
<button class="button" onclick="myShow.previous()">Naspat</button>
<button class="button" onclick="myShow.next()">Dalej</button>

<script>
    myShow = w3.slideshow(".note", 0);
</script>

It's supposed to stop working on the last slide (Next button) and also stop working on the first slide (Previous button).

Answer 1

The following function determines what should happen if next is clicked

  ss.next = function() {
    infinite: false;
    ss.current += 1;
    if (ss.current > ss.x.length) {ss.current = 1;}
    ss.start();
   };

The variable current keeps track of the current slide. Here it gets incremented by 1 and if it's bigger than the number of pictures - x.length - it gets reset to 1.

Instead of incrementing it automatically just check if it's the last element and stop incrementing

  ss.next = function() {
    infinite: false;
    if (ss.current + 1 <= ss.x.length) {ss.current += 1;}
    ss.start();
   };

Likewise for the previous function. Check if decrementing by 1 would result in a number bigger than 0 and if it's the case decrement.

  ss.previous = function() {
    infinite: false;
    if (ss.current-1 > 0) {ss.current -= 1;}
    ss.start();
  };