本质上，问题是您得到了两个独立的Nodes集合，但使用相同的索引来解除对它们的引用。
.sliderimg获取两个div元素，但ol.controlnav li a获取四个a元素。当前代码合并了这两个独立的集合。
如果您对如何查询元素有更具体的要求，则可以使用相同的索引，并具有更强的控制力：

count = 0;

function displayImage() {
    // just get the active div (whichever one it is) and de-activate it
    let nodeList = document.querySelectorAll(".sliderimg.active");
    for (let node of nodeList) {
        node.classList.remove("active");
        // just get the active `a` element that's a child of the active node
        let pointer = node.querySelector("ol.controlnav li a.controlactive")
        if (pointer) pointer.classList.remove("controlactive");
    }
    
    // just activate whichever div is next (and it's child a elem)
    nodeList = document.querySelectorAll(".sliderimg");
    nodeList[count].classList.add("active");
    let pointerList = nodeList[count].querySelectorAll("ol.controlnav li a")
    pointerList[count].classList.add("controlactive")

    count += 1;
    if (count == nodeList.length) {
        count = 0;
    }
}

setInterval(displayImage, 4000)

.containimg .sliderimg {
    display: none;
}

.containimg .sliderimg.active.imageright {
    display: flex;
    animation: opac 0.8s;
}

.containimg .sliderimg.active.imageright2 {
    display: flex;
    animation: opac 0.8s;
}

.containimg .sliderimg.active.imageright3 {
    display: block;
    position: relative;
}

.imageright {
    background-image: url('https://themewagon.github.io/jackson/images/img_bg_2.jpg');
    background-size: cover;
    background-position: center;
    height: 100vh;
    display: flex;
    align-items: center;
    position: relative;
}

.imageright2 {
    background-image: url('https://themewagon.github.io/jackson/images/img_bg_1.jpg');
    background-size: cover;
    background-position: center;
    height: 100vh;
    display: none;
    align-items: center;
    position: relative;
}

.controlnav {
    position: absolute;
    text-align: center;
    bottom: 20px;
    z-index: 1000;
    left: 20px;
    width: auto;
    margin: 0;
    padding: 0;
    list-style: none;
}

.controlnav li {
    margin: 8px;
}

.controlpaging li a {
    width: 12px;
    height: 12px;
    display: block;
    cursor: pointer;
    text-indent: -9999px;
    box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3);
    border-radius: 20px;
}

.controlpaging li a.controlactive {
    background: rgba(147, 147, 147, 0.795);
}

<div class="containimg">
    <div class="imageright sliderimg active">
        <div class="textimage">
            <h1>I am</h1>
            <h2>a Designer</h2>
            <h3>100% html5 bootstrap templates Made</h3>
            <h3>by <a href="#" class="underline">colorlib.com</a></h3>
            <button class="viewportfolio mt-4">view portfolio <i
                    class="fa-solid fa-suitcase"></i></button>
        </div>
        <ol class="controlnav controlpaging">
            <li><a href="#" class="controlactive">1</a></li>
            <li><a href="#">2</a></li>
        </ol>
    </div>

    <div class="imageright2 sliderimg">
        <div class="textimage">
            <h1>Hi!</h1>
            <h2>I'm Sarah</h2>
            <h3>100% html5 bootstrap templates Made</h3>
            <h3>by <a href="#" class="underline">colorlib.com</a></h3>
            <button class="viewportfolio mt-4">view portfolio <i
                    class="fa-solid fa-suitcase"></i></button>
        </div>
        <ol class="controlnav controlpaging">
            <li><a href="#">1</a></li>
            <li><a href="#" class="controlactive">2</a></li>
        </ol>
    </div>
</div>