JSFiddle - React, Tailwind, and code Playground

by hello world

HTML

<!DOCTYPE html>
	<body>
		<div id="container">
			<header>
				<h1>jQuery content slider</h1>
			</header>
			<img src="http://icongal.com/gallery/image/337589/small_arrow_left.png" alt="Prev" id="prev">
			<div id="slider">
				<div class="slide">
					<div class="slide-copy">
						<h2>Slide 1</h2>
						<p>Dance and slide!</p>						
					</div>
					<img src="http://m.rgbimg.com/cache1ny0NN/users/j/ja/jana_koll/600/mfOAUfa.jpg" alt="an image">
				</div>

				<div class="slide">
					<div class="slide-copy">
						<h2>Slide 2</h2>
						<p>Dance and slide!</p>						
					</div>
					<img src="https://s-media-cache-ak0.pinimg.com/736x/f9/2e/c0/f92ec0238d508e029be8b7163205d24e.jpg" alt="an image">
				</div>

				<div class="slide">
					<div class="slide-copy">
						<h2>Slide 3</h2>
						<p>Dance and slide!</p>
					</div>
                     <img src="http://www.pptbackgroundstemplates.com/backgrounds/abstract-red-light-wave-ppt-backgrounds-powerpoint.jpg" alt="an image">
				</div>
			</div>
			<img src="http://icons.iconarchive.com/icons/saki/nuoveXT/128/Small-arrow-right-icon.png" alt="Next" id="next">
		</div>
	</body>

CSS

* {
	margin: 0;
	padding: 0;
}

body {
	font-family: 'Arial', sans-serif;
	font-size: 14px;
	color: #fff;
	background: #333;
	line-height: 1.6em;
}

a {
	color: #fff;
	text-decoration: none;
}

h1 {
	text-align: center;
	margin-bottom: 20px;
}

#container {
	width: 980px;
	margin: 40px auto;
	overflow: hidden; 
}

#slider {
	width: 940px;
	height: 350px;
	position: relative; 
	overflow: hidden;
	float: left;
	padding: 3px;
	border: #666 solid 2px;
	border-radius: 5px;
}

#silder img {
	width: 940px;
	height: 350px;
}

.slide {
	position: absolute;
}

.slide-copy {
	position: absolute;
	bottom: 0px;
	left:0;
	padding: 20px;
	background: #7f7f7f;
	background: rgba(0,0,0,0.5);
	width: 100%;
}

#prev, #next {
	float: left;
	margin-top: 130px;
	cursor: pointer;
	position: relative;
	z-index: 100;
}

#prev {
	margin-right: -45px;
}

#next {
	margin-left: -45px;
}

JavaScript

$(document).ready(function() {
	var sliding_speed = 500; 
	var autoswitch = true; 
	var autoswitch_speed = 4000;
	
	$('.slide').first().addClass('active');

	//Hide all slides, but...
	$('.slide').hide();
	
	//...show only the first slide
	$('.active').show();
	
	$('#next').on('click', function(){
		$('.active').removeClass('active').addClass('oldActive'); /*'Hide the currently active slide and mark it as oldActive so that you can go back to it using the previous button.'*/
		if($('.oldActive').is(':last-child')) {
			$('.slide').first().addClass('active');
		}else {
			$('.oldActive').next().addClass('active');	
		}
		$('.oldActive').removeClass('oldActive');
	});
	
});