<div id="slider">
  <ul id="sliderWrap">
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
  </ul> 
  <a href="#" id="prev">&#171;</a>
  <a href="#" id="next">&#187;</a>
  <div id="num">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </div>
  <div id="lbar"></div>
  <div id="pbar"></div>
</div>

*{
  margin: 0;
  padding: 0;
}
body{
  background: #1c1c1c;
}
#slider{
  width: 100vw;
  height: 100vh;
  position: relative;
  overflow: hidden;
}
#slider ul{
  position: relative;
  list-style: none;
  width: 9999%;
  left: 0;
  transition: all 1s ease;
}
#slider ul li{
  position: relative;
  width: 100vw;
  height: 100vh;
  float: left;
}
#slider ul li:nth-child(1){
  background: url("https://images.unsplash.com/photo-1531789834639-6ef15b1e6080?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=2d9ea601ed807b90527ed0fd164a0f1e&auto=format&fit=crop&w=1353&q=80");
  background-size: cover;
  background-position: center center;
}
#slider ul li:nth-child(2){
  background: url("https://images.unsplash.com/photo-1531714954364-7af1f61c9a10?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=e32f8a5ebcba49bfe237094ef91b6df4&auto=format&fit=crop&w=1350&q=80");
  background-size: cover;
  background-position: center center;
}
#slider ul li:nth-child(3){
  background: url("https://images.unsplash.com/photo-1531711868390-535fde657ba8?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=204b8c6a6b7499f3b1c1b09bf6c42f3b&auto=format&fit=crop&w=1350&q=80");
  background-size: cover;
  background-position: center center;
}
#slider ul li:nth-child(4){
  background: url("https://images.unsplash.com/photo-1531812415018-f7054b1d3f35?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=f6fe9d459bed5dfbdf5a55180e69836b&auto=format&fit=crop&w=1373&q=80");
  background-size: cover;
  background-position: center center;
}
#slider ul li:nth-child(5){
  background: url("https://images.unsplash.com/photo-1531837716056-86a732108383?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=87b5919c08678aab5c9bb99035906d76&auto=format&fit=crop&w=1350&q=80");
  background-size: cover;
  background-position: center center;
}
#prev, #next{
  z-index: 999;
  position: absolute;
  top: 45%;
  font-size: 35px;
  color: #fff;
  text-decoration: none;
  font-family: sans-serif;
  transition: .3s ease;
}
#prev:hover, #next:hover{
  transform: scale(1.5)
}
#prev{
  left: 50px;
}
#next{
  right: 50px;
}

#slider #num{
  position: absolute;
  bottom: 20px;
  width: 100%;
  text-align: center;
}
#slider #num div{
  display: inline-block;
  width: 35px;
  height: 5px;
  background: rgba(255, 255, 255, .3);
  margin: 2px;
  transition: .3s ease;
  cursor: pointer;
}
#slider #num div:hover{
  background: #fff;
}
#lbar, #pbar{
  position: absolute;
  width: 90%;
  height: 2px;
  top: 20px;
  background: rgba(255, 255, 255, .3);
  left: 50%;
}
#lbar{
  transform: translateX(-50%)
}
#pbar{
  background: #fff;
  left: 5%;
  box-shadow: 0 0 20px 1px rgb(196, 253, 255);
  animation: load 8s ease-in infinite;
}
@keyframes load{
  from{
    width: 0;
  }
  to{
    width: 90%;
  }
}

var responsiveSlider = function(){
  
  var slider = document.getElementById("slider");
  var sliderWidth = slider.offsetWidth;
  var slideList = document.getElementById("sliderWrap");
  var items = slideList.querySelectorAll("li").length;
  
  var count = 0;
  
  var num = document.getElementById("num");
  slideNums = num.querySelectorAll("div");
  
  var prev = document.getElementById("prev");
  var next = document.getElementById("next");
  
  var addColor = function(pos){
    slideNums[pos].style.boxShadow = "0 0 10px 2px rgb(196, 253, 255)";
    slideNums[pos].style.background = "#fff";
  }
  
  var removeColor = function(pos){
    slideNums[pos].style.boxShadow = "0 0 10px 2px transparent";
    slideNums[pos].style.background = "rgba(255, 255, 255, .3)";
  }
  
  addColor(0);
  
  slideNums[0].addEventListener("click", function(){
    removeColor(count);
    count = 0;
    addColor(count);
    slideList.style.left = "0px";
  });
  slideNums[1].addEventListener("click", function(){
    removeColor(count);
    count = 1;
    addColor(count);
    slideList.style.left = "-" + count * sliderWidth + "px";
  });
  slideNums[2].addEventListener("click", function(){
    removeColor(count);
    count = 2;
    addColor(count);
    slideList.style.left = "-" + count * sliderWidth + "px";
  });
  slideNums[3].addEventListener("click", function(){
    removeColor(count);
    count = 3;
    addColor(count);
    slideList.style.left = "-" + count * sliderWidth + "px";
  });
  slideNums[4].addEventListener("click", function(){
    removeColor(count);
    count = 4;
    addColor(count);
    slideList.style.left = "-" + count * sliderWidth + "px";
  });
  
  window.addEventListener("resize", function(){
    sliderWidth = slider.offsetWidth;
    slideList.style.left = "-" + count * sliderWidth + "px";
  });
  
  var prevSlide = function(){
    removeColor(count);
    if(!count) count = items - 1;
    else count--;
    addColor(count);
    slideList.style.left = "-" + count * sliderWidth + "px";
  }
  
  var nextSlide = function(){
    removeColor(count);
    if(count == items - 1) count = 0;
    else count++;
    addColor(count);
    slideList.style.left =  "-" + count * sliderWidth + "px";
  }
 
  next.addEventListener("click", function(){
    nextSlide();
  }); 
 
  prev.addEventListener("click", function(){
    prevSlide();
  });
  
  setInterval(function(){
    nextSlide();
  }, 8000);
}

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