JSFiddle - React, Tailwind, and code Playground

by Tahir Ahmed

HTML

<div id="mainImageGallery">
	<img class="imageLeft" src=""/> <img class="image1" src=""/>
	<img class="imageRight" width="150" src=""/>
	<img class="imageNoneLeft" src=""/> <img class="imageNoneRight" src=""/>
	<input type="button" class="leftCarousel" value="<"/>
	<input type="button" class="rightCarousel" value=">"/>
	<input type="image" class="fullScreen" value="Full Screen" src="https://dl.dropboxusercontent.com/u/45891870/Experiments/StackOverflow/1.5/JS.jpg" width="30"/>
</div>

CSS

#mainImageGallery .image1 {
	position: absolute;
	top: 20%;
	left: 29%;
	width: 500px;
	opacity: 1;
	display: inline;
}
#mainImageGallery .leftCarousel {
	position: absolute;
	top: 50%;
	left: 26%;
	z-index: 1;
	width: 33px;
	height: 60px;
	cursor: pointer;
}
#mainImageGallery .rightCarousel {
	position: absolute;
	top: 50%;
	left: 68.3%;
	z-index: 1;
	width: 33px;
	height: 60px;
	cursor: pointer;
}
#mainImageGallery .imageLeft {
	position: absolute;
	top: 43%;
	left: 8%;
	opacity: 0.5;
	width: 200px;
	display: inline;
	z-index: 0;
}
#mainImageGallery .imageRight {
	position: absolute;
	top: 43%;
	left: 75%;
	opacity: 0.5;
	width: 200px;
	display: inline;
	z-index: 0;
}
#mainImageGallery .imageNoneLeft {
	position: absolute;
	left: 0;
	top: 45%;
	width: 50px;
	opacity: 0.0;
}
#mainImageGallery .imageNoneRight {
	position: absolute;
	left: 99%;
	width: 50px;
	top: 45%;
	opacity: 0;
}
.imageFullScreen {
	max-width: 100%;
	max-height: 100%;
	bottom: 0;
	left: 0;
	margin: auto;
	position: fixed;
	right: 0;
	top: 0;
	z-index: 1;
}

JavaScript

var imageGallery={
	prefix:'https://dl.dropboxusercontent.com/u/45891870/Experiments/StackOverflow/1.5/',
	imagesDisplay:['JS.jpg','PIXI.jpg','GSAP.jpg','JS.jpg','PIXI.jpg','GSAP.jpg','JS.jpg','PIXI.jpg','GSAP.jpg','JS.jpg','PIXI.jpg'],
	rightSelect:document.querySelector('.rightCarousel'),
	leftSelect:document.querySelector('.leftCarousel'),
	imageMain:document.querySelector('.image1'),
	imageLeft:document.querySelector('.imageLeft'),
	imageRight:document.querySelector('.imageRight'),
	imageNoneLeft:document.querySelector('.imageNoneLeft'),
	imageNoneRight:document.querySelector('.imageNoneRight'),
	init:function(){
		imageGallery.imagesDisplay.push(imageGallery.imagesDisplay.shift());
		imageGallery.imageNoneLeft.setAttribute('src',imageGallery.prefix+imageGallery.imagesDisplay[2]);
		imageGallery.imageLeft.setAttribute('src',imageGallery.prefix+imageGallery.imagesDisplay[1]);
		imageGallery.imageMain.setAttribute('src',imageGallery.prefix+imageGallery.imagesDisplay[0]);
		imageGallery.imageRight.setAttribute('src',imageGallery.prefix+imageGallery.imagesDisplay[10]);
		imageGallery.imageNoneRight.setAttribute('src',imageGallery.prefix+imageGallery.imagesDisplay[9]);
	},
	animateImages:function(classFrom,classTo){
		var classMoving=$(classFrom);
		var...