JSFiddle - React, Tailwind, and code Playground

by Ranganadh Paramkusam

HTML

<input type="button" value="&lt;" onclick="prevImage();" />
<input type="button" value="&gt;" onclick="nextImage();" />
<div class="outerCarousel">
    <div class="carousel" id="mainDiv">
        <img src="http://192.168.34.53/iPad/R&D/nagendra_akula/050612/carousel/1.jpg" />
        <img src="http://192.168.34.53/iPad/R&D/nagendra_akula/050612/carousel/8.jpg" />
        <img src="http://192.168.34.53/iPad/R&D/nagendra_akula/050612/carousel/3.jpg" />
        <img src="http://192.168.34.53/iPad/R&D/nagendra_akula/050612/carousel/4.jpg" />
        <img src="http://192.168.34.53/iPad/R&D/nagendra_akula/050612/carousel/5.jpg" />
        <img src="http://192.168.34.53/iPad/R&D/nagendra_akula/050612/carousel/6.jpg" />
        <img src="http://192.168.34.53/iPad/R&D/nagendra_akula/050612/carousel/7.jpg" />
    </div>
</div>
<script>
    function prevImage(){

    }
    function nextImage(){
        var leftPos = document.getElementById("mainDiv").offsetLeft;
        i = 0;
        x = setInterval(function(){
            if(i!='-304'){
                i--;
                document.getElementById("mainDiv").style.left = -(Math.abs(leftPos+i))+"px";
            } else {
                clearInterval(x);
            }
        },1);
    }
</script>

CSS

.outerCarousel{
    width:300px;
    height:300px;
    overflow:hidden;
}
.carousel {
    width:2130px;
    height:300px;
    display: block;
    float:left;
    position:relative;
}
img{
    margin:0px !important;
    padding:0px;
}