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: -250px; /* Half the height */
   margin-left: -250px; /* Half the width */
}
.rightButton {
	position: absolute;
	top: 50%;
	left: 70%	
}
.leftButton {
	position:absolute;
	top: 50%;
	left: 27%;
}

JavaScript

// images slider with right and left button

$(document).ready(function() {
    var image = new Array("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 imageIndex = 0
    var imageid = $("#images_id")
    imageid.attr('src', image[0])
	$("#nextButton").click(function(){
		nextButton()
	});
	$("#preButton").click(function(){
		preButton()
	})
    function nextButton() {
        imageIndex++
		if(imageIndex === image.length) {
			imageIndex = 0
		}
        imageid.attr('src', image[imageIndex]);
    }
    function preButton() {
        imageIndex--
		if(imageIndex === -1) {
			imageIndex = image.length - 1	
		}
		imageid.attr('src', image[imageIndex]);
    }
});