Why won't the last slide display? How can I ensure that the first image is shown immediately after the side loads, without any delay? I've attempted various solutions but always encountered issues (such as displaying two images simultaneously) and now this.
<!DOCTYPE html>
<html lang="pl">
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="style.css">
<script src="https://use.fontawesome.com/19445204e2.js"></script>
<script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
<script type="text/javascript">
// Initial slide
var numer = 0;
function changeslide()
{
var imagesnumber=document.getElementById("slider").getElementsByTagName("img");
for(var i = 0; i < imagesnumber.length; i++)
{
imagesnumber[i].style.display = "none";
}
// Display current index
$("#slide"+numer).fadeIn(500).css('display','block');
if(numer >= imagesnumber.length-1)
numer = 0;
else
numer++;
timer1 = setTimeout("changeslide()", 3000);
}
</script>
</head>
<body onload="changeslide()">
<div id="slider">
<img src="slides/img1.jpg" id="slide1">
<img src="slides/img2.jpg" id="slide2">
<img src="slides/img3.jpg" id="slide3">
<img src="slides/img4.jpg" id="slide4">
<img src="slides/img5.jpg" id="slide5">
</div>
</body>
</html>