<div class="slider" id="slider"  data-width="100">
	<button class="control_next">&rarr;</button>
 	 <button class="control_prev">&larr;</button>
		<ul>
			<li class="actslide">
				<div class="slide" style="background: #90cc82" >
					<div class="shadow">
						<div class="teaser">
						
							<h3>Fullscreen Slider</h3>
							<h2>Slide 1</h2>
							
							<p>Slide #1 of 3</p>
							
							
						</div> 
						
						
					</div>
				</div>
			</li>
			<li>
				<div class="slide" style="background: #02517a" >
					<div class="shadow">
							<div class="teaser">
						
							<h3>Fullscreen Slider</h3>
							<h2>Slide 2</h2>
							
							<p>Slide #2 of 3</p>
							
							
						</div> 
					</div>
				</div>
			</li>
			<li>
				<div class="slide" style="background: #c4af03" >
					<div class="shadow">
								<div class="teaser">
						
							<h3>Fullscreen Slider</h3>
							<h2>Slide 3</h2>
							
							<p>Slide #3 of 3</p>
							
							
						</div> 
					</div>
				</div>
			</li>
		</ul>
		<div class="progress">
			<div class="bar"></div>
		</div>

	</div>


$ih: 100vh; // Slider height

.slider {
	position: relative;
}

#slider {  
  position: relative;
  overflow: hidden;
  width: 100% !important;

  ul {
    position: relative;
    margin: 0;
    padding: 0;
    height: $ih;
    width: 99999px;
    overflow: hidden;
    list-style: none;
    li {
      position: relative;
      display: block;
      float: left;
      margin: 0;
      padding: 0;
      width: 100vw;
      height: $ih;
      text-align: center;
      .slide {
  	    background-size: cover;
  	    height: $ih;
        }
    }
  }
}



button.control_prev, button.control_next {
  position: absolute;
  top: 50%;
  z-index: 10;
  display: block;
  border: none; width: 2em;
  height: 2em;
  line-height: 1.9em;
  background: rgba(#fff, .30);
  color: #fff;
  text-align: center;
  text-decoration: none;
  font-weight: 600;
  font-size: 2rem;
  opacity: 0.8;
  cursor: pointer;
  border-radius: 50%;
  transform: translateY(-50%);
  &:focus {
    outline: none;
    border: 1px rgba(255,255,255,.5) solid;
  }
  &:hover {
    opacity: 1;
    -webkit-transition: all 0.2s ease;
  }
}

button.control_prev {
   left: 2rem;
}

button.control_next {
   right: 2rem;
}

.progress {
	position: absolute;
	background: rgba(255,255,255,.3);
	height: .5rem;
	width: 100%;
	bottom: 0;
	border-top: 1px rgba(0,0,0,.15) solid;
	.bar {
		height: 100%;
		width: 0%;
		background: #fff;
		
	}
}


.teaser {
	position: absolute;
	top: 50%;
	text-align: center;
	width: 100%;
	color: #fff;
	transform: translateY(-50%);
	h2 {
		font-size: 5em;
		text-transform: uppercase;
		line-height: 1.5em;
		color: #fff;
		
	}
	p {
		font-size: 1.3em;
		line-height: 1.3em;
		border-top: 2px #fff solid;
		width: 33%;
		min-width: 25rem;
		margin: 0rem auto;
		padding: 1.5rem 0;
	}
	h3 {
		border-bottom: 2px #fff solid;
		width: 33%;
		padding: 1.5rem 0;
		margin: 0rem auto;
		min-width: 25rem;
	}
	a {
		margin-left: .5rem;
		margin-right: .5rem;
	}
}

View Compiled
//Based on https://codepen.io/zuraizm/pen/vGDHl pen by zuraiz
jQuery(document).ready(function ($) {
  
    startSlider($('#slider'), 30); // Slide container ID, SlideShow interval 
  
    function startSlider(obj, timer) {
      
        var obj, timer;
        var id = "#"+obj.attr("id");
        var slideCount = obj.find('ul li').length;
        slideWidth = obj.attr("data-width");
        var sliderUlWidth = (slideCount+1) * slideWidth;
        var time = 2;
        var $bar,
        
        isPause,
        tick,
        percentTime;
        isPause = false; //false for auto slideshow

        $bar = obj.find('.progress .bar');

        function startProgressbar() {
            resetProgressbar();
            percentTime = 0;    
            tick = setInterval(interval, timer);
        }

        function interval() {
            if (isPause === false) {
              percentTime += 1 / (time + 0.1);
              $bar.css({
                width: percentTime + "%"
              });
              if (percentTime >= 100) {
                moveRight();
                startProgressbar();
              }
            }
        }

        function resetProgressbar() {
            $bar.css({
              width: 0 + '%'
            });
            clearTimeout(tick);
        }
  
        function startslide() {

            $(id+' ul li:last-child').prependTo(id+' ul');        
            obj.find('ul').css({ width: sliderUlWidth+'vw', marginLeft: - slideWidth+'vw' });
            
            obj.find('ul li:last-child').appendTo(obj.attr('id')+' ul');

        }

        if (slideCount>1) {
            startslide();
            startProgressbar();
        }
        else { // hade navigation buttons for 1 slide only
             $(id+' button.control_prev').hide();
             $(id+' button.control_next').hide();
        }


        

        function moveLeft() {
           $(id+' ul').css( { transition: "1s",
                  transform:  "translateX(" + slideWidth + "vw)" 
            });

            setTimeout( function() { 
                
                $(id+' ul li:last-child').prependTo(id+' ul');
                $(id+' ul').css( { transition: "none",
                  transform:  "translateX(" + 0 + "vw)" 
                });

                $('li.actslide').prev().addClass('actslide').next().removeClass('actslide');
            }, 1000 );
          
        }

        function moveRight2() { // fix for only 2 slades
          $(id+' ul li:first-child').appendTo(id+' ul'); 
         
          
$(id+' ul').css( { transition: "none",                      transform:  "translateX(100vw)"}).delay(); 
          
          setTimeout( function() { 
                    
$(id+' ul').css( { transition: "1s",                      transform:  "translateX(0vw)" }); 

                    
                }, 100, setTimeout( function() { 
                    
                   
$(id+' ul').css( { transition: "none",                      transform:  "translateX(0vw)" }); 
$('li.actslide').next().addClass('actslide').prev().removeClass('actslide');
                    
                }, 1000 )  ); 
          
         
          
           
        }

        function moveRight() {
            if (slideCount>2) {
                  $(id+' ul').css( { transition: "1s",
                  transform:  "translateX(" + (-1)*slideWidth + "vw)" 
                });

                setTimeout( function() { 
                    
                    $(id+' ul li:first-child').appendTo(id+' ul');
                    $(id+' ul').css( { transition: "none",
                      transform:  "translateX(" + 0 + "vw)" 
                    });

                    $('li.actslide').next().addClass('actslide').prev().removeClass('actslide');
                }, 1000 );  
            }
            else {
                moveRight2();
            }          
        }

        $(id+' button.control_prev').click(function () {
            moveLeft();
            startProgressbar();
        });

        $(id+' button.control_next').click(function () {

              moveRight();

            startProgressbar();
        });

        $(id+' .progress').click(function() {
            if (isPause === false) {
                isPause = true;
            }
            else {
                isPause = false;
            }   
      });
  };
});   

Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

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