<div id="slider">
  <ul id="slideWrap"> 
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
  </ul>
  <a id="prev" href="#">&#8810;</a>
  <a id="next" href="#">&#8811;</a>
</div>
// Colors
$color1: #00A6ED;
$color2: #FFD966;
$color3: #F71735;
$color4: #89da59;
$color5: #9881F5;
$color6: #19191a;

body {
  margin: 10%;
}

#slider {
  position: relative;
  width: 100%;
  height: 250px;
  overflow: hidden;
  box-shadow: 0 0 30px rgba(0,0,0,0.3);
  
  ul {
    position: relative;
    list-style: none;
    height: 100%;
    width: 9999%;
    padding: 0;
    margin: 0;
    transition: all 750ms ease;
    left: 0;
    
    li {
      position: relative;
      height: 100%;
      width: calc(80vw);
      float: left;
      
      &:nth-child(1) {
        background-color: $color1;
      }
      &:nth-child(2) {
        background-color: $color2;
      }
      &:nth-child(3) {
        background-color: $color3;
      }
      &:nth-child(4) {
        background-color: $color4;
      }
      &:nth-child(5) {
        background-color: $color5;
      }
    }
  }

  #prev, #next{
    width: 50px;
    line-height: 50px;
    border-radius: 50%;
    font-size: 2rem;
    text-shadow: 0 0 20px rgba(0,0,0,0.6);
    text-align: center;
    color: white;
    text-decoration: none;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    transition: all 150ms ease;
    &:hover {
      background-color: rgba(0,0,0,0.5);
      text-shadow: 0;
    }
  }
  #prev {  
    left: 10px;
  }
  #next {
    right: 10px;
  }
}


View Compiled
var responsiveSlider = function() {

  var slider = document.getElementById("slider");
  var sliderWidth = slider.offsetWidth;
  var slideList = document.getElementById("slideWrap");
  var count = 1;
  var items = slideList.querySelectorAll("li").length;
  var prev = document.getElementById("prev");
  var next = document.getElementById("next");

  window.addEventListener('resize', function() {
    sliderWidth = slider.offsetWidth;
  });

  var prevSlide = function() {
    if(count > 1) {
      count = count - 2;
      slideList.style.left = "-" + count * sliderWidth + "px";
      count++;
    }
    else if(count = 1) {
      count = items - 1;
      slideList.style.left = "-" + count * sliderWidth + "px";
      count++;
    }
  };

  var nextSlide = function() {
    if(count < items) {
      slideList.style.left = "-" + count * sliderWidth + "px";
      count++;
    }
    else if(count = items) {
      slideList.style.left = "0px";
      count = 1;
    }
  };
  
  next.addEventListener("click", function() {
    nextSlide();
  });

  prev.addEventListener("click", function() {
    prevSlide();
  });
  
  setInterval(function() {
    nextSlide()
  }, 8000);

};

window.onload = function() {
  responsiveSlider();  
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.