Mehmet Mehmet - 24 days ago 8
HTML Question

How to stop autoslide when click button?

I have an autoslide that contains 4 slides. I wanna know how to stop the autoslide when I click navigation buttons inside slider. Or what would be better is to know which button clicked and then make slide continue to other slides accroding to this clicked slide's number.
In my code, whatever I click navigation buttons or not the slide continues orderly.



/* *** Slide Starts *** */

/* To show first slide */
var slides = document.getElementsByClassName("showSlide");
for (i = 0; i < slides.length; i++)
slides[i].style.display = "none";
slides[0].style.display = "block";
/* Specific slide */
function showDisappear(n) {
var i;
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slides[n].style.display = "block";
}
/* Auto Slide */
var i, k = 0;
var navLinks = document.getElementsByClassName("itemLinks");
autoSlide();

function autoSlide() {
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
navLinks[i].classList.remove("active");
}
slides[k].style.display = "block";
navLinks[k].className += " active";
if (k == slides.length - 1) {
k = 0;
} else {
k++;
}
setTimeout(autoSlide, 5000);
}

/* *** Slide Finish *** */

<div class="slidercontainer clear">
<div class="showSlide">
<img class="slideImg" src="http://cdn.wallpapersafari.com/53/22/facp4d.jpg" />
<span class="slideContent">
<h1>Selcen 1</h1>
<p>Lorem ipsum dolor sit amet</p>
</span>
</div>
<div class="showSlide">
<img class="slideImg" src="http://tremendouswallpapers.com/wp-content/uploads/2015/01/Fire-Ice-Fist-1280x720.jpg" />
<span class="slideContent">
<h1>Selcen 2</h1>
<p>Lorem ipsum dolor sit amet</p>
</span>
</div>
<div class="showSlide">
<img class="slideImg" src="https://avante.biz/wp-content/uploads/1280x720-Wallpapers/1280x720-Wallpapers-022.jpg" />
<span class="slideContent">
<h1>Selcen 3</h1>
<p>Lorem ipsum dolor sit amet</p>
</span>
</div>
<div class="showSlide">
<img class="slideImg" src="http://yeemei.mobile9.com/download/media/534/assassinsc_P1F5HimQ.jpg" />
<span class="slideContent">
<h1>Selcen 4</h1>
<p>Lorem ipsum dolor sit amet</p>
</span>
</div>
<div id="navLinks">
<ul>
<li class="itemLinks" onclick="showDisappear(0)"></li>
<li class="itemLinks" onclick="showDisappear(1)"></li>
<li class="itemLinks" onclick="showDisappear(2)"></li>
<li class="itemLinks" onclick="showDisappear(3)"></li>
</ul>
</div>
</div>




Answer Source

/* *** Slide Starts *** */

/* To show first slide */
var slides = document.getElementsByClassName("showSlide");
var button = document.getElementById("btn");
var AUTO_TIMER = '';
for (i = 0; i < slides.length; i++)
  slides[i].style.display = "none";
slides[0].style.display = "block";
/* Specific slide */
function showDisappear(n) {
  var i;
  for (i = 0; i < slides.length; i++) {
    slides[i].style.display = "none";
  }
  slides[n].style.display = "block";
}
/* Auto Slide */
var i, k = 0;
var navLinks = document.getElementsByClassName("itemLinks");
autoSlide();

function autoSlide() {
  for (i = 0; i < slides.length; i++) {
    slides[i].style.display = "none";
    navLinks[i].classList.remove("active");
  }
  slides[k].style.display = "block";
  navLinks[k].className += " active";
  if (k == slides.length - 1) {
    k = 0;
  } else {
    k++;
  }
  AUTO_TIMER = setTimeout(autoSlide, 5000);
}
button.addEventListener('click',()=>{
  clearTimeout(AUTO_TIMER);
});
/* *** Slide Finish *** */
<div class="slidercontainer clear">
  <div class="showSlide">
    <img class="slideImg" src="http://cdn.wallpapersafari.com/53/22/facp4d.jpg" />
    <span class="slideContent">
            	<h1>Selcen 1</h1>
            	<p>Lorem ipsum dolor sit amet</p>
            </span>
  </div>
  <div class="showSlide">
    <img class="slideImg" src="http://tremendouswallpapers.com/wp-content/uploads/2015/01/Fire-Ice-Fist-1280x720.jpg" />
    <span class="slideContent">
            	<h1>Selcen 2</h1>
            	<p>Lorem ipsum dolor sit amet</p>
            </span>
  </div>
  <div class="showSlide">
    <img class="slideImg" src="https://avante.biz/wp-content/uploads/1280x720-Wallpapers/1280x720-Wallpapers-022.jpg" />
    <span class="slideContent">
            	<h1>Selcen 3</h1>
            	<p>Lorem ipsum dolor sit amet</p>
            </span>
  </div>
  <div class="showSlide">
    <img class="slideImg" src="http://yeemei.mobile9.com/download/media/534/assassinsc_P1F5HimQ.jpg" />
    <span class="slideContent">
            	<h1>Selcen 4</h1>
            	<p>Lorem ipsum dolor sit amet</p>
            </span>
  </div>
  <div id="navLinks">
    <ul>
      <li class="itemLinks" onclick="showDisappear(0)"></li>
      <li class="itemLinks" onclick="showDisappear(1)"></li>
      <li class="itemLinks" onclick="showDisappear(2)"></li>
      <li class="itemLinks" onclick="showDisappear(3)"></li>
    </ul>
  </div>
</div>
<button id="btn">button</button>

AUTO_TIMER = setTimeout(autoSlide, 5000);

When button is clicked,

button.addEventListener('click',()=>{
  clearTimeout(AUTO_TIMER);
});