JSFiddle - React, Tailwind, and code Playground

HTML

<div id="slideshow">
		<div id="slideshowWindow">
			<div class="slide"><img src="http://dummyimage.com/1366x400/330433/fff&text=img1" alt="">
	

			</div>
			<div class="slide"><img src="http://dummyimage.com/1366x400/330433/fff&text=img2" alt="">

			</div>

			<div class="slide"><img src="http://dummyimage.com/1366x400/330433/fff&text=img3" alt="">

			</div>

			<div class="slide"><img src="http://dummyimage.com/1366x400/330433/fff&text=img4" alt="">

			</div>

		</div>
	</div>

CSS

body{
	padding: 0;
	margin: 0;
}
		#slideshow{
			width: 100%;
		}
		#slideshow #slideshowWindow{
			width: 100%;
			margin: 0;
			padding: 0;
			position: relative;
			overflow: hidden;
			white-space: nowrap;
			overflow: hidden;
		}
		#slideshow #slideshowWindow .slide{
			margin: 0;
			padding: 0;
			width: 100%;
			/*float: left;*/
			position: relative;
		}
		img{
			width: 100%;
		}

JavaScript

$(document).ready(function(){
			
			var currentPosition = 0;
			
			
			var slides = $('.slide');
			var numberOfSlides = slides.length;
			var slideShowInterval;
			var speed = 3000;
			var windowwidth;
			slideShowInterval = setInterval(changePosition, speed)
            var slideWidth = $('.slide').width()
            $('.slide').width(slideWidth)
			$(window).resize(function(){
				slideWidth = $(window).width()
                $('.slide').width(slideWidth)
                holder.css("width", numberOfSlides*slideWidth)
			})
			
			slides.wrapAll('<div id = "slideHolder"></div>')
            var holder = $('#slideHolder')
            holder.css("width", numberOfSlides*slideWidth)
			slides.css({"float" : "left"});			
            
			function changePosition(){
				if (currentPosition == numberOfSlides-1){
					currentPosition = 0;
				}else{
					currentPosition++;
				}
				moveSlide();
			}
			function moveSlide(){
				$('#slideHolder').animate({"marginLeft" : slideWidth * (-currentPosition)})
			}

		});