JSFiddle - React, Tailwind, and code Playground

by Sukanya Halder

HTML

<div class="imageSlider">
    <div class="slider">
    <div class="prev"></div>
    <div class="next"></div>
        <div>
</div>

CSS

.imageSlider{
    margin:5px;
    width:300px;
    height:200px;
    border:1px solid black;
    
}

.prev{
    width:30px;
    height:20px;
    /*border:1px solid red;    */
    float:left;   
}
.next{        
    width:30px;
    height:20px;
   /* border:1px solid red;*/
    float:right;    
}
.slider{
     margin:5px;
    top:40%;    
    height:22px;    
    position:relative;    
}
img{
    position: relative;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-repeat: no-repeat;    
    width: 90%;
    height:90%;
}

JavaScript

var imgArray = new Array();

imgArray[0] = new Image();
imgArray[0].src = 'http://supplychaininsights.com/wp-content/uploads/2014/12/intel-company-logo-png-hd-sk.png';

imgArray[1] = new Image();
imgArray[1].src = 'http://upload.wikimedia.org/wikipedia/commons/thumb/4/48/Dell_Logo.svg/2000px-Dell_Logo.svg.png';

imgArray[2] = new Image();
imgArray[2].src = 'http://upload.wikimedia.org/wikipedia/commons/thumb/4/48/Dell_Logo.svg/2000px-Dell_Logo.svg.png';

imgArray[3] = new Image();
imgArray[3].src = 'http://upload.wikimedia.org/wikipedia/commons/thumb/4/48/Dell_Logo.svg/2000px-Dell_Logo.svg.png';

var prevImg=new Image();
prevImg.src = 'http://witrina.kz/sites/all/themes/acquia_marina/images/icons/arrow-back-icon.png';
var nextImg=new Image();
nextImg.src=
'http://www.iconarchive.com/download/i86016/graphicloads/100-flat-2/arrow-next-3.ico';

$(document).ready(function(){
    debugger    
    $(".imageSlider").append(imgArray[0]);
    $(".prev").append(prevImg);
    $(".next").append(nextImg);
    $(".prev").click(function(){
        debugger
        var imgsrc= $(this).find("img").attr("src");
        $(imgArray).each(function(){
            if($(this).src ==imgsrc)
            {
                debugger
                alert();
                $(".imageSlider").remove("img");
                $(".imageSlider").append(prevImg);
            }
        });
        var indexofImg=imgArray.src.indexOf($("imageSlider").css("background-image"));
        console.write(indexofImg);
        if(indexofImg==0) indexofImg=imgArray.length-1;
    });
    $(".next").click(function(){
        
    });
});