How to load new contents into an iFrame every few seconds using JavaScript?


We need to create a Slide Show effect, so that new content is loaded into an iFrame every X Seconds With the current content in the iFrame sliding to the left at a gentle speed as the new content is loaded into its place.

How do we do this via JavaScript?
No JQuery please.

To be exact, I know that we load new content into iFrame via JS code:

document.getElementById(‘slideshow’).src = ‘people/img7.php’;

But how to set the JS code that will wait X seconds before it runs the above line again to load the next page?

And how to slide the content from left to right?


You can do the slide with vanilla JS, but it’s much easier with jQuery.

The x seconds of new content is a simple setInterval() command.


So what is the exact JS Code for doing this and having the sliding effect?


I’ve never tried the sliding effect in vanilla JS. Someone, here, might be able to help you with that.

Whatever the code is, if you put it in a function called, say, “slideData()”, then after the function, you would put:

var slideData = setInterval(‘slideData()’, 5000);

This will run “slideData()” function every 5 seconds (5000 milliseconds = 5 seconds.)



This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.