JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Slider</title>
	<link rel="stylesheet" href="css/style.css">
	<link rel="stylesheet" href="http://code.jquery.com/jquery-2.1.3.min.js">
	<script type="text/javascript">
		function Slider() {
			$(".slider #1").show("fade",500);
		}
	</script>	
</head>
<body>
	<div class="slider">
		<img id="1" src="http://openaddon.com/joomla/vt_trucking/images/content/slides/slide1.jpg" alt="">
		<img id="2" src="image/slider-2.jpg" alt="">
		<img id="3" src="image/slider-3.jpg" alt="">
	</div>
	<div class="shadow"></div>
</body>
</html>

CSS

.slider {
	margin: 20px auto;
	width: 1300px;
	height: 552px;
	overflow:hidden;
}
.shadow {
	width: 1300px;
	height:144px;
	background: url(../image/shadow.png) no-repeat;
	background-position: center;
	margin: 0 auto;

}

.slider img {
	width: 1300px;
	height: 144px;
    display:none;
}