Доброго времени суток. Не работает слайдер на JS.При клике обработчик события останавливается на 4 айтеме и перебор прекращается

                <article class="slider">
                    <div class="slider__container">
                        <div class="vector-right"><img src="icons/left.svg" alt=""></div>
                        <div class="vector-left"><img src="icons/right.svg" alt=""></div>
                        <div class="ellipse__container">
                            <div class="ellipse__item"><img src="/icons/Ellipse.svg" alt=""></div>
                            <div class="ellipse__item"><img src="/icons/Ellipse.svg" alt=""></div>
                            <div class="ellipse__item"><img src="/icons/Ellipse.svg" alt=""></div>
                            <div class="ellipse__item"><img src="/icons/Ellipse.svg" alt=""></div>
                            <div class="ellipse__item"><img src="/icons/Ellipse.svg" alt=""></div>
                        </div>
                        <div class="slider__item " id="1"><img src="img/слайдер баннер.png"alt=" 
                        </div>
                        <div class="slider__item  "id="2"><img src="img/ship.jpg" alt=""></div>
                        <div class="slider__item  "id="3"><img src="img/snow.jpg" alt=""></div>
                        <div class="slider__item "id="4"><img src="img/vezdexod.jpg" alt=""></div>
                    </div>
<script>
    let sliderItems = document.querySelectorAll('.slider__item'),
        ellipses = document.querySelectorAll('.ellipse__item'),
        vectorRight = document.querySelector('.vector-right'),
        vectorLeft = document.querySelector('.vector-left');


    function hideSlider(){
        sliderItems.forEach( (item) => {
        item.classList.add('hide');
        item.classList.remove('show');
   });
}

function showSlide(i = 0 ){
    sliderItems[i].classList.add('show');
    sliderItems[i].classList.remove('hide');
}

hideSlider();
showSlide();

vectorRight.addEventListener('click', (event)=> {

    sliderItems.forEach((item,i) => {

            hideSlider();
            showSlide(i);
});
});
</script>