sendik @sendik

Как добавить анимацию при смене слайда?

у меня все слайды в 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'"> &times </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)">&#10094</span>
		<span class="next" onclick="nextSlide(0)">&#10095</span>
	</div>

	<script src="js.js"></script>
</body>
</html>

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 = 0,
	doc = document,
	modal = doc.getElementById('modalSlider'),
	modalImg = doc.getElementById('img01'),
	// slides = imgMassive,
	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 >= imgMassive.length) {
		index = 0 ;	
	}
	index+=n;
	modalImg.src = imgMassive[index];
	prev();
}
function prevSlide(n) {
	index--;
	if (index < 0) {
		index = imgMassive.length-1;
	}
	index-=n;
	modalImg.src = imgMassive[index];
	prev();
}

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';
	}
}