My Pure JS Touch Carousel Navigation dots doesn't work correctly

Question

When I am at second slide my navigation dot also needs to show that it is on the second dot. But instead it shows the first dot as active. However, when I click on the slide itself (after sliding) the navigation dot shows the correct position.

I think I need something triggered, to increase index value of dots also. But I am not sure. I have already tried a lot of ways but can't solve.

I have tried to add dot[index].style.backgroundColor = "rgba(255,255,255, 1)"; in dragStart() function

var slider = document.getElementById('card-slider'),
    sliderItems = document.getElementById('card-slides');

function slide2(wrapper, items) {
  var posX1 = 0,
      posX2 = 0,
      posInitial,
      posFinal,
      threshold = 100,
      slides = items.getElementsByClassName('card-slide'),
      slidesLength = slides.length,
      slideSize = items.getElementsByClassName('card-slide')[0].offsetWidth,
      firstSlide = slides[0],
      lastSlide = slides[slidesLength - 1],
      cloneFirst = firstSlide.cloneNode(true),
      cloneLast = lastSlide.cloneNode(true),
      index = 0,
      allowShift = true;
  
  // Clone first and last slide
  items.appendChild(cloneFirst);
  items.insertBefore(cloneLast, firstSlide);
  wrapper.classList.add('loaded');
  
  // Mouse events
  items.onmousedown = dragStart;
  
  // Touch events
  items.addEventListener('touchstart', dragStart);
  items.addEventListener('touchend', dragEnd);
  items.addEventListener('touchmove', dragAction);
  
           
  // Transition events
  items.addEventListener('transitionend', checkIndex);

  //Dots
  var dots = document.getElementsByClassName('dots')[0];
  var dot = dots.getElementsByClassName('dot');
  dot[0].style.backgroundColor = "rgba(255,255,255, 1)";
  
  function dragStart (e) {
      e = e || window.event;
      e.preventDefault();
    posInitial = items.offsetLeft;
    
    for(var i = 0; i < dot.length; i++) {
        dot[i].style.backgroundColor='rgba(255,255,255, .3)';
    }
    dot[index].style.backgroundColor = "rgba(255,255,255, 1)";
    
    if (e.type == 'touchstart') {
      posX1 = e.touches[0].clientX;
    } else {
        posX1 = e.clientX;
        document.onmouseup = dragEnd;
      document.onmousemove = dragAction;
    }
  }

  function dragAction (e) {
    e = e || window.event;
    if (e.type == 'touchmove') {
      posX2 = posX1 - e.touches[0].clientX;
      posX1 = e.touches[0].clientX;
    } else {
      posX2 = posX1 - e.clientX;
      posX1 = e.clientX;
    }
    items.style.left = (items.offsetLeft - posX2) + "px";
  }
  
  function dragEnd (e) {
    posFinal = items.offsetLeft;
    if (posFinal - posInitial < -threshold) {
      shiftSlide(1, 'drag');
    } else if (posFinal - posInitial > threshold) {
      shiftSlide(-1, 'drag');
    } else {
      items.style.left = (posInitial) + "px";
    }

    document.onmouseup = null;
    document.onmousemove = null;
  }
 
 
  function shiftSlide(dir, action) {
  items.classList.add('shifting');

    if (allowShift) {
      if (!action) { posInitial = items.offsetLeft; }

      if (dir == 1) {
        items.style.left = (posInitial - slideSize) + "px";
        index++;
    } else if (dir == -1) {
        items.style.left = (posInitial + slideSize) + "px";
        index--;
      }
    };
     
    allowShift = false;
  }
    
  function checkIndex (){
    items.classList.remove('shifting');

    if (index == -1) {
      items.style.left = -(slidesLength * slideSize) + "px";
      index = slidesLength - 1;
      
    }

    if (index == slidesLength) {
      items.style.left = -(1 * slideSize) + "px";
      index = 0;
    }
    
    allowShift = true;
  }

}

slide2(slider, sliderItems);

* { box-sizing: border-box; }

body {
  height: 100%;
  background-color: #7656d6;
  color: #333;
  font-family: 'Roboto', sans-serif;
  text-align: center;
  letter-spacing: 0.15em;
  font-size: 22px;
}

.card-slider {
  width: 450px;
  height:420px;
  /*box-shadow: 3px 3px 10px rgba(0,0,0,.2);*/
}

.wrapper {
  overflow:hidden;
  position: relative;
  width: 100%;
  height:420px;
  z-index: 1;
  border-radius: 16px;

}

.card-slides {
  display: flex;
  position: relative;
  top: 0;
  left: -450px;
  width: 10000px;
  border-radius: 16px;

}

.card-slides.shifting {
  transition: left .2s ease-out;
}

.card-slide {
  width: 450px;
  height:420px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  justify-content: center;
  transition: all 1s;
  position: relative;
  background: transparent;
  border-radius: 16px;
  border-radius: 2px;
}

.slide-item {
  background: white;
  width: calc(100% - 4rem);
  padding: 0 5rem;
  border-radius: 16px;
  margin: 0 auto;
}


/* The dots/bullets/indicators */
.dot {
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.active, .dot:hover {
  background-color: red;
}

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Slider</title>
</head>

<body id="body">

    <div id="card-slider" class="card-slider">
        <div class="wrapper">
          <div id="card-slides" class="card-slides information-card">
              <div class="card-slide">
              <div class="slide-item">
                <div class="card-item_badge">
                    1
                </div>
                <p class="card-item_text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Mollitia explicabo perferendis quam rerum dignissimos deleniti?</p>
            </div>
            </div>
              <div class="card-slide">
              <div class="slide-item">
                <div class="card-item_badge">
                    2
                </div>
                <p class="card-item_text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Saepe eligendi fuga, sed tempore expedita praesentium.</p>
            </div>
            </div>
              <div class="card-slide">
              <div class="slide-item">
                <div class="card-item_badge">
                    3
                </div>
                <p class="card-item_text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quo laborum ipsa harum maiores. Nobis, dolore?</p>
            </div>
            </div>
           </div>
        </div>
        <div class="dots">
          <span class="dot"></span>
          <span class="dot"></span>
          <span class="dot"></span>
      </div>
      
    </div>

    <script>


    </script>
</body>

</html>