JSFiddle - React, Tailwind, and code Playground
HTML
<div id="holder">
<img id="page1_image" src="http://leandrovieira.com/projects/jquery/lightbox/photos/image1.jpg"/>
<img id="page2_image" src="http://soi.stanford.edu/press/ssu11-01/NASA/eitplumeg.gif "/>
<img id="page3_image" src="http://www.esfondi.zemgale.lv/highslide/sample-images/full-image.jpg" />
</div>
CSS
div {
position: relative;
}
img {
position:absolute;
}
JavaScript
$('#holder img:first').siblings().hide();
loop();
function loop(){
$('#holder img:first').delay(1000).fadeOut(1000,function(){
$(this).next().fadeIn(1000);
$(this).appendTo('#holder');
loop();
});
}