Slideshow qui défile trop vite quand on clique sur les boutons.

Bonjour,

je suis actuellement de créer un slideshow pour un site web et j'ai trouver un code explicatif sur W3Schools et je l'ai donc appliquer cependant après mettre débarrasser de ce qui me dérangeais j'ai commencer à vouloir personnaliser ce slideshow automatique, toutes les 10 secondes il affiche l'image suivante. Le problème c'est que en dessous il y a des dots qui représente chaque image et j'aimerais que lorsqu'une personne est intéresser par une image et qu'il clique sur le dot sa arrête le slide et reste sur l'image mais ici plus je clique sur des dots (points) plus les images défile rapidement. Voici le code

 <div class="block_slide">
     <div class="slideshow-container">
       <div class="mySlides fade">
         <img src="slide1.jpg" class="slide_a">
       </div>

       <div class="mySlides fade">
         <img src="slide2.jpg" class="slide_a">
       </div>

       <div class="mySlides fade">
         <img src="slide3.jpg" class="slide_a">
       </div>

        <div class="mySlides fade">
         <img src="slide4.jpg" class="slide_a">
       </div>

      <!-- <a class="prev" onclick="plusSlides(-1)">❮</a>
       <a class="next" onclick="plusSlides(1)">❯</a>-->
     </div>
     <br>

     <div style="text-align:center">
       <span class="dot" onclick="currentSlide(0)"></span> 
       <span class="dot" onclick="currentSlide(1)"></span> 
       <span class="dot" onclick="currentSlide(2)"></span>
       <span class="dot" onclick="currentSlide(3)"></span>  
     </div>

     <script>

     var slideIndex = 0;
     showSlides();


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



     function showSlides() 
     {
         var i;
         var slides = document.getElementsByClassName("mySlides");
         var dots = document.getElementsByClassName("dot");
         for (i = 0; i < slides.length; i++)
          {
            slides[i].style.display = "none"; 
        }
        for (i = 0; i < dots.length; i++) 
        {
            dots[i].className = dots[i].className.replace(" activeslide", "");
        }
         slideIndex++;
         if (slideIndex> slides.length) 
         {
          slideIndex = 1
         } 

         slides[slideIndex-1].style.display = "block"; 
      dots[slideIndex-1].className += " activeslide";
         setTimeout(showSlides, 10000); // Change image every 2 seconds
     }

C'est très dur à expliquer donc voici le site web pour tester par vous même car jsfiddle n'a pas l'air de vouloir coopérer ^^ https://www.hostinger.com/free-eol?utm_source=fri&utm_medium=www&utm_campaign=free_eol Désoler de devoir mettre le lien /: Cliquez un peu vite sur les dots en bas du slide et vous verrez très vite le problème :/