Видимо где -то не доглядел, не могу понять почему ошибка mainScript.js:20 Uncaught TypeError: headerImages.isArray is not a function:
<!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>Port</title>
<link rel="stylesheet" href="./assets/css/css/mainStyle.min.css">
</head>
<body>
<header>
<nav>
</nav>
<div class="nav-slider">
<img class="nav-slider-img" data-visible="true" src="./assets/img/default/hero-1.jpg" alt="">
<img class="nav-slider-img" data-visible="false" src="./assets/img/default/hero-2.jpg" alt="">
<img class="nav-slider-img" data-visible="false" src="./assets/img/default/hero-3.jpg" alt="">
<img class="nav-slider-img" data-visible="false" src="./assets/img/default/hero-4.jpg" alt="">
</div>
</header>
<script src="./assets/js/mainScript.js"></script>
</body>
</html>
document.addEventListener('DOMContentLoaded', ()=>{
headerImages = document.querySelectorAll('.nav-slider-img')
function chgPicNavMenu(){
headerImages.forEach(img => {
if (img.getAttribute('data-visible') == "true"){
console.log(headerImages.findIndex(img))
}
})
}
headerImages.forEach(img => {
if (img.getAttribute('data-visible') == "true"){
img.style.display = 'block'
} else {
img.style.display = 'none'
}
});
setInterval(()=>{
let visibleImgIndex = headerImages.isArray() ? headerImages.findIndex(img =>{
return img.getAttribute('data-visible') == "true"
}) : -1
console.log(visibleImgIndex)
}, 4000)
})
