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).

obscure · Accepted Answer · 2019-07-04T11:42:30.803

0

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();
  };

edited Jul 04 '19 at 11:42

answered Jul 04 '19 at 11:34

obscure

11,916
2
17
36

This almost worked. I have 5 slides, but the Next button stopped working on 4. slide and previous is working correctly. But thank you so much for this at least. @obscure – brankoo Jul 04 '19 at 11:41
@BranislavToman - I've fixed my answer. You need to use `<=` instead of just `<` at this line `if (ss.current + 1 <= ss.x.length) {ss.current += 1;}` – obscure Jul 04 '19 at 11:43
Ou, i didn't realize. I fixed that by myself, but thank you one more time :) – brankoo Jul 04 '19 at 11:55
Glad I could help Branislav! – obscure Jul 04 '19 at 11:56

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

1 Answers1