Because your showSlides() function starts a timer each time it’s invoked and that timer, in turn calls showSlides() again, you wind up “stacking” up calls for the function that run one right after the other.

What you need to do is set up a variable reference to the timer and, before starting a new timer, make sure the previous one has been stopped by using clearTimeout() as shown below. This will ensure that you never have more than a single timer in the queue.

var timer = null; // Will hold reference to timer

function showSlides() {

  // Clear any running timer
  clearTimeout(timer);

  var i;
  var slides = document.getElementsByClassName("mySlides");
  var dots = document.getElementsByClassName("button");

  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";
  timer = setTimeout(showSlides, 5000); // Get reference to timer
}

I tried making an automatic slideshow with buttons to click. The slideshow does work but when I click one of the buttons my slideshow will trip and go way faster then it should.

Here is what I tried.

<script>
  var slideIndex = 0;
  showSlides(slideIndex);

  function plusSlides(n) {
    showSlides(slideIndex += n);
  }

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

  function showSlides() {
    var i;
    var slides = document.getElementsByClassName("mySlides");
    var dots = document.getElementsByClassName("button");

    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";
    setTimeout(showSlides, 5000); // Change image every 10 seconds
  }
</script>

Why does my slideshow trip whenever I click my onclick button?

This is the HTML

<div class="wrapper">
  <span class="button button1" onclick="currentSlide(0)"></span>
  <span class="button button2" onclick="currentSlide(1)"></span>
  <span class="button button3" onclick="currentSlide(2)"></span>
</div>

<!--Slideshow images-->
<div class="slideshow-container">
  <div class="mySlides Fade">
    <img src="homeScreen/teslaRoadster.jpg" style="width:100%">
    <div class="centered-text"> Customize Your Own Car</div>
    <button class="btnCustom">
      <a id="costumLink" href="#custom">Customize</a>
    </button>

  </div>

  <div class="mySlides Fade">
    <img src="homeScreen/modelXHomeScreen.jpg" style="width:100%">
    <div class="top-left"> MODEL X</div>
    <button class="btnModelX">
      <a id="costumLink" href="#modelx">Order Now</a>
    </button>
  </div>

  <div class="mySlides Fade">
    <img src="homeScreen/cybertruckHomeScreen.jpg" style="width:100%">
    <div class="centered-text">The Future Is Now</div>
    <button class="btnCyberTruck">
      <a id="costumLink" href="#cybertruck">Order Now</a>
    </button>
  </div>
</div>