JSFiddle - React, Tailwind, and code Playground

HTML

<div id="slideshow">
   <div><img src="http://farm6.static.flickr.com/5224/5658667829_2bb7d42a9c_m.jpg"></div>
   <div><img src="http://farm6.static.flickr.com/5230/5638093881_a791e4f819_m.jpg"></div>
</div>
<p>內容內容內容內容內容內容內容</p>

CSS

#slideshow {
  position: relative;
  width: 50%;
  height: 240px;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.4);
  overflow: hidden;
}
#slideshow > div {
  width: 100%;
  position: absolute;
}
#slideshow > div img{
  width: 100%;
}

JavaScript

$("#slideshow > div:gt(0)").hide();

	setInterval(function() {
	  $('#slideshow > div:first')
	    .fadeOut(400)
	    .next()
	    .fadeIn(400)
	    .end()
	    .appendTo('#slideshow');
	}, 1000);