Matef @Matef

Как лучше сделать dots для слайдера?

Учусь создавать слайдер на javaScript но не могу понять как устроены dots, что я делаю не правильно, подскажите пожалуйста.
HTML

<div class="main__slider">
  <div class="slider__way">
    <img class="slider__slide" src="https://www.meme-arsenal.com/memes/029bf136901044e326ed6122b71d7e0c.jpg">
    <img class="slider__slide" src="https://www.meme-arsenal.com/memes/029bf136901044e326ed6122b71d7e0c.jpg">
    <img class="slider__slide" src="https://www.meme-arsenal.com/memes/029bf136901044e326ed6122b71d7e0c.jpg">
    <img class="slider__slide" src="https://www.meme-arsenal.com/memes/029bf136901044e326ed6122b71d7e0c.jpg">
    </div>
</div>

<div class="dots">
  <a class="dot activ" href="#"></a>
  <a class="dot" href="#"></a>
  <a class="dot" href="#"></a>
  <a class="dot" href="#"></a>
  <a class="dot" href="#"></a>
</div>
<button class="arrow arrow-prev">назад</button>
<button  class="arrow arrow-next">вперёд</button>

CSS

.main__slider {
  width:200px;
  margin:0 auto;
  overflow: hidden;
  border: 5px solid red;
}

.slider__way {
  display:flex;
  transition: all ease 1s;
}

.slider__slide {
  width:200px;
  margin-right:20px;
}

.dots {
  display:flex;
  width:200px;
  margin:0 auto;
  padding:20px 0;
}

.dot {
  display:block;
  height:10px;
  width:10px;
  margin-right:10px;
  background-color:#C4C4C4;
  border-radius:100%;
}
.activ {
  background-color:#000;
}

dot:last-child {
  margin-right:0;
}


.arrow {
  display:block;
  margin:0 auto;
  cursor: pointer;
}

const image = document.querySelectorAll('.slider__slide')
const sliderWay = document.querySelector('.slider__way')
const linkPrev = document.querySelector('.arrow-prev');
const linkNext = document.querySelector('.arrow-next');
const dots = document.querySelector('.dots');
const dotsItem = document.querySelectorAll('.dot')
let count = 0;
let width = document.querySelector('.main__slider').offsetWidth;

linkPrev.addEventListener('click', () => {
  count--;
  if(count < 0){
    count = image.length - 1;
  }
  rollSlide()
})

linkNext.addEventListener('click', () => {
  count++;
  if(count >= image.length){
    count = 0;
  }
  rollSlide()

})

function rollSlide() {
  sliderWay.style.transform = 'translate(-' + count * width + 'px)';
  dotsItem.forEach(item => {
    item.classList.remove('activ');
  })
  if(sliderWay + 1){
    dotsItem.forEach(item => {
    item.classList.add('activ');
  })
  }
}