JSFiddle - React, Tailwind, and code Playground

by deepak sisodiya

HTML

<img id="images_id" src="">
<button class="rightButton" id="nextButton">right</button>
<button class="leftButton" id="preButton">left</button>

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

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() {
        this.imageid.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)

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