Image slideshow will not function properly

Question

I'm making an image slideshow/carousel where there are play, pause, and stop buttons. When you press play, the images are expected to change every 1 second. But once it gets to the last picture, it will not go back to image number one. Is there any reason for this? There are 19 photos and they will move in order. Each photo has the same URL except for the end of the link where it changes according to its sequence in the 19 orders.

    <script>
  var count = 1;
  let mainElement = document.querySelector("div.main>.imgSub");
  let URL = "https://www.takushoku-u.ac.jp/summary/images/summary_successive-chancellor_img_";
  let thumbnailsElement = document.querySelector("div.thumbnails");
  thumbnailsElement.children[count-1].classList.add('selected');
    function next() {
        if (count < 19) {
          count++;
            if (count < 10) {
               console.log("count:" + count);
                x = URL + "0" + count + ".jpg";
            } else {
                x = URL + count + ".jpg";
            }
        } else {
            count = 1;
            x = URL + "0" + count + ".jpg";
        }
        mainElement.setAttribute('src', x);
        thumbnailsElement.children[count].classList.remove('selected');
        thumbnailsElement.children[count-1].classList.add('selected');
        thumbnailsElement.children[count-2].classList.remove('selected');
    }
    function prev() {
        if (count > 1) {
            if (count < 10) {
                count--;
                x = URL + "0" + count + ".jpg";
            } else {
                count--;
                x = URL + count + ".jpg";
            }
        } else if (count == 19) {
            count = 1;
            x = URL + count + ".jpg";
        }
        mainElement.setAttribute('src', x);
        thumbnailsElement.children[count].classList.remove('selected');
        thumbnailsElement.children[count-1].classList.add('selected');
        thumbnailsElement.children[count-2].classList.remove('selected');
    }
    //play stop reset buttons
    let timer;
    let nowPlaying = false;
    function autoPlay() {
      next();
      timer = setTimeout(function() {autoPlay();}, 1000);
    }
    function play() {
      if (nowPlaying == true) {
        return;
      }
      nowPlaying = true;
      autoPlay();
    }
    function stop() {
      clearTimeout(timer);
      nowPlaying = false;
    }
    function reset() {
      stop();
      thumbnailsElement.children[count].classList.remove('selected');
      thumbnailsElement.children[count-1].classList.remove('selected');
      count = 1;
      thumbnailsElement.children[count-1].classList.add('selected');
      URL = URL + "01.jpg";
      mainElement.setAttribute('src', URL);
    }
</script>

Answer 1

thumbnailsElement.children[count-2].classList.remove('selected');

This line will give an error when the value of count is 1. So, considering your code, move 'count++' at the end of if-else statement i.e

  if (count < 19) {
      if (count < 10) {
         console.log("count:" + count);
          x = URL + "0" + count + ".jpg";
      } else {
          x = URL + count + ".jpg";
      }
  } else {
      count = 1;
      x = URL + "0" + count + ".jpg";
  }
    count++;    //changed statement
    mainElement.setAttribute('src', x);
    thumbnailsElement.children[count].classList.remove('selected');
    ...

Also i think there is an error in prev() function, in else if statement. It should be,

 else if (count == 2) {
    count = 19;
    x = URL + count + ".jpg";
}

there is 2 instead of 1, since count never becomes 1 in next() function