Javascript automatic slider not stopping, help needed

Question

why wouldn't this work? I am trying to make it so when you click on the video/div that the iframe video is in it would stop the automatic slider but I just can't get it to work.

javascript:

let slideIndex = 0;
showSlides();
let click = 0;
function clicked() {
  var button = document.document.getElementsByClassName('slideshow-container');
  button.addEventListener('slideshow-container', function handleClick() {
    if (click = 1) {
      click = 0;
    }

    else {
      click = 1;
    }
  });
  return click;
}

function showSlides() {
  let i;
  let slides = document.getElementsByClassName("slides");
  let dots = document.getElementsByClassName("dot");
  for (i = 0; i < slides.length; i++) {
    slides[i].style.display = "none";  
  }
  slideIndex++;
  if (slideIndex > slides.length) {slideIndex = 1}    
  for (i = 0; i < dots.length; i++) {
    dots[i].className = dots[i].className.replace(" active", "");
  }
  slides[slideIndex-1].style.display = "block";  
  dots[slideIndex-1].className += " active";
  if (click != 1)
  {
  setTimeout(showSlides, 6666);
  }
}

HTML:

<Center>
<div class="slideshow-container">

<div class="slides fade">
  <div class="numbertext">1 / 3</div>
<iframe width="1000" height="500" src="https://www.youtube.com/embed/tgbNymZ7vqY"></iframe>
</div>

<div class="slides fade">
  <div class="numbertext">2 / 3</div>
  <iframe width="1000" height="500" src="https://www.youtube.com/embed/tgbNymZ7vqY"></iframe>
</div>

<div class="slides fade">
  <div class="numbertext">3 / 3</div>
  <iframe width="1000" height="500" src="https://www.youtube.com/embed/tgbNymZ7vqY"></iframe>
</div>
  </div>
  </br>
  <div>
<span class="dot"></span> 
  <span class="dot"></span> 
  <span class="dot"></span> 
  </div>
</Center>
</div>
<br>



<script src="showSlides.js"></script>

Edit: as requested I swapped out the screenshots for the actual code and spent about 5 minutes trying to figure out how to actually post it and now I need more details but I don't know what to add so I'm writing this.

Answer 1

let slideIndex = 0;
var id = showSlides();
let click = 0;
function clicked() {
  var button = document.document.getElementsByClassName('slideshow-container');
  button.addEventListener('slideshow-container', function handleClick() {
    if (click = 1) {
      click = 0;
    }

    else {
      click = 1;
    }
  });
  return click;
}

function showSlides() {
  let i;
  let slides = document.getElementsByClassName("slides");
  let dots = document.getElementsByClassName("dot");
  for (i = 0; i < slides.length; i++) {
    slides[i].style.display = "none";  
  }
  slideIndex++;
  if (slideIndex > slides.length) {slideIndex = 1}    
  for (i = 0; i < dots.length; i++) {
    dots[i].className = dots[i].className.replace(" active", "");
  }
  slides[slideIndex-1].style.display = "block";  
  dots[slideIndex-1].className += " active";
  if (click != 1)
  {
  var timeoutId = setTimeout(showSlides, 6666);
return timeoutId
  }
}

Then to stop it, just call

clearTimeout(id)