JSFiddle - React, Tailwind, and code Playground

HTML

<div id='newsFeatured' class='ipsClearfix'>
	<ul class='featuredControls'>
		<li id='control1'> </li>
		<li id='control2'> </li>
	</ul>
	<article id='slide1' class='featuredSlide'>
		<a href=''>
			<div class='featuredImage' style='background-image: url(http://i.imgur.com/udTA5il.jpg);'></div>
		</a>
		<div class='featuredContent'>
			<h2>
				<a href="">First Slide Title</a>
			</h2>
			<section class='ipsType_normal ipsType_richText ipsType_break'>
				First slide description.
			</section>
		</div>
	</article>
    <article id='slide2' class='featuredSlide'>
		<a href=''>
			<div class='featuredImage' style='background-image: url(http://i.imgur.com/SWy0AHZ.jpg);'></div>
		</a>
		<div class='featuredContent'>
			<h2>
				<a href="">Second Slide Title</a>
			</h2>
			<section class='ipsType_normal ipsType_richText ipsType_break'>
				Second slide description.
			</section>
		</div>
	</article>
</div>

CSS

/* NEWS FEATURED SLIDER */
#newsFeatured {
	position: relative;
	height: 300px;
  	transition: 0.1s all linear;
}

	#newsFeatured:hover {
		box-shadow: -6px 0px 0px 0px #ffc60d;
	}

.featuredControls {
	opacity: 0;
	position: absolute;
	list-style-type: none;
	right: 30px;
	margin: 0;
	padding: 20px;
	z-index: 1;
	transition: 0.2s all linear;
}

	#newsFeatured:hover .featuredControls {
		opacity: 1;
      	right: 0;
	}

	.featuredControls li {
		background: rgba(0,0,0,0.7);
		display: inline-block;
		height: 20px;
		width: 15px;
		border: 0;
		border-radius: 3px;
		cursor: pointer;
	}
	.featuredControls li.active {
		background: #ffc60d;
	}

.featuredSlide {
	display: none;
	background: rgba(0,0,0,0.3);
	position: absolute;
	left: 0;
	width: 100%;
	height: 300px;
	overflow: hidden;
}

	#newsFeatured:hover .featuredSlide {
		box-shadow: -1px 0px 0px 0px #101415;
	}

#newsFeatured article.active {
	display: block;
}

.featuredImage {
	width:100%; 
	height:100%;
	background-size: cover;
	background-position: 50% 50%;
	background-repeat: no-repeat;
	transition: 0.3s all ease;
	animation: featuredImage ease 1;
	animation-duration: 1s;
	}

	@keyframes featuredImage { from { opacity: 0; background-position: 30% 50%; } to {	opacity: 1; background-position: 50% 50%;} }

.featuredContent {
	width: 100%;
	padding: 20px;
	background: rgba(0,0,0,0.65);
	position: absolute;
	bottom: 0;
	transition: 0.5s all ease;
}

	.featuredContent h2 {
		font-size: 16px;
		font-weight: normal;
		text-transform: uppercase;
		margin: 0;
		animation: featuredTitle ease 1;
		animation-duration: 1s;
	}

		@keyframes featuredTitle { from { padding-left: 75px; opacity: 0; } to { padding-left: 0; opacity: 1; } }

		.featuredContent h2 a {
			color: #ffc60d;
			margin: 0 0 5px 0;
			transition: 0.1s all linear;
		}
			#newsFeatured:hover .featuredContent h2 a {
				color: #eee;
			}

	.featuredContent section {
		color: #a7a397;
	}

JavaScript

$(document).ready(function(){
	$("#newsFeatured article:first").addClass("active");
	$("#newsFeatured li:first").addClass("active");
});

var toggleSlide = function(){
	$("#newsFeatured article.active").removeClass("active")
		.next().add("#newsFeatured article:first").last().addClass("active");
  
	$("#newsFeatured li.active").removeClass("active")
		.next().add("#newsFeatured li:first").last().addClass("active");
}
setInterval(toggleSlide, 8000);

$(document).ready(function(){
	$("#control1").on('click', function() {
		$("#slide1").addClass("active");
		$("#slide2, #slide3, #slide4, #slide5").removeClass("active");
		$("#control1").addClass("active");
		$("#control2, #control3, #control4, #control5").removeClass("active");
		clearInterval(toggleSlide);
	});
	$("#control2").on('click', function() {
		$("#slide2").addClass("active");
		$("#slide1, #slide3, #slide4, #slide5").removeClass("active");
		$("#control2").addClass("active");
		$("#control1, #control3, #control4, #control5").removeClass("active");
	});
	$("#control3").on('click', function() {
		$("#slide3").addClass("active");
		$("#slide1, #slide2, #slide4, #slide5").removeClass("active");
		$("#control3").addClass("active");
		$("#control1, #control2, #control4, #control5").removeClass("active");
	});
	$("#control4").on('click', function() {
		$("#slide4").addClass("active");
		$("#slide1, #slide2, #slide3, #slide5").removeClass("active");
		$("#control4").addClass("active");
		$("#control1, #control2, #control3, #control5").removeClass("active");
	});
	$("#control5").on('click', function() {
		$("#slide5").addClass("active");
		$("#slide1, #slide2, #slide3, #slide4").removeClass("active");
		$("#control5").addClass("active");
		$("#control1, #control2, #control3, #control4").removeClass("active");
	});
});