Clearing Timer on "setInterval"

user_18516471 0
Viewed 49

I am trying to make a slideshow using HTML, CSS, and JavaScript. I was successfully able to do that, but I have a few issues that I want to resolve.

  1. I am trying to stop the slideshow when I click on any of the manual navigation to control the slide.

  2. The loop is not that perfect. For example, the slideshow is on slide 3, and I click on slide 1 using the manual navigation bar, the slideshow goes all the way to slide 4 after 5 seconds passes.

    https://jsfiddle.net/c89y2sL4

var counter = 1;
setInterval(function() {
  document.getElementById('radio' + counter).checked = true;
  counter++;
  if (counter > 4) {
    counter = 1;
  }
}, 5000);
.slide_container {
  position: relative;
  width: 100%;
  height: 100vh;
}

.slide_container .slider {
  position: absolute;
  top: 0;
  left: 0;
  width: 500%;
  height: 100%;
  float: left;
  /*animation: animate 10s linear infinite;
*/
}

.slide_container .slider:hover {
  animation-play-state: paused;
}

.slide_container .slider .slide {
  position: relative;
  width: 20%;
  height: 100%;
  float: left;
}

.slide_container .slider .slide .caption {
  position: absolute;
  bottom: 60px;
  left: 60px;
  right: 60px;
  padding: 30px;
  background: rgba(0, 0, 0, 0.5);
}

.slide_container .slider .slide .caption h2 {
  color: #fff;
  font-size: 50px;
  text-align: left;
}

.slide_container .slider .slide .caption p {
  color: #fff;
  font-size: 20px;
  text-align: left;
}

.slide_container .slider .slide.slide1 {
  background: green;
  background-size: cover;
  background-position: center;
}

.slide_container .slider .slide.slide2 {
  background: blue;
  background-size: cover;
  background-position: center;
}

.slide_container .slider .slide.slide3 {
  background: pink;
  background-size: cover;
  background-position: center;
}

.slide_container .slider .slide.slide4 {
  background: red;
  background-size: cover;
  background-position: center;
}

@keyframes animate {
  0% {
    margin-left: 0;
  }
  20% {
    margin-left: 0;
  }
  25% {
    margin-left: -100%;
  }
  45% {
    margin-left: -100%;
  }
  50% {
    margin-left: -200%;
  }
  70% {
    margin-left: -200%;
  }
  75% {
    margin-left: -300%;
  }
  95% {
    margin-left: -300%;
  }
}

.slide_nav {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  margin-top: -40px;
  display: flex;
  justify-content: center;
}

.slide_bar:not(:last-child) {
  margin-right: 2px;
}

.slide_bar {
  width: 25px;
  height: 25px;
  border: 2px solid #fff;
  border-radius: 15px;
  transition: 0.5s;
}

.slide_bar:hover {
  background-color: #fff;
  border: 2px solid #fff;
  cursor: pointer;
}

.slide_container input {
  display: none;
}

#radio1:checked~.first {
  margin-left: 0;
  transition: linear 0.5s;
}

#radio2:checked~.first {
  margin-left: -100%;
  transition: linear 0.5s;
}

#radio3:checked~.first {
  margin-left: -200%;
  transition: linear 0.5s;
}

#radio4:checked~.first {
  margin-left: -300%;
  transition: linear 0.5s;
}

.slide_nav_auto {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  margin-top: -40px;
  display: flex;
  justify-content: center;
}

.slide_nav_auto div {
  width: 25px;
  height: 25px;
  border: 2px solid #FFF;
  border-radius: 15px;
  transition: 0.5s;
}

.slide_nav_auto div:not(:last-child) {
  margin-right: 2px;
  justify-content: center;
}

#radio1:checked~.slide_nav_auto .a_btn1 {
  background-color: #fff;
}

#radio2:checked~.slide_nav_auto .a_btn2 {
  background-color: #fff;
}

#radio3:checked~.slide_nav_auto .a_btn3 {
  background-color: #fff;
}

