JSFiddle - React, Tailwind, and code Playground

HTML

<div id="slideshow"> 		
			<div id="sliderFrame">
				<img class="slide" src="http://d3.static.dvidshub.net/media/thumbs/photos/1302/861970/450x360_q95.jpg"/>
				<img class="slide" src="http://d3.static.dvidshub.net/media/thumbs/photos/1210/748671/450x360_q95.jpg"/>
				<img class="slide" src="http://d3.static.dvidshub.net/media/thumbs/photos/1210/761482/360x450_q95.jpg"/>
			</div>
		</div>

CSS

#slideshow { 
			margin:0; 
			padding:0; 
			width:493px; 
			height:257px; 
			position:relative; 
			overflow:hidden; 
		} 

		#sliderFrame {
			margin:0; 
			padding:0; 
			height:257px; 
			position:relative; 		
		}
		
		.slide { 
			margin:0; 
			padding:0; 
			height:257px; 			
			float: left;
		}

JavaScript

$(document).ready(function() { 			
					initSlideShow();
					
					var slideShowImageWidth = $("#slideshow").width();
					var slideShowImages = $("#sliderFrame img").length;
					$(".slide").css("width", slideShowImageWidth+"px");				
					$("#sliderFrame").css("left", -slideShowImageWidth + "px");
					$("#sliderFrame").css("width", (slideShowImageWidth * slideShowImages) +"px");
					
					var newNavigateLeftElement = getNavigateLeftElement();
					newNavigateLeftElement.click(function() {
						var currentPosition = $("#sliderFrame").position().left;						
						var newLeft = currentPosition - slideShowImageWidth;
						$("#sliderFrame").animate({left: newLeft +"px"}, 1000, function() {								
							
							var positionLastImageIsDisplayed = (slideShowImages-1) * slideShowImageWidth * -1;							
							if (newLeft == positionLastImageIsDisplayed) {
								$("#sliderFrame").css("left", -slideShowImageWidth + "px");
							}
							
						});						 
					})	

					var newNavigateRightElement = getNavigateRightElement();
					newNavigateRightElement.click(function() {
						var currentPosition = $("#sliderFrame").position().left;						
						var newRight = currentPosition + slideShowImageWidth;
						$("#sliderFrame").animate({left: newRight +"px"}, 1000, function() {								
														
							if (newRight == 0) {
								var positionOfOriginLast = (slideShowImages-2) * slideShowImageWidth * -1;
								$("#sliderFrame").css("left", positionOfOriginLast + "px");
							} 
							
						});						 
					})						
			
					function initSlideShow() {
						var imgLast = $("#sliderFrame img:last").clone();
						var imgFirst = $("#sliderFrame img:first").clone();					
						imgLast.insertBefore("#sliderFrame img:first");
						imgFirst.insertAfter("#sliderFrame img:last");					
					}
					
					function getNavigateLeftElement() {
						var newNavigateLeftElement = $("<div></div>");
						newNavigateLeftElement.css({ "height":"257px", "position":"absolute",...