I’ve managed to manipulate a slideshow carousel from w3schools for a carousel slideshow with fading, however it is unclear to me how to make each photo stay on for longer – to pause longer before fading to the next iamge (ie 30 seconds to several minutes).
How do I extend and hold each photo longer on the screen?
(Intent is to only use this on Chrome as a photo display for my monitor/tv)
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<body>
<div style="overflow: hidden; background-color: black; height: 100vh;">
<div class="w3-content w3-section" style="object-fit: contain; max-width: 100%; position: center center;">
<img class="mySlides w3-animate-fading" src="img_rr_01.jpg" style="width:100%">
<img class="mySlides w3-animate-fading" src="img_rr_02.jpg" style="width:100%">
<img class="mySlides w3-animate-fading" src="img_rr_03.jpg" style="width:100%">
<img class="mySlides w3-animate-fading" src="img_rr_04.jpg" style="width:100%">
</div>
</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, 9000);
}
</script>
</body>
</html>
I noticed I can’t just set the timeout longer as that causes some photos to just repeat or weird clipping. I also tried to adjust the css to make it longer than 10seconds, but that also causes other weird artifacts/clipping.