JSFiddle - React, Tailwind, and code Playground

by Murat Kezli

HTML

<div id="slide">
<img src="https://livedemo00.template-help.com/wt_48443/images/slide-1.jpg?1541455586939" alt="#" />
<img src="https://livedemo00.template-help.com/wt_48443/images/slide-2.jpg?1541455586939" alt="#" />
<img src="https://livedemo00.template-help.com/wt_48443/images/slide-3.jpg?1541455586939" alt="#" />
</div>

CSS

body{ margin:0px;}

#slide {width:100%; height:auto;  background-color:red;}
#slide img{width:100%; width:100%; position:absolute; top:0;}

JavaScript

$(document).ready(function () {

var slidew = $("#slide img:last-child").css("height");
$("#slide").height(slidew);

slidestart();



})


$("#slide img").mouseover(function(){
slidepause();
})
$("#slide img").mouseout(function(){
slidestart();
})


function slidestart(){
timer = setInterval(function () {
        moveRight();
    }, 2000);
}

function slidepause(){
clearTimeout(timer);
timer = null;


}
var imgw = $("#slide img:first-child").css("width")+"px";
/*function moveRight() {
//$("#slide img:first-child").appendTo("#slide");
$("#slide img:first-child").animate({ 

left: -imgw+"px"
},600);





    }
    */
 
   
   
   
    function moveRight() {
    $('#slide img:last-child').appendTo($("#slide"));
    //$("#slide img:last-child").fadeOut(400);
    //$('#slide img:fisrt-child').remove();
       }