JSFiddle - React, Tailwind, and code Playground

by deepak sisodiya

HTML

<img id="images_id" src="">
<img id="images_id2" src="">
<button class="rightButton" id="nextButton">right</button>
<button class="leftButton" id="preButton">left</button>
 <button class="rightButton2" id="nextButton2">right</button>
<button class="leftButton2" id="preButton2">left</button>

CSS

#images_id {
   position: absolute;
   top: 40%;
   left: 50%;
   width: 500px;
   margin-top: -150px; /* Half the height */
   margin-left: -250px; /* Half the width */
}
#images_id2 {
   position: absolute;
   top: 130%;
   left: 50%;
   width: 500px;
   margin-top: -300px; /* Half the height */
   margin-left: -250px; /* Half the width */
}
.rightButton {
	position: absolute;
	top: 50%;
	left: 70%	
}
.leftButton {
	position:absolute;
	top: 50%;
	left: 27%;
}
.rightButton2 {
	position: absolute;
	top: 100%;
	left: 70%	
}
.leftButton2 {
	position:absolute;
	top: 100%;
	left: 27%;
}

JavaScript

// two silder

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 imageid2 = $("#images_id2")

var obj = new SlideShow(imageArray,imageid)
var obj2 = new SlideShow(imageArray,imageid2)

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