مشكلة في مشروع بلغة الـ html و JavaScript

هناك مشكلة في السلايدر الذي قمت بإنشائه يدويا 
فأول ما يظهر هو شاشة بيضاء . بعد التنقل في الأسهم عدة مرات تظهر الصور المطلوبة 
اريد اخفاء هذه الأمور البيضاء 
لمعاينة المشروع كامل : https://fatimabindawood.github.io/VT-Sac/

ال html  : 
 

<div id="containerHover" class="infoContainerStyle">
		<div id="mainSlider" class="w3-content w3-display-container">
			

			<button class="w3-button w3-black w3-display-left" onclick="plusDivs(-1)">&#10094;</button>
			<button class="w3-button w3-black w3-display-right" onclick="plusDivs(1)">&#10095;</button>
		</div>
	</div>



	<!-- <div id="progress" style="width: 100%;z-index:1000;" class="finish"></div> -->
	<label id="LoadingLabelId" style="position:absolute;display:none;top:40%;left:30%;font-size:40px;color:#eeeeee;z-index:1;">Loading page, Please wait...</label>
	<audio id="myAudio">
		<source id="audioSource" type="audio/mpeg" />
	</audio>

	<script>
		var slideIndex = 1;
		showDivs(slideIndex);

		function plusDivs(n) {
			showDivs(slideIndex += n);
		}

		function showDivs(n) {
			var i;
			var x = document.getElementsByClassName("mySlides");
			if (n > x.length) { slideIndex = 1 }
			if (n < 1) { slideIndex = x.length }
			for (i = 0; i < x.length; i++) {
				x[i].style.display = "none";
			}
			x[slideIndex - 1].style.display = "block";
		}
	</script>

الجافا سكريبت : 

main.js

ملف ال data : 
 

data.js