Graph Slideshow

[snarko]

I have created a number of graphs in Confluence and would like to show them one at a time in an automatic slideshow on a wall monitor. Is this possible to do with standard Confluence macros?

[snarko]

I tried to create a slideshow of three Confluence pages each containing a graph by adding the below to a HTML macro on a separate page. The slideshow works and loops the pages in the div but only the first page shows its graph. The other two pages shows without their graphs. Is there a way to fix this?

<style>
.mySlides {display:none;}
</style>

<div style="border: 1px solid rgb(0, 0, 0); overflow: hidden; margin: 15px auto; max-width: 2000px;">
<iframe class="mySlides" scrolling="no" src=" https://confluence.org.mydomain.com/display/mypage1" style="border: 0px none;
margin-left: -100px; height: 760px; margin-top: -145px; width: 1500px;"></iframe>
<iframe class="mySlides" scrolling="no" src=" https://confluence.org.mydomain.com/display/mypage2" style="border: 0px none;
margin-left: -100px; height: 760px; margin-top: -145px; width: 1500px;"></iframe>
<iframe class="mySlides" scrolling="no" src="https://confluence.org.mydomain.com/display/mypage3" style="border: 0px none;
margin-left: -100px; height: 760px; margin-top: -145px; width: 1500px;"></iframe>
</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, 2000);
}
</script>