JSFiddle - React, Tailwind, and code Playground

HTML

<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>

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 {
    display: none;
	width: 1300px;
	height: 144px;
}

JavaScript

$(document).ready(function(){
    
    Slider();
    
});
function Slider() {
    $(".slider #1").fadeIn(2000);
};