I am working on a slideshow and I am trying to setInterval after it is being cleared using "clearInterval".

JavaScript

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

document.querySelectorAll(".slide_bar").forEach(item => item.addEventListener("click", function(){
  clearInterval(intervalRef)
  console.log("Slide show stopped")
}))

https://jsfiddle.net/4ygwd579/

My goal is to make clearInterval lasts for 10 seconds then the slideshow plays the NEXT slide.

It would be appreciated if someone can post the new code.