<html>

<head>
<meta name="viewport" content="width=device-width, initial-scale=1">

<style>
.mySlides {
  display:none;
}

/* Zwevende knoppen */
.top-buttons {
  position: fixed;
  top: 15px;
  right: 15px;
  z-index: 9999;
  display: flex;
  gap: 10px;
}

.top-buttons button {
  background: rgba(0, 51, 102, 0.85);
  color: white;
  border: 1px solid white;
  border-radius: 6px;
  padding: 10px 16px;
  font-size: 16px;
  cursor: pointer;
}

.top-buttons button:hover {
  background: rgba(0, 80, 140, 0.95);
}
</style>
</head>

<body bgcolor="#003366">

<!-- Floating buttons -->
<div class="top-buttons">
  <button onclick="goFullscreen()">⛶ Fullscreen</button>
<a href=../index.html>
  <button onclick="goBack()">↩ Terug</button>
</a>
</div>

<div class="w3-content w3-section" style="max-width:auto">
  <img class="mySlides" src="abdij-maria-refugie.jpg" style="width:100%">
  <img class="mySlides" src="azc-in-uden.jpg" style="width:100%">
  <img class="mySlides" src="brandweer-kazerne.jpg" style="width:100%">
  <img class="mySlides" src="buurthuis-de-balans.jpg" style="width:100%">
  <img class="mySlides" src="de-bibliotheek-uden.jpg" style="width:100%">
  <img class="mySlides" src="dela-lindehof-crematorium.jpg" style="width:100%">
</div>

<script>

var myIndex = 0;
carousel();

function carousel() {
  var i;
  var x = document.getElementsByClassName("mySlides");

  for (i = 0; i < x.length; i++) {
    x[i].style.display = "none";
  }

  myIndex++;

  if (myIndex > x.length) {
    myIndex = 1;
  }

  x[myIndex-1].style.display = "block";

  setTimeout(carousel, 5000);
}


/* Fullscreen */
function goFullscreen() {
  var elem = document.documentElement;

  if (elem.requestFullscreen) {
    elem.requestFullscreen();
  } else if (elem.webkitRequestFullscreen) {
    elem.webkitRequestFullscreen();
  } else if (elem.msRequestFullscreen) {
    elem.msRequestFullscreen();
  }
}


/* Terug uit fullscreen */
function goBack() {
  if (document.fullscreenElement) {
    document.exitFullscreen();
  } else if (document.webkitFullscreenElement) {
    document.webkitExitFullscreen();
  } else if (document.msFullscreenElement) {
    document.msExitFullscreen();
  } else {
    window.history.back();
  }
}

</script>

</body>
</html>