JSFiddle - React, Tailwind, and code Playground

by Dhruv Agarwal

HTML

<section class="first">
			<div class="slidercontainer">
				<img src="http://freephotos.atguru.in/hdphotos/car-desktop-wallpapers/sport-car-desktop-backgrounds-with-black-papel-258689.jpg" alt="image1" class="image1">
				<!--<img src="images/2.jpg" alt="image2" class="image2">
				<img src="images/3.jpg" alt="image3" class="image3">
				<img src="images/4.jpg" alt="image4" class="image4">-->
			</div>
	</section>

CSS

.first{
	position: relative;
	margin-top: 30px;
	margin-bottom: 30px;
}

.first .slidercontainer{
	position: relative;
	margin: 0px auto;
	overflow: hidden;
	width: 80%;
	background-color: red;
  border:1px solid black;
}

.first .slidercontainer img{
	position: absolute;
	top: 0px;
	max-width: 100%;
}

.image1{
	left: 0px;
}

.image2{
	left: 100%;
}

.image3{
	left: 200%;
}

.image4{
	left: 300%;
}

JavaScript

$(document).ready(function(){
var sliderImage = $(".image1");

$(sliderImage).load(function(){
		var sliderHeight = sliderImage.height();
		$(".slidercontainer").height(sliderHeight);
	});
});

$(window).resize(function(){
	var sliderHeight = $(".image1").height();
	$(".slidercontainer").height(sliderHeight);
});