JSFiddle - React, Tailwind, and code Playground

HTML

<div class="slideshow">
    <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>
<br></br>
<div class="slideshow">
    <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>

CSS

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

JavaScript

$(document).ready(function() { 			
		
	$('.slideshow').each(function(i) {
		Slider.createSlider($(this), i);
	});				
		
});

var Slider = {
	slideShowImageWidth: 0,
	slideShowImageHeight: 0,
	slideShowImages: 0,
	sliderElement: null,
	newSliderFrame: null,
	
	createSlider: function (sliderElement, i) {	
		this.sliderElement = sliderElement;
		this.slideShowImageWidth = this.sliderElement.width();	
		this.slideShowImageHeight = this.sliderElement.height();
		
		this.prepareImages(this.slideShowImageWidth, this.slideShowImageHeight);

		this.newSliderFrame = this.getSliderFrame(i);	

		this.addNavigateLeftElement(this.newSliderFrame, this.slideShowImageWidth, this.slideShowImages);				
	},
	
	prepareImages: function(slideShowImageWidth, slideShowImageHeight) {
		var imgLast = this.sliderElement.find("img:last").clone();
		var imgFirst = this.sliderElement.find("img:first").clone();					
		imgLast.insertBefore(this.sliderElement.find("img:first"));
		imgFirst.insertAfter(this.sliderElement.find("img:last"));	
		
		this.slideShowImages = this.sliderElement.children("img").length;
		
		this.sliderElement.children("img").each(function() {
			var currentImgage = $(this);
			currentImgage.css({
				"width":slideShowImageWidth+"px",
				"height":slideShowImageHeight+"px",
				"float":"left",
				"margin":"0",
				"padding":"0"
			})
			
		});				
	},

	getSliderFrame: function(i) {	
		var newSliderFrame = $("<div></div>");
		newSliderFrame.css({
			"left":-this.slideShowImageWidth + "px",
			"width":(this.slideShowImageWidth * this.slideShowImages)+"px",
			"height":this.slideShowImageHeight,
			"position":"relative",
			"margin":"0",
			"padding":"0"
		})
		newSliderFrame.attr("id", "div_"+i);
			
		this.sliderElement.children("img").wrapAll(newSliderFrame);
		
		return newSliderFrame;
	},
	
	addNavigateLeftElement: function(newSliderFrame, slideShowImageWidth, slideShowImages) {
			var newNavigateLeftElement = $("<div></div>");
			newNavigateLeftElement.css({...