JSFiddle - React, Tailwind, and code Playground

by deepak sisodiya

HTML

<img id="images_id" src="">

CSS

img {
   position: absolute;
   top: 50%;
   left: 50%;
   width: 500px;
   margin-top: -250px; /* Half the height */
   margin-left: -250px; /* Half the width */
}

JavaScript

// slider of images

$(document).ready(function() {
	setInterval(function(){
        imageIndex++
	    $("#images_id").attr('src', image[imageIndex-1]);
	    if(imageIndex === image.length) {
	    	imageIndex = 0;
    	}
    }, 2000);
});
var image = new Array("http://www.pikachoose.com/wp-content/uploads/main-demo/1.jpg","http://www.pikachoose.com/wp-content/uploads/main-demo/2.jpg","http://www.pikachoose.com/wp-content/uploads/main-demo/3.jpg")
var imageIndex = 0