пытаюсь написать слайдер модальный на js. При клике на картинку, она должна в модальном открываться в полный размер. в js поместил все картинки в массив. что то сломалось)
вот код
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>slider</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="mainPreview">
<img src="img/1.jpg" class="imgPrv" onclick="openSlider(0)">
<img src="img/2.jpg" class="imgPrv" onclick="openSlider(1)">
<img src="img/3.jpg" class="imgPrv" onclick="openSlider(2)">
<img src="img/4.jpg" class="imgPrv" onclick="openSlider(3)">
<img src="img/5.jpg" class="imgPrv" onclick="openSlider(4)">
<img src="img/6.jpg" class="imgPrv" onclick="openSlider(5)">
<img src="img/7.jpg" class="imgPrv" onclick="openSlider(6)">
<img src="img/8.jpg" class="imgPrv" onclick="openSlider(7)">
<img src="img/9.jpg" class="imgPrv" onclick="openSlider(8)">
</div>
<div id="modalSlider">
<span id="close" onclick="document.getElementById('modalSlider').style.display='none' "> close </span>
<img class="modalImage" id="img01">
</div>
<script src="js.js"></script>
</body>
</html>
JS
var imgMassive = ["img/1.jpg", "img/2.jpg", "img/3.jpg", "img/4.jpg", "img/5.jpg",
"img/6.jpg", "img/7.jpg", "img/8.jpg", "img/9.jpg"];
var modal = document.getElementById('modalSlider');
var modalImg = document.getElementById('img01');
function openSlider(funcImg) {
modal.style.display = 'block';
modalImg.src = imgMassive[funcImg].src;
}