JSFiddle - React, Tailwind, and code Playground

by Ishank Dubey

HTML

<div data-role="page" data-theme="a">
    <div data-role="content">
    <div class="wrapper">
    <img id="slide" src="http://lorempixel.com/output/cats-q-c-100-100-4.jpg" />
    <img id="slide1" src="http://lorempixel.com/output/cats-q-c-100-100-5.jpg" />
</div>
    </div>

</div>

CSS

.wrapper {
    position: relative;
    overflow: hidden;
    width: 100px;
    height: 100px; 
    border: 1px solid black;
}

#slide {
    position: absolute;
    margin-left: 00px;
    width: 100px;
    height: 100px;
    background: blue;
    transition: 1s;
    z-index:100;
}
#slide1 {
    position: absolute;
    margin-left: 100px;
    width: 100px;
    height: 100px;
    background: blue;
    z-index:0;
    transition: 1s;
}

JavaScript

var anArray = ["http://lorempixel.com/output/cats-q-c-100-100-4.jpg",
               "http://lorempixel.com/output/cats-q-c-100-100-5.jpg",
               "http://lorempixel.com/output/cats-q-c-100-100-6.jpg",
               "http://lorempixel.com/output/cats-q-c-100-100-7.jpg",
               "http://lorempixel.com/output/cats-q-c-100-100-8.jpg"];
var imagePointer = 01;
var sliderFunction = function(){
    imagePointer++;
    if(imagePointer>anArray.length-1){
      imagePointer = 0;
    }
    //alert("dd");
    var toBeSlidedtoContainerWidth;
    var toBeShown;
    if(Math.abs(parseInt($("#slide").css("margin-left")))==0){
    toBeShown = $("#slide1");
    toBeShown.show();
    toBeSlidedtoContainerWidth = $("#slide");     
    }else{
    toBeShown = $("#slide");
    toBeShown.show();
    toBeSlidedtoContainerWidth = $("#slide1");
    }
    
    toBeSlidedtoContainerWidth.animate({marginLeft:"-100px"},200,function(){
    setTimeout(function(){
    toBeSlidedtoContainerWidth.hide();
    toBeSlidedtoContainerWidth.css("margin-left","100px");
    toBeSlidedtoContainerWidth.attr("src",anArray[imagePointer]);
    },900);
    
    });
    toBeShown.animate({marginLeft:"00px"},200,function(){});
}



var theId = setInterval(function(){sliderFunction();},3000);
//sliderFunction();
//



//$("#slide2").animate({right:-100},400);