Minimal Fullscreen Slider with Pure JavaScript

Preview:

Description:

A super tiny, responsive, full window contentslider which enables you to switch between a group of block elements with next/prev navigation arrows.

How to use it:

Build the markup structure for the slider.

<div class="wrapper">
  <div id="left-arrow" class="arrow"></div>
  <div id="slider">
    <div class="image image-one">
      <div class="vertical-align-wrapper">
        <span>Slide 1</span> 
      </div>
    </div>
    <div class="image image-two">
      <div class="vertical-align-wrapper"> 
        <span>Slide 2</span> 
      </div>
    </div>
    <div class="image image-three">
      <div class="vertical-align-wrapper"> 
        <span>Slide 3</span> 
      </div>
    </div>
  </div>
  <div id="right-arrow" class="arrow"></div>
</div>

The core CSS / CSS3 styles for the slider.

body, .wrapper, #slider, .image, .vertical-align-wrapper {
  width: 100%;
  height: 100vh;
}
.wrapper { position: relative; }
.arrow {
  cursor: pointer;
  position: absolute;
  width: 0;
  height: 0;
  border-style: solid;
  top: 50%;
  margin-top: -50px;
}
#left-arrow {
  border-width: 50px 40px 50px 0;
  border-color: transparent #ffffff transparent transparent;
  left: 0;
  margin-left: 25px;
}
#right-arrow {
  border-width: 50px 0 50px 40px;
  border-color: transparent transparent transparent #ffffff;
  right: 0;
  margin-right: 25px;
}
.image {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.vertical-align-wrapper {
  display: table;
  overflow: hidden;
  text-align: center;
}
.vertical-align-wrapper span {
  display: table-cell;
  vertical-align: middle;
  font-size: 5rem;
  color: #ffffff;
}
@media only screen and (max-width : 992px) {
.vertical-align-wrapper span { font-size: 2.5rem; }
#left-arrow {
  border-width: 30px 20px 30px 0;
  margin-left: 15px;
}
#right-arrow {
  border-width: 30px 0 30px 20px;
  margin-right: 15px;
}
.arrow { margin-top: -30px; }
}

Add background images to the slides.

.image-one { background-image: url("images/1.jpg"); }
.image-two { background-image: url("images/2.jpg"); }
.image-three { background-image: url("images/3.jpg"); }

The core JavaScript to active the slider.

(function () {
  var sliderImages = document.querySelectorAll('.image'),
      arrowLeft = document.querySelector('#left-arrow'),
      arrowRight = document.querySelector('#right-arrow'),
      currentImg = 0;
  function initSlider() {
      resetSlider();
      sliderImages[0].style.display = 'block';
  }
  function resetSlider() {
      for (var i = 0; i < sliderImages.length; i++) {
          sliderImages[i].style.display = 'none';
      }
  }
  function toLeft() {
      resetSlider();
      sliderImages[currentImg - 1].style.display = 'block';
      currentImg--;
  }
  function toRight() {
      resetSlider();
      sliderImages[currentImg + 1].style.display = 'block';
      currentImg++;
  }
  arrowLeft.addEventListener('click', function () {
      if (currentImg === 0) {
          currentImg = sliderImages.length;
      }
      toLeft();
  });
  arrowRight.addEventListener('click', function () {
      if (currentImg === sliderImages.length - 1) {
          currentImg = -1;
      }
      toRight();
  });
  initSlider();
})();