#radio4:checked~.slide_nav_auto .a_btn4 {
  background-color: #fff;
}
<div class="slide_container">
  <input type="radio" name="radio_button" id="radio1" checked/>
  <input type="radio" name="radio_button" id="radio2" />
  <input type="radio" name="radio_button" id="radio3" />
  <input type="radio" name="radio_button" id="radio4" />
  <div class="slider first">
    <div class="slide slide1">
      <div class="caption">
        <h2> Slide 1</h2>
        <p>ted her footsteps to the path which they had taken. She was just having a good cry all to herself. The mosquitoes made merry over her, biting her firm, round arms and nipping at her bare insteps.but here he sat with a blank screen in front of
          him. That blank screen taunting him day after day had started to play with his mind. He didn't understand why he couldn't even type a single word, just one to begin the process and build from there. And yet, he already knew that the eight hours
          he was prepared to sit in front of his computer today would end with the screen remaining bl</p>
      </div>
    </div>
    <div class="slide slide2">
      <div class="caption">
        <h2> Slide 2</h2>
        <p>ted her footsteps to the path which they had taken. She was just having a good cry all to herself. The mosquitoes made merry over her, biting her firm, round arms and nipping at her bare insteps.but here he sat with a blank screen in front of
          him. That blank screen taunting him day after day had started to play with his mind. He didn't understand why he couldn't even type a single word, just one to begin the process and build from there. And yet, he already knew that the eight hours
          he was prepared to sit in front of his computer today would end with the screen remaining bl</p>
      </div>
    </div>
    <div class="slide slide3">
      <div class="caption">
        <h2> Slide 3</h2>
        <p>ted her footsteps to the path which they had taken. She was just having a good cry all to herself. The mosquitoes made merry over her, biting her firm, round arms and nipping at her bare insteps.but here he sat with a blank screen in front of
          him. That blank screen taunting him day after day had started to play with his mind. He didn't understand why he couldn't even type a single word, just one to begin the process and build from there. And yet, he already knew that the eight hours
          he was prepared to sit in front of his computer today would end with the screen remaining bl</p>
      </div>
    </div>
    <div class="slide slide4">
      <div class="caption">
        <h2> Slide 4</h2>
        <p>ted her footsteps to the path which they had taken. She was just having a good cry all to herself. The mosquitoes made merry over her, biting her firm, round arms and nipping at her bare insteps.but here he sat with a blank screen in front of
          him. That blank screen taunting him day after day had started to play with his mind. He didn't understand why he couldn't even type a single word, just one to begin the process and build from there. And yet, he already knew that the eight hours
          he was prepared to sit in front of his computer today would end with the screen remaining bl</p>
      </div>
    </div>
  </div>

  <div class="slide_nav_auto">
    <div class="a_btn1"></div>
    <div class="a_btn2"></div>
    <div class="a_btn3"></div>
    <div class="a_btn4"></div>

  </div>
  <div class="slide_nav">
    <label for="radio1" class="slide_bar"></label>
    <label for="radio2" class="slide_bar"></label>
    <label for="radio3" class="slide_bar"></label>
    <label for="radio4" class="slide_bar"></label>
  </div>

css html javascript
3 Answers

When you set an interval (or a timeout), an identifier is returned. It can be used to cancel any future execution of the provided callback.

var counter = 1;
let intervalRef = setInterval(function() {
  document.getElementById('radio' + counter).checked = true;
  counter++;
  if (counter > 4) {
    counter = 1;
  }
}, 5000);

// An event listener for the nav circles
document.querySelectorAll(".slide_bar").forEach(item => item.addEventListener("click", function(){
  clearInterval(intervalRef)
  console.log("Slide show stopped")
}))
.slide_container {
  position: relative;
  width: 100%;
  height: 100vh;
}

.slide_container .slider {
  position: absolute;
  top: 0;
  left: 0;
  width: 500%;
  height: 100%;
  float: left;
  /*animation: animate 10s linear infinite;
*/
}

.slide_container .slider:hover {
  animation-play-state: paused;
}

.slide_container .slider .slide {
  position: relative;
  width: 20%;
  height: 100%;
  float: left;
}

.slide_container .slider .slide .caption {
  position: absolute;
  bottom: 60px;
  left: 60px;
  right: 60px;
  padding: 30px;
  background: rgba(0, 0, 0, 0.5);
}

.slide_container .slider .slide .caption h2 {
  color: #fff;
  font-size: 50px;
  text-align: left;
}

.slide_container .slider .slide .caption p {
  color: #fff;
  font-size: 20px;
  text-align: left;
}

.slide_container .slider .slide.slide1 {
  background: green;
  background-size: cover;
  background-position: center;
}

.slide_container .slider .slide.slide2 {
  background: blue;
  background-size: cover;
  background-position: center;
}

.slide_container .slider .slide.slide3 {
  background: pink;
  background-size: cover;
  background-position: center;
}

.slide_container .slider .slide.slide4 {
  background: red;
  background-size: cover;
  background-position: center;
}

@keyframes animate {
  0% {
    margin-left: 0;
  }
  20% {
    margin-left: 0;
  }
  25% {
    margin-left: -100%;
  }
  45% {
    margin-left: -100%;
  }
  50% {
    margin-left: -200%;
  }
  70% {
    margin-left: -200%;
  }
  75% {
    margin-left: -300%;
  }
  95% {
    margin-left: -300%;
  }
}

.slide_nav {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  margin-top: -40px;
  display: flex;
  justify-content: center;
}

.slide_bar:not(:last-child) {
  margin-right: 2px;
}

.slide_bar {
  width: 25px;
  height: 25px;
  border: 2px solid #fff;
  border-radius: 15px;
  transition: 0.5s;
}

.slide_bar:hover {
  background-color: #fff;
  border: 2px solid #fff;
  cursor: pointer;
}

