JSFiddle - React, Tailwind, and code Playground

by Nick Hulea

HTML

<div id="imageSliding">
    <img src="https://www.google.co.in/images/srpr/logo4w.png" style="height:100px;width:300px;" id="googleLogo" />
    <img src="http://english.samaylive.com/pics/article/yahoo645_1336970261.jpg" style="height:100px;width:300px;" id="yahooLogo" />
</div>
<br clear='all' />
<input id="btnSlide" type="button" value="Click to slide..." />
<script>
  $(function() {
var clickType = 0;
$("#btnSlide").click(function () {
    if (clickType == 0) {
        $("#googleLogo").hide("slide", {
            direction: "right"
        }, 500);
        $("#yahooLogo").show("slide", {
            direction: "left"
        }, 500);
        clickType = 1;
    } else if (clickType == 1) {
        $("#yahooLogo").hide("slide", {
            direction: "right"
        }, 500);
        $("#googleLogo").show("slide", {
            direction: "left"
        }, 500);
        clickType = 0;
    }
});
setInterval(function () {
    if (clickType == 0) {
        $("#googleLogo").hide("slide", {
            direction: "right"
        }, 500);
        $("#yahooLogo").show("slide", {
            direction: "left"
        }, 500);
        clickType = 1;
    } else if (clickType == 1) {
        $("#yahooLogo").hide("slide", {
            direction: "right"
        }, 500);
        $("#googleLogo").show("slide", {
            direction: "left"
        }, 500);
        clickType = 0;
    }
}, 6000);
});  
</script>

CSS

#imageSliding {
    position:relative;
    height:100px;
}
#imageSliding img {
    position:absolute;
    left:0;
    top:0;
}
#yahooLogo {
    display:none;
}