RemoveChild removes only last element of nodelist but never the first one – Javascript

Hello i am developing slider on javaScript. At first i am creating 3 cards on init then on click to the rigth arrow i c am creating next 3 cards and previous cards need to be removed. so i using a removeChild(slider.childNodes[i]) hovewer it deleting only new cards that i add and leaves old ones, also i tried slider.removeChild(slider.firstChild and lastChild) bu it didnt help eather. here is the code

import { pets } from '/js/pets-list.js';

const arrowLeft = document.getElementById('arrow-left');
const arrowRight = document.getElementById('arrow-right');
const mobArrowLeft = document.getElementById('mobile-arrow-left');
const mobArrowRight = document.getElementById('mobile-arrow-right');

const slider = document.getElementById('slider');

let sliderPositionLeft = slider.style.left;

for (let i = 0; i < 3; i++) {
    let newCardR = document.createElement('div');
    newCardR.className = 'slider-content_card';

    let newCardImg = document.createElement('img');
    newCardImg.src = 'assets/modal-images/woody.png';
    newCardImg.alt = 'slider-pet-image';

    let newCardText = document.createElement('p');
    newCardText.textContent = 'Woody';

    let newCardButton = document.createElement('button');
    newCardButton.className = 'button_secondary';
    newCardButton.textContent = 'Learn more';

    newCardR.appendChild(newCardImg);
    newCardR.appendChild(newCardText);
    newCardR.appendChild(newCardButton);

    slider.appendChild(newCardR);
}

let clickCounterR = 0;

arrowRight.addEventListener('click', () => {
    clickCounterR++;
    console.log(slider.childNodes);
    for (let j = 0; j < 3; j++) {
        debugger;
        let newCardR = document.createElement('div');
        newCardR.className = 'slider-content_card';

        let newCardImg = document.createElement('img');
        newCardImg.src = 'assets/modal-images/woody.png';
        newCardImg.alt = 'slider-pet-image';

        let newCardText = document.createElement('p');
        newCardText.textContent = 'Woody';

        let newCardButton = document.createElement('button');
        newCardButton.className = 'button_secondary';
        newCardButton.textContent = 'Learn more';

        newCardR.appendChild(newCardImg);
        newCardR.appendChild(newCardText);
        newCardR.appendChild(newCardButton);

        slider.appendChild(newCardR);
    }
    if (clickCounterR === 2) {
        debugger;
        for (let i = 0; i < 3; i++) {
            slider.removeChild(slider.firstChild);
        }
        clickCounterR = 0;
    }
    sliderPositionLeft = sliderPositionLeft - 1004;
    slider.style.left = sliderPositionLeft + 'px';
});