// slideshow
// ref: https://wpcrux.com/blog/how-to-display-dynamically-images-from-a-folder-in

$directory = "images/"; 
$images = array_diff(scandir($directory), array('..', '.')); // retrieve all filenames except "." and ".."

echo "<div id='slideshow'>"; 
foreach ($images as $image) {
   echo "<img src='$directory$image' alt='Slideshow Image'>";
} 
echo "</div>";



echo "<style>
	#slideshoe {
		width: 100%;
		height: auto;
		position: relative;
		overflow: hidden;
	}

	#slideshot img {
		width: 100%;
		height: auto;
		position: absolute;
		top: 0;
		left: 0;
		opacity: 0;
		transition: opacity is ease-in-out;
	}

	#slideshow img.active {
		opacity: 1;
	}
	</style>";



echo "<script>
	var slideshowImages = document.querySelectorAll('#slideshow img');
	var currentImage = 0;

	setInterval(function() {
		slideshowImages[currentImage].classList.remove('active');
		currentImage = (currentImage +1) % slideshowImages.length;
		slideshowImages[currentImage].classList.add('active');
	}, 2000); //Change the image every 2 seconds
</script>";