JSFiddle - React, Tailwind, and code Playground

HTML

<div id="slider">
    <div class="content bg-slider active">
        <div class="wrapper">
            <h1 class="sectionTitle">Image title 1</h1>
            <div class="separator white"></div>
            <h2 class="sectionDescription">This is the description of the first image. Wanna know more? Click here.</h2>
        </div>
    </div>
    <div class="content bg-slider">
        <div class="wrapper">
            <h1 class="sectionTitle">Image title 2</h1>
            <div class="separator white"></div>
            <h2 class="sectionDescription">This is the description of the second image. Wanna know more? Click here.</h2>
        </div>
    </div>
    <div class="content bg-slider">
        <div class="wrapper">
            <h1 class="sectionTitle">Image title 3</h1>
            <div class="separator white"></div>
            <h2 class="sectionDescription">This is the description of the third image. Wanna know more? Click here.</h2>
        </div>
    </div>
</div>

<div class="nav-wrapper">
    <div class="nav-arrows prev"></div>
    <div class="nav-dots">
        <div class="current"></div>
        <div class=""></div>
        <div class=""></div>
    </div>
    <div class="nav-arrows next"></div>
</div>

CSS

@import url(http://fonts.googleapis.com/css?family=Montserrat:400,700);

/* -- COMMON -- */
html,body {
    margin:0;
}

body {
	font: 400 14px 'Montserrat', Helvetica, sans-serif;

	letter-spacing: 2px;
	text-transform: uppercase;

	color: white;
}

.separator {
	width: 24px;
	height: 4px;
}
.separator.white {
	background-color: white;
}
.separator.black {
	background-color: black;
}

/* -- MENU -- */



/* -- CANVAS -- */

.content {
	position: absolute;
	z-index: 0;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;

	overflow: hidden;

	width: 100%;
	height: 100%;
}

.wrapper {
	position: absolute;
	right: 0;
	bottom: 100px;
	left: 0;

	width: 33.333333333%;
	margin: 0 auto;
}

.sectionTitle {
	font: 700 32px/24px 'Montserrat', Helvetica, sans-serif;
	line-height: 24px;

	margin-bottom: 24px;

	letter-spacing: 4px;
}
.sectionDescription {
	font: 400 14px/18px 'Montserrat', Helvetica, sans-serif;

	margin-top: 24px;
}

/* -- SLIDER -- */

.bg-slider {
	background: url(../img/slides/image1.jpg) no-repeat center center fixed;
    background-color: red; /* demo purpose only */
	-webkit-background-size: cover;
	   -moz-background-size: cover;
	     -o-background-size: cover;
	        background-size: cover;
}
.bg-slider:nth-child(2) {
    background:green;
}
.bg-slider:nth-child(3) {
    background:blue;
}

/* -- SLIDER - NAVEGATION -- */

.nav-wrapper {
    position:absolute;
    bottom:20px;
	min-width: 250px;
	padding: 4px;
    width:calc(100% - 8px);
    text-align:center;
}

/* -- SLIDER - NAVEGATION ARROWS -- */

.nav-arrows {
    display:inline-block;
	width: 20px;
	height: 20px;

	cursor: pointer;
	-webkit-transform: rotate(45deg);
	   -moz-transform: rotate(45deg);
	    -ms-transform: rotate(45deg);
	     -o-transform: rotate(45deg);
	        transform: rotate(45deg);

	border: 4px solid white;
}

.nav-arrows.prev {
	border-top: none;
	border-right: none;
}

.nav-arrows.next {
	border-bottom: none;
	border-left: none;
}

/* -- SLIDER - NAVEGATION DOTS --...

JavaScript

$(document).ready(function(){
    $(".bg-slider").hide()
    $(".bg-slider:first-child").show();
    
    $(".nav-arrows.prev").click(function(){
        slidePrev();
    })
    
    $(".nav-arrows.next").click(function(){
        slideNext();
    })
    
    $(".nav-dots div").click(function(){
        slideTo($(this).index());
    })
});

function slidePrev() {
    if ($("#slider .active").index() == 0) {
        slideTo($("#slider .bg-slider").length - 1);
    }
    else {
        slideTo($("#slider .active").index() - 1);
    }
}

function slideNext() {
    if ($("#slider .active").index() == $("#slider .bg-slider").length - 1) {
        slideTo(0);
    }
    else {
        slideTo($("#slider .active").index() + 1);
    }
}

function slideTo(slide) {
    $("#slider .active").fadeOut().removeClass("active");
    $("#slider .bg-slider").eq(slide).fadeIn().addClass("active");
    $(".nav-dots .current").removeClass("current");
    $(".nav-dots div").eq(slide).addClass("current");
}