JSFiddle - React, Tailwind, and code Playground

by deepak sisodiya

HTML

<script id="SlideshowTemplate" type="text/template">
    <div>
        <div>
            <img id="images_id" src="">
        </div>
        <div class="buttonGroup">
            <button class="rightButton" id="nextButton">right</button>
            <button class="leftButton" id="preButton">left</button>
        </div>
    </div>
</script>
    
<div>
    <div id="slideshowModule1"></div>
</div>

CSS

img {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 500px;
    margin-top: -150px;
    /* Half the height */
    margin-left: -250px;
    /* Half the width */
}
.rightButton {
    position: absolute;
    top: 50%;
    left: 70%
}
.leftButton {
    position:absolute;
    top: 50%;
    left: 27%;
}

JavaScript

// slider using Object , use of template

function SlideShow(imageArray, imageid) {
    this.image = imageArray
    this.imageIndex = 0
    this.imageid = imageid
}
SlideShow.prototype = {
    nextSlide: function () {
        this.imageIndex++
        if (this.imageIndex === this.image.length) {
            this.imageIndex = 0
        }
        this.setImage()
    },
    preSlide: function () {
        this.imageIndex--
        if (this.imageIndex === -1) {
            this.imageIndex = this.image.length - 1
        }
        this.setImage()
    },
    setImage: function () {
        $("#images_id").attr('src', this.image[this.imageIndex]);
    }
}

imageArray = ["http://www.pikachoose.com/wp-content/uploads/main-demo/1.jpg", "http://www.pikachoose.com/wp-content/uploads/main-demo/2.jpg", "http://www.pikachoose.com/wp-content/uploads/main-demo/3.jpg"]
var imageid = $("#images_id")

var obj = new SlideShow(imageArray, imageid)
var str = document.getElementById("SlideshowTemplate").innerHTML;
document.getElementById("slideshowModule1").innerHTML = str;

$(document).ready(function () {
    obj.setImage()
    $("#nextButton").click(function () {
        obj.nextSlide()
    })
    $("#preButton").click(function () {
        obj.preSlide()
    })
})