.slide_container input {
  display: none;
}

#radio1:checked~.first {
  margin-left: 0;
  transition: linear 0.5s;
}

#radio2:checked~.first {
  margin-left: -100%;
  transition: linear 0.5s;
}

#radio3:checked~.first {
  margin-left: -200%;
  transition: linear 0.5s;
}

#radio4:checked~.first {
  margin-left: -300%;
  transition: linear 0.5s;
}

.slide_nav_auto {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  margin-top: -40px;
  display: flex;
  justify-content: center;
}

.slide_nav_auto div {
  width: 25px;
  height: 25px;
  border: 2px solid #FFF;
  border-radius: 15px;
  transition: 0.5s;
}

.slide_nav_auto div:not(:last-child) {
  margin-right: 2px;
  justify-content: center;
}

#radio1:checked~.slide_nav_auto .a_btn1 {
  background-color: #fff;
}

#radio2:checked~.slide_nav_auto .a_btn2 {
  background-color: #fff;
}

#radio3:checked~.slide_nav_auto .a_btn3 {
  background-color: #fff;
}

#radio4:checked~.slide_nav_auto .a_btn4 {
  background-color: #fff;
}
<div class="slide_container">
  <input type="radio" name="radio_button" id="radio1" checked/>
  <input type="radio" name="radio_button" id="radio2" />
  <input type="radio" name="radio_button" id="radio3" />
  <input type="radio" name="radio_button" id="radio4" />
  <div class="slider first">
    <div class="slide slide1">
      <div class="caption">
        <h2> Slide 1</h2>
        <p>ted her footsteps to the path which they had taken. She was just having a good cry all to herself. The mosquitoes made merry over her, biting her firm, round arms and nipping at her bare insteps.but here he sat with a blank screen in front of
          him. That blank screen taunting him day after day had started to play with his mind. He didn't understand why he couldn't even type a single word, just one to begin the process and build from there. And yet, he already knew that the eight hours
          he was prepared to sit in front of his computer today would end with the screen remaining bl</p>
      </div>
    </div>
    <div class="slide slide2">
      <div class="caption">
        <h2> Slide 2</h2>
        <p>ted her footsteps to the path which they had taken. She was just having a good cry all to herself. The mosquitoes made merry over her, biting her firm, round arms and nipping at her bare insteps.but here he sat with a blank screen in front of
          him. That blank screen taunting him day after day had started to play with his mind. He didn't understand why he couldn't even type a single word, just one to begin the process and build from there. And yet, he already knew that the eight hours
          he was prepared to sit in front of his computer today would end with the screen remaining bl</p>
      </div>
    </div>
    <div class="slide slide3">
      <div class="caption">
        <h2> Slide 3</h2>
        <p>ted her footsteps to the path which they had taken. She was just having a good cry all to herself. The mosquitoes made merry over her, biting her firm, round arms and nipping at her bare insteps.but here he sat with a blank screen in front of
          him. That blank screen taunting him day after day had started to play with his mind. He didn't understand why he couldn't even type a single word, just one to begin the process and build from there. And yet, he already knew that the eight hours
          he was prepared to sit in front of his computer today would end with the screen remaining bl</p>
      </div>
    </div>
    <div class="slide slide4">
      <div class="caption">
        <h2> Slide 4</h2>
        <p>ted her footsteps to the path which they had taken. She was just having a good cry all to herself. The mosquitoes made merry over her, biting her firm, round arms and nipping at her bare insteps.but here he sat with a blank screen in front of
          him. That blank screen taunting him day after day had started to play with his mind. He didn't understand why he couldn't even type a single word, just one to begin the process and build from there. And yet, he already knew that the eight hours
          he was prepared to sit in front of his computer today would end with the screen remaining bl</p>
      </div>
    </div>
  </div>

  <div class="slide_nav_auto">
    <div class="a_btn1"></div>
    <div class="a_btn2"></div>
    <div class="a_btn3"></div>
    <div class="a_btn4"></div>

  </div>
  <div class="slide_nav">
    <label for="radio1" class="slide_bar"></label>
    <label for="radio2" class="slide_bar"></label>
    <label for="radio3" class="slide_bar"></label>
    <label for="radio4" class="slide_bar"></label>
  </div>

user_21595280

When clicked, you need to give the clicked slide number to the "counter" variable. Then it continues where it left off. You will define a variable like "var si = setInterval". Each button you click will delete it by saying "clearInterval(si)" and you will need to define "si" again.

user_136283680

You need to clear the interval on each button when it's clicked.

var counter = 1;

 const interval = setInterval(function(){
   document.getElementById('radio' + counter).checked = true;
   counter++;
     if(counter > 4){
       counter = 1;
     }
 }, 3000);

const buttons = document.querySelectorAll(".slide_bar");

for (let i = 0; i < buttons.length; i++) {
  buttons[i].onclick = () => {
    clearInterval(interval);
  };
}
user_28747540
Related