JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>

<head>
<link href="graphix.css" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="script.js" ></script>
</head>
<body>

<div class="nav navbar-fixed-top">

	<div class="container">
		<ul class="pull-left">
			<a href="#"><li>Team</li></a>
			<a href="#"><li>Learn more</li></a>
			<a href="#"><li>Contact</li></a>
		</ul>
		<ul class="pull-right">
			<a href="#"><li>Learn more</li></a>
			<a href="#"><li>Contact</li></a>
		</ul>
		</div>
</div>



<div class="jumbotron">
	<div class="container">
		<h3>WELCOME TO SAN ANDREAS</h3>
		<p>Prepare to make your dreams come true...<p>
	</div>
</div>



<div class="actors">
<span>TEAM</span>
	<div class="container">
		<div class="row">
			<div class="col-md-4">
				<div class="thumbnail">
					<img src="http://cdn2-b.examiner.com/sites/default/files/styles/image_content_width/hash/92/f5/92f51c2146c471daad1002221888f4d3.jpg?itok=MExy-qsb">
					<span>MICHAEL</span>
				</div></div>
			<div class="col-md-4">
				<div class="thumbnail">
					<img src="http://cdn2-b.examiner.com/sites/default/files/styles/image_content_width/hash/71/92/7192e2b9c8b6a24e3c9d824942799228.jpg?itok=LVyYEoB4">
					<span>TREVOR</span>
					</div></div>
			<div class="col-md-4">
				<div class="thumbnail">
			<img src="http://media.rockstargames.com/rockstargames/img/global/downloads/buddyiconsconavatars/v_franklin_256x256.jpg">
			<a href="#"><span>FRANKLIN</span></a>
			</div>
		</div>
	</div>
</div>
</div>

<div class="slideshow ">
	<div class="slides">
	<img class ="slide active-slide" src="http://gearnuke.com/wp-content/uploads/2015/06/GTA-5.jpg">
	<img class ="slide" src="http://cdn.wegotthiscovered.com/wp-content/uploads/gta5.jpg">
	<img class ="slide"...

CSS

body{
padding-top:56px;}

.nav.navbar-fixed-top, .nav li{

width:100%;
padding:1.01em;
color:rgb(214, 214, 214);
font-weight:bold;
font-size:14px;
text-transform:uppercase;
background-color:rgba(0,0,0,1);
border-radius:0;
}

.nav li{
padding:1em;
display:inline;
}
.nav.navbar-fixed-top a:hover, .nav.navbar-fixed-top a li:hover{
color:#fff;
text-decoration:none;
}

.jumbotron{
margin:0;
height:500px;
background-image:url("http://img1.wikia.nocookie.net/__cb20130928113038/gtawiki/images/b/b8/Neighborhood-vinewood-hills.jpg");
background-size:cover;
}

.jumbotron h3{
color:#fff;
font-weight:bold;
text-align:left;
margin-top:6em;
text-shadow: 2px 2px 0.5px  #000;
}
.jumbotron p{
text-shadow: 2px 2px 0.5px  #000;
color:#fff;
}

.actors{
padding:2em;}

div.thumbnail{
   border:0;
  
}

.thumbnail img{
 box-shadow: 2px 3px 3px rgba(0, 0, 0, 0.7);
 }
span{
padding:0.5em;
display:block;
text-align:center;
font-weight:bold;
color:rgba(12, 12, 12, 1);
}
/*dots and slideshow*/

.slideshow{
background-color:#000;
text-align:center;
width:100%;
position:relative;
}

/*image slides*/
.slides{
height:100%;
max-width:100%;

}

.slide{
display:none;
margin:2em;
max-width:70%;
max-height:100%;
}


.active-slide {
display:inline;
max-width:70%;
max-height:100%;
}

/*dots*/
.slider-dots{
text-align:center;
width:100%;
font-size:1.5em;
padding:1%;
}

.dots-container{
padding:1em;
}

.slider-dots li{
display:inline;
}

.arrow-prev, .arrow-next{
font-size:16px;
color:rgb(77, 151, 201);
margin-left:1.8em;
margin-right:1.8em;
font-weight:bold;
}

a.arrow-prev:hover, a.arrow-next:hover,a.arrow-prev:active, a.arrow-next:active
{
color:#fff;
text-decoration:none;}

.active-dot{
color:#fff;
}

JavaScript

var main=function(){
	$('.arrow-next').click(function(event){
		 event.preventDefault();
		var currentSlide=$('.active-slide');
		var nextSlide=$('.active-slide').next();
		
		var currentDot=$('.active-dot');
		var nextDot=currentDot.next();

		if(nextSlide.length==0) 
		{nextDot=$('.dot').first(); 
		nextSlide=$('.slide').first();}
		
		nextSlide.fadeIn(2300).addClass('active-slide').show();
        currentSlide.fadeOut(2300).removeClass('active-slide').hide();
		$(window).scrollTop($(document).height());
		currentDot.removeClass('active-dot');
		nextDot.addClass('active-dot');

	
		
	});	
	
	$('.arrow-prev').click(function(event){
		 event.preventDefault();
		var currentSlide=$('.active-slide');
		var prevSlide=currentSlide.prev();
		
		var currentDot=$('.active-dot');
		var prevDot=currentDot.prev();

	if(prevSlide.length==0) {prevDot=$('.dot').last(); prevSlide=$('.slide').last();}
		
		currentSlide.fadeOut(2300).removeClass('active-slide').hide();
		prevSlide.fadeIn(2300).addClass('active-slide').show();
		
		currentDot.removeClass('active-dot');
		prevDot.addClass('active-dot');
	
	});	
	
};

$(document).ready(main);