html5-slides

<!DOCTYPE html>
<html>
<title>Slides</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://www.w3schools.com/lib/w3-theme-blue.css">
<style>
.mySlides {display:none;}
</style>
<body class="w3-theme-dark">
<br>
<div class="w3-content" style="max-width:600px">

<img class="mySlides" src="https://s19.postimg.cc/b4d8vuazn/2015-12-29.gif" style="width:100%">

<img class="mySlides" src="https://s19.postimg.cc/k1dyndmbn/00025.jpg" style="width:100%">

<img class="mySlides" src="https://s19.postimg.cc/ke5cthk03/00019.jpg" style="width:100%">


<img class="mySlides" src="https://s19.postimg.cc/veakazc4j/tumblr_oeh4ap9_Qg_J1scdih6o1_400.gif" style="width:100%">

<img class="mySlides" src="https://s19.postimg.cc/nkzwd0ozn/00002.jpg" style="width:100%">

</div>

<!--
<div class="mySlides w3-container w3-theme-d3">
  <h1>Reeks Pics</h1>
</div>
-->

<script>
var slideIndex = 0;
carousel();

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


</body>
</html>