<div class="slide slide--one">
 <div class="slide--desc">
		Photography #1
	</div>
</div>
<div class="slide slide--two">
 <div class="slide--desc">
		Photography #2
	</div>
</div>
<div class="slide slide--three">
 <div class="slide--desc">
		Photography #3
	</div>
</div>
<div class="slide slide--four">
 <div class="slide--desc">
		Photography #4
	</div>
</div>
<span class="nav nav--previous fa fa-chevron-left" id="previous"></span>
<span class="nav nav--next fa fa-chevron-right" id="next"></span>
@import url('https://fonts.googleapis.com/css?family=Josefin+Sans');

html,
body {
 height: 100%;
 margin: 0;
 overflow-y: hidden;
 overflow-x: hidden;
	font-family: 'Josefin Sans', sans-serif;
}

.nav {
 position: absolute;
 top: 50%;
	transform: translateY(-50%);
	font-size: 3em;
	color: #ffffff;
 cursor: pointer;
	opacity: 0.6;
	transition: opacity 0.2s;
}

.nav:hover {
	opacity: 1;
}

.nav--next {
 right: 0.5em;
}

.nav--previous {
 display: none;
 left: 0.5em;
}

.slide {
 width: 100%;
 height: 100%;
 position: absolute;
 transition: all 1s ease-in-out;
	background-size: cover;
	background-position: center center;
}

.slide--desc {
 font-size: 1em;
	color: #ffffff;
	text-shadow: 0 0 0.25em rgba(0, 0, 0, 1);
	margin: 1em;
}

.slide--one {
	background-image: url('https://static.pexels.com/photos/443356/pexels-photo-443356.jpeg');
}
.slide--two {
	background-image: url('https://static.pexels.com/photos/235648/pexels-photo-235648.jpeg');
}
.slide--three {
	background-image: url('https://static.pexels.com/photos/266645/pexels-photo-266645.jpeg');
}
.slide--four {
	background-image: url('https://static.pexels.com/photos/418831/pexels-photo-418831.jpeg');
}
View Compiled
var elementCount = 0;
var firstPos = 0;
var lastPos = 0;

$(function() {
  initialiseSlider();
  $("#next").click(function() {
    slideRight();
  });
  $("#previous").click(function() {
    slideLeft();
  });
});

function initialiseSlider() {
  $(".slide").each(function(value) {
    elementCount += 1;
    var position = -100 * value;
    $(this).css("left", position + "%");
  });
  if (elementCount === 1)
    $("#next").hide();
}

function slideRight() {
  $(".slide").each(function(value) {
    var position = parseInt($(this)[0].style.left) + 100;
    if (value === 0) {
					firstPos = position;
				}
    $(this).css("left", position + "%");
  });
  if (firstPos !== ((elementCount - 1) * 100)) {
    $("#next").show();
    $("#previous").show();
  } else
    $("#next").hide();
}

function slideLeft() {
  $(".slide").each(function(value) {
    var position = parseInt($(this)[0].style.left) - 100;
    if (value === (elementCount - 1)) {
					lastPos = position;
				}
    $(this).css("left", position + "%");
  });
  if (lastPos !== ((elementCount - 1) * -100)) {
    $("#previous").show();
    $("#next").show();
  } else
    $("#previous").hide();
}
Run Pen

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js