show images slide from api in javascript

i want to show image slider , the images from api so i want show two image by two with time interval like post slider but with 2 image .
that’s my code

HTML AND CSS CODE :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            padding: 0 150px;
        }
        .container {
            display: flex;
            justify-content: space-between;
        }

        .container img {
            height: 500px;
            width: 400px;
        }
    </style>
</head>
<body>
    </div>
    <script src="mainTest.js"></script>
</body>
</html>

Javascript code :

const url = 'http://localhost:3000/slider' ;
const containerG = document.querySelector('body') ; 
const container = document.querySelectorAll('.container') ; 

const nextSlideDelat = 3000;
let curentImageCounter = 0 ; 

let out = '' ; 
fetch(url)
.then(res =>res.json())
.then(data => {
    for(pic in data){
        out += `
        <div class="container">
            <div class="resultEnfant">
                <img src="${data[pic].photoEnfant}" alt="">
            </div>
            <div class="resultParent">
                <img src="${data[pic].photoPere}" alt="">
            </div>
        </div>
        ` ;
    };

    containerG.innerHTML = out ;

    container[curentImageCounter].style.display = "block"; 
    setInterval(nextContainer,nextSlideDelat);

    function nextContainer() {
        container[curentImageCounter].style.display = "none"; 
        curentImageCounter = (curentImageCounter =1)  % container.length ;  
        container[curentImageCounter].style.display = "block"; 
    }

})

when i run the code the result is all the image displayed and i got Console error :

mainTest.js:28 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'style')
    at mainTest.js:28:35