<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"  />
<div class="slider">
  <ul>
    <li class="active">One #1</li>
    <li>Two #2</li>
    <li>Three #3</li>
    <li >Four #4</li>
  </ul>
  <div class="prev"><i class="fa fa-chevron-left"></i></div>
  <div class="next"><i class="fa fa-chevron-right"></i></div>
</div>

body
{
  background-color:#6ACAE4;
}
*
{
  margin:0;
  padding:0
}
.slider
{
  margin:40px auto;
  width:75%;
  height:320px;
  background:#EEE;
  overflow:hidden;
  position:relative;
  font-family:Arial;
  box-shadow:0px 0px 40px #AAA ;


}
ul
{
  list-style:none;
  transition:all .8s linear;
  position:absolute;



}
ul li
{
  float:left;
  text-align:center;
  line-height:320px;
  background:#6ACAB8;
  color:#FFF;
  font-size:45px;


}
.slider div:first-of-type,.slider div:last-of-type
{
  position: absolute;
  z-index:100;
  width:30px;
  height:30px;
  top:46%;
  text-align:center;
  line-height:30px;
  background:rgba(0,0,0,.6);
  cursor:pointer;


}
.slider div:first-of-type
{
  left:10px;
}
.slider  div:last-of-type
{
  right:10px;
}
.slider div i
{
  color:#FFF;
}
.slider div:hover
{
  opacity:.4;
}

var slider , sliderUl , div , sliderUlChildren , selector,auto;
slider = document.querySelector(".slider");
sliderUl = slider.children[0];
div = slider.children;
sliderUlChildren = sliderUl.children;
function reset(){
  'use strict';
  for ( var i =  0 ; i < sliderUl.children.length;i++ )
  {
    sliderUl.children[i].style.width = slider.offsetWidth + 'px';
  }
  sliderUl.style.width = slider.offsetWidth * sliderUl.children.length + 'px';
};
reset();
window.onresize = function(){ reset() }

function slide(){
  for ( var i = 1 ; i < div.length ; i++  )
  {
    div[i].onclick = function(){
      'use strict';
      selector = document.querySelector('.active');
      if( this.className =="next" )
      {
        if( selector == sliderUl.children[sliderUl.children.length - 1] )
        {
          selector.classList.remove('active');
          sliderUl.children[0].classList.add('active');
          sliderUl.style.left ='0px';
        }
        else
        {
          selector.classList.remove('active');
          selector.nextElementSibling.classList.add('active');
          sliderUl.style.left = -( selector.offsetLeft+slider.offsetWidth )+'px';
        }
      }
      else
      {
        if( selector == sliderUl.children[0] )
        {
          selector.classList.remove('active');
          sliderUl.children[sliderUl.children.length - 1].classList.add('active');
          sliderUl.style.left =-(slider.offsetWidth * (sliderUl.children.length - 1)) + 'px';
        }
        else
        {
          selector.classList.remove('active');
          selector.previousElementSibling.classList.add('active');
          sliderUl.style.left = -( selector.offsetLeft-slider.offsetWidth )+'px';

        }	           	   		
      }
    };
  }
};
function autoPlay(){
  auto = setInterval(function(){
    document.getElementsByClassName('next')[0].click();
  },4000)
};
for ( var i = 1 ; i < div.length ; i++  )
{
  div[i].onmouseenter = function(){ clearInterval(auto) };
  div[i].onmouseleave = function(){ autoPlay() };
}

slide();
autoPlay();