Как добавить анимацию при смене слайда? Прописываю событие, не помогает. все слайды у меня в 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"],
index = null,
doc = document,
modal = doc.getElementById('modalSlider'),
modalImg = doc.getElementById('img01'),
prev1 = doc.getElementById('prev1'),
prev2 = doc.getElementById('prev2'),
prev3 = doc.getElementById('prev3'),
prev4 = doc.getElementById('prev4'),
prev5 = doc.getElementById('prev5');
function openSlider(funcImg) {
modal.style.display = 'block';
modalImg.src = imgMassive[funcImg];
index += funcImg;
prev();
}
function nextSlide(n) {
index++;
if (index >=9) {
index = 0;
}
index+=n;
modalImg.src = imgMassive[index];
prev();
document.getElementById("img01").style.transform = "scale(1)";
}
function prevSlide(n) {
--index;
if (index <= 0) {
index = 8;
}
index-=n;
modalImg.src = imgMassive[index];
prev();
document.getElementById("img01").style.transform = "scale(1)";
}
function prev() {
prev1.src = imgMassive[index-2];
prev2.src = imgMassive[index-1];
prev3.src = imgMassive[index];
prev4.src = imgMassive[index+1];
prev5.src = imgMassive[index+2];
}
function plusSlidePrev(el) {
switch(el){
case 1:
nextSlide(0);
break;
case 2:
nextSlide(1);
break;
case -1:
prevSlide(0);
break;
case -2:
prevSlide(1);
break;
}
}
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = 'none';
}
}
<!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'"> × </span>
<img class="modalImage" id="img01">
<div class="previews">
<img class="prevMini" id="prev1" onclick="plusSlidePrev(-2)"> <!-- -2 -->
<img class="prevMini" id="prev2" onclick="plusSlidePrev(-1)"> <!-- -1 -->
<span class="prev3"><img class="prevMini" id="prev3"></span> <!-- 0 -->
<img class="prevMini" id="prev4" onclick="plusSlidePrev(+1)"> <!-- 1 -->
<img class="prevMini" id="prev5" onclick="plusSlidePrev(+2)"> <!-- 2 -->
</div>
<span class="prev" onclick="prevSlide(0)">❮</span>
<span class="next pr" onclick="nextSlide(0)">❯</span>
</div>
<script src="js.js"></script>
</body>
</html>
