Why is there more bullets on the slider than necessary?

Question

css

There is a slider. But there are more bulettes on it than you need. There are 5 slides, and there are 11 bullets in general. On the first 5, the image is displayed, the remaining 6 are empty. Why this happens, I can't figure it out.
JS:

var hwSlideSpeed = 700;
var hwTimeOut = 3000;
var hwNeedLinks = true;
 
$(document).ready(function(e) {
    $('.slide').css(
        {"position" : "absolute",
         "top":'0', "left": '0'}).hide().eq(0).show();
    var slideNum = 0;
    var slideTime;
    slideCount = $(".slider .slide").size();
    var animSlide = function(arrow){
        clearTimeout(slideTime);
        $('.slide').eq(slideNum).fadeOut(hwSlideSpeed);
        if(arrow == "next"){
            if(slideNum == (slideCount-1)){slideNum=0;}
            else{slideNum++}
            }
        else if(arrow == "prew")
        {
            if(slideNum == 0){slideNum=slideCount-1;}
            else{slideNum-=1}
        }
        else{
            slideNum = arrow;
            }
        $('.slide').eq(slideNum).fadeIn(hwSlideSpeed, rotator);
        $(".control-slide.active").removeClass("active");
        $('.control-slide').eq(slideNum).addClass('active');
        }
if(hwNeedLinks){
var $linkArrow = $('<a class="prewbutton" href="#"></a><a class="nextbutton" href="#"></a>')
    .prependTo('.slider');      
    $('.nextbutton').click(function(){
        animSlide("next");
 
        })
    $('.prewbutton').click(function(){
        animSlide("prew");
        })
}
    var $adderSpan = '';
    $('.slide').each(function(index) {
            $adderSpan += '<span class = "control-slide">' + index + '</span>';
        });
    $('<div class ="sli-links">' + $adderSpan +'</div>').appendTo('.slider-wrap');
    $(".control-slide:first").addClass("active");
     
    $('.control-slide').click(function(){
    var goToNum = parseFloat($(this).text());
    animSlide(goToNum);
    });
    var pause = false;
    var rotator = function(){
    if(!pause){slideTime = setTimeout(function(){animSlide('next')}, hwTimeOut);}
            }
    $('.slider-wrap').hover(    
        function(){clearTimeout(slideTime); pause = true;},
        function(){pause = false; rotator();
        });
    rotator();
});

CSS:

.slider-wrap {
  position: relative;
}

.slider img {
  width: 100%;
}

.slider { /* Оболочка слайдера */
    /*width: 640px;*/
    position: relative;
    height: 436px;
    overflow: hidden;
    position: relative;
}

.slide { /* Слайд */
    width: 100%;
    height: 100%;
}

.sli-links { /* Кнопки смены слайдов */
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 27px;
    z-index: 10;
}

.sli-links .control-slide {
    margin-right: 11px;
    display: inline-block;
    width: 20px;
    height: 20px;
    overflow: hidden;
    text-indent: -9999px;
    background: url(../img/circle.png) center bottom no-repeat;
}

.sli-links .control-slide:last-child {
  margin-right: 0;
}

.sli-links .control-slide:hover {
    cursor: pointer;
    background: url(../img/circle-hover.png) center center no-repeat;
}

.sli-links .control-slide.active {
    background-position: center top;
    background: url(../img/circle-active.png) center center no-repeat;

}

.prewbutton, .nextbutton { /* Ссылка "Следующий" и "Педыдущий" */
    display: block;
    width: 44px;
    height: 44px;
    position: absolute;
    top: 0;
    overflow: hidden;
    text-indent: -999px;
    z-index: 3;
    outline: none !important;
}

.prewbutton {
  top: 50%;
  transform: translateY(-50%);
  left: 40px;
  background: url(../img/prev.png) no-repeat;
}

.nextbutton {
    top: 50%;
  transform: translateY(-50%);
    right: 40px;
    background: url(../img/next.png) no-repeat;
}

.prewbutton:hover {
    background: url(../img/prev-hover.png) no-repeat;
}

.nextbutton:hover {
    background: url(../img/next-hover.png) no-repeat;
}

HTML:

<div class="slider">
  <div class="slide">
    <img src="img/slider-img.png" alt="slide1">
  </div>
  <div class="slide">
    <img src="img/slider-img.png" alt="slide2">
  </div>
  <div class="slide">
    <img src="img/slider-img.png" alt="slide3">
  </div>
  <div class="slide">
    <img src="img/slider-img.png" alt="slide4">
  </div>
  <div class="slide">
    <img src="img/slider-img.png" alt="slide5">
  </div>
</div>