슬라이드 쇼를 중지하고 3 초 후에 계속

이 슬라이드 쇼를 HTML / CSS / JS로 만들었는데 화살표 키를 누르면 자동 슬라이드가 중지되면 수동으로 사진을 변경할 수 있고 3 초 후에 자동 슬라이드로 돌아갈 수 있도록 만들고 싶습니다. 이것이 어떻게 작동하는지. 도움을 주시면 감사하겠습니다. 미리 감사드립니다.

JS :

var imagecount = 1;
var total = 6;
var uniqueRandoms = [];

function makeUniqueRandom() {
  if (!uniqueRandoms.length) {
    for (var i = imagecount; i <= total; i++) {
      uniqueRandoms.push(i);
    }
  }
  var index = Math.floor(Math.random() * uniqueRandoms.length);
  var val = uniqueRandoms[index];

  uniqueRandoms.splice(index, 1);

  return val;
}

function slide(x) {
  var Image = document.getElementById('img');
  imagecount = imagecount + x;
  if (imagecount > total) {
    imagecount = 1;
  }
  if (imagecount < 1) {
    imagecount = total;
  }
  Image.src = "images/img" + imagecount + ".jpg";
  ChangeText(imagecount);
}



window.setInterval(function slideA(x) {
  var Image = document.getElementById('img');
  imagescount = makeUniqueRandom();
  console.log(imagescount);
  Image.src = "images/img" + imagescount + ".jpg";
  ChangeText(imagescount);
}, 3000);


function ChangeText(imgNum) {
  var allImagesAndText = {
    1: "Seltene römische Goldmünze",
    2: "Römische Funde",
    3: "Römische Wandmalerei",
    4: "Tutanchamun",
    5: "Cheops Pyramide",
    6: "Ägyptische Malerei"
  };
  document.getElementById("text1").innerHTML = allImagesAndText[imgNum];
}

CSS :

#container {
  height: 450px;
  width: 650px;
  margin: 20px auto;
  position: relative;
  z-index: 1;
  border: 10px solid #000;
  border-radius: 10px;
}
#img {
  height: 450px;
  width: 650px;
}
#left_holder {
  height: 450px;
  width: 100px;
  position: absolute;
  left: 0px;
  top: 0px;
}
#right_holder {
  height: 450px;
  width: 100px;
  position: absolute;
  right: 0px;
  top: 0px;
}
.left {
  height: 50px;
  width: 50px;
  position: absolute;
  top: 40%;
  left: 0px;
}
.right {
  height: 50px;
  width: 50px;
  position: absolute;
  top: 40%;
  right: 0px;
}
#text1 {
  position: absolute;
  color: #fff;
  font-size: 32px;
  background-color: #000;
  opacity: 0.5;
  left: 37%;
  z-index: 2;
}

HTML :

<div id="container">
  <div id="text1">Text</div>
  <img src="images/img1.jpg" id="img" />
  <div id="left_holder">
    <img onClick="slide(-1)" class="left" src="images/arrow_left.png" />
  </div>
  <div id="right_holder">
    <img onClick="slide(1)" class="right" src="images/arrow_right.png" />
  </div>
</div>