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