Сочетание автоматической и ручной карусели HTML, CSS, JS

Question

Я создал html-баннер размером 300x600, используя 4 кадра, и я пытаюсь заставить его автоматически переходить между кадрами, но я также даю пользователю возможность вручную прокручивать их. У меня работают стрелки и переходы, но я не могу сделать круги по нижней части баннера кликабельными. Я хочу, чтобы пользователь мог щелкнуть 3-й круг и баннер, чтобы показать 3-й кадр.

<div class="container">

  <a href="#" onclick="javascript:window.open(window.clickTag1)">
    <img class="frames" src="01.jpg">
  </a>
  <a href="#" onclick="javascript:window.open(window.clickTag2)">
    <img class="frames" src="02.jpg">
  </a>
  <a href="#" onclick="javascript:window.open(window.clickTag3)">
    <img class="frames" src="03.jpg">
  </a>
  <a href="#" onclick="javascript:window.open(window.clickTag4)">
    <img class="frames" src="04.jpg">
  </a>

  <div id ="leftArrow" class="arrows"></div>
  <div id ="rightArrow" class="arrows"></div>

  <div class="circles">
    <span class="circle dot" onclick="currentDiv(1)"></span>
    <span class="circle" onclick="currentDiv(2)"></span>
    <span class="circle" onclick="currentDiv(3)"></span>
    <span class="circle" onclick="currentDiv(4)"></span>
  </div>

</div>


<script>

  // IMAGE SLIDES & CIRCLES ARRAYS, & COUNTER
  var imageSlides = document.getElementsByClassName('frames');
  var circles = document.getElementsByClassName('circle');
  var leftArrow = document.getElementById('leftArrow');
  var rightArrow = document.getElementById('rightArrow');
  var counter = 0;

  // HIDE ALL IMAGES FUNCTION
  function hideImages() {
    for (var i = 0; i < imageSlides.length; i++) {
      imageSlides[i].classList.remove('visible');
    }
  }

  // REMOVE ALL DOTS FUNCTION
  function removeDots() {
    for (var i = 0; i < imageSlides.length; i++) {
      circles[i].classList.remove('dot');
    }
  }

  function currentDiv(n) {
  showDivs(slideIndex = n);
  }

  // SINGLE IMAGE LOOP/CIRCLES FUNCTION
  function imageLoop() {
    var currentImage = imageSlides[counter];
    var currentDot = circles[counter];
    currentImage.classList.add('visible');
    removeDots();
    currentDot.classList.add('dot');
    counter++;
  }

  // LEFT & RIGHT ARROW FUNCTION & CLICK EVENT LISTENERS
  function arrowClick(e) {
    var target = e.target;
    if (target == leftArrow) {
      clearInterval(imageSlideshowInterval);
      hideImages();
      removeDots();
      if (counter == 1) {
        counter = (imageSlides.length - 1);
        imageLoop();
        imageSlideshowInterval = setInterval(slideshow, 4000);
      } else {
        counter--;
        counter--;
        imageLoop();
        imageSlideshowInterval = setInterval(slideshow, 4000);
      }
    } 
    else if (target == rightArrow) {
      clearInterval(imageSlideshowInterval);
      hideImages();
      removeDots();
      if (counter == imageSlides.length) {
        counter = 0;
        imageLoop();
        imageSlideshowInterval = setInterval(slideshow, 4000);
      } else {
        imageLoop();
        imageSlideshowInterval = setInterval(slideshow, 4000);
      }
    }
  }

  leftArrow.addEventListener('click', arrowClick);
  rightArrow.addEventListener('click', arrowClick);


  // IMAGE SLIDE FUNCTION
  function slideshow() {
    if (counter < imageSlides.length) {
      imageLoop();
    } else {
      counter = 0;
      hideImages();
      imageLoop();
    }
  }

  // SHOW FIRST IMAGE, & THEN SET & CALL SLIDE INTERVAL
  setTimeout(slideshow, 0);
  var imageSlideshowInterval = setInterval(slideshow, 4000);

</script>


<style>

  .container {
    position: absolute;
    overflow: hidden;
    width: 300px;
    height: 600px;
    top: 0;
    left: 0;
  }

  .frames {
    position: absolute;
    left: 0;
    top: 0;
    opacity: 0;
    transition: opacity 1s ease-in-out;
  }

  /* add 'visible' class via Javascript */
  .visible {
    opacity: 1;
  }

  .arrows {
    width: 28px;
    height: 28px;
    cursor: pointer;
    transition: opacity 0.2s ease-in-out;
  }

  .arrows:hover {
    opacity: 0.75;
  }

  #leftArrow {
    background-image: url(arrow_1.jpg);
    position: absolute;
    left: 0;
    top: 259px;
  }

  #rightArrow {
    background-image: url(arrow_2.jpg);
    position: absolute;
    right: 0;
    top: 259px;
  }

  .circles {
    width: 100%;
    position: absolute;
    top: 410px;
    text-align: center;
  }

  .circle {
    display: inline-block;
    margin-left: 3px;
    margin-right: 3px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    transition: 1s ease-in-out;
    background-color: #fff;
  }

  .dot {
    background-color: #13b9ab;
  }


</style>