How can I stop a slideshow?

When I click on some of the buttons I want the slideshow to stop working and let me see the img for 10s or 15s and then it goes back to work. I tried the setTimeout function but I think I didn't use it right. I checked some solutions here on stackoverflow for some problems that seemed like mine but nothing helped me. Here is an executable version of my code: https://codepen.io/Amoocris/pen/MZXQYb?send-to-phone=5555555#0

Here is my code:

var slideIndex = 0;
showSlide();

function currentSlide(n) {
  showSlide(slideIndex = n);
}

function showSlide(n) {
  var i;
  slide = document.getElementsByClassName("mySlide");
  dotz = document.getElementsByClassName("btn");
  for (i = 0; i < slide.length; i++) {
    slide[i].style.display = "none";
  }
  slideIndex++;
  if (slideIndex > slide.length) {
    slideIndex = 1
  }
  for (i = 0; i < dotz.length; i++) {
    dotz[i].className = dotz[i].className.replace("active", "");
  }
  slide[slideIndex - 1].style.display = "block";
  slide[slideIndex - 1].className += "active";
  setTimeout(showSlide, 3000);
}

* {
  box-sizing: border-box;
}

.img {
  width: 100%;
  height: 666.656px;
}

.mySlide {
  max-width: 1000px;
  position: relative;
  margin: auto;
}

.btns {
  text-align: center;
}

.btn {
  cursor: pointer;
  display: inline-block;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: #bbb;
  margin: 0 2px;
}

.active,
.btn:hover {
  background-color: pink;
}

.fade {
  animation-name: fade;
  animation-duration: 1.5s;
}

@keyframes fade {
  0% {
    opacity: 0.4;
  }
  100% {
    opacity: 1;
  }
}

<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <title></title>
</head>
<link rel="stylesheet" href="style.css">

<body>


  <div class="slider-container">
    <div class="mySlide fade">
      <img src="https://images.pexels.com/photos/70497/pexels-photo-70497.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" alt="" class="img">
    </div>
    <div class="mySlide fade">
      <img src="https://images.pexels.com/photos/1639557/pexels-photo-1639557.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" alt="" class="img">
    </div>
    <div class="mySlide fade">
      <img src="https://images.pexels.com/photos/1639565/pexels-photo-1639565.jpeg?cs=srgb&dl=burger-close-up-delicious-1639565.jpg&fm=jpg" alt="" class="img">
    </div>
    <div class="btns">
      <span class="btn" onclick="currentSlide(1)"></span>
      <span class="btn" onclick="currentSlide(2)"></span>
      <span class="btn" onclick="currentSlide(3)"></span>
    </div>
  </div>

  <script src="script.js" charset="utf-8"></script>
</body>

</html>

Solution

You can set up a variable to keep track of slideshow’s auto play. When a button is clicked, the auto play is cancelled until after a certain time period, say 5s.

Let’s set the variable to be timer and define it at the beginning of the slideshow section in the JS file: var timer = null;

Then in the showSlide function, in addition to calling setTimeout function like you are currently doing, you can assign the the return value of the function to timer so that you can cancel it whenever you need to: timer = setTimeout(showSlide, 3000);

Then in the button click function you’ll write, add the following code to temporarily cancel autoplay and set to resume it after 5 seconds:

clearTimeout(timer);
timer = setTimeout(showSlide, 5000);

Hope this helps.