<nav class="pagination">
  <div class="nav-btn prev"></div>
  <ul class="nav-pages"></ul>
  <div class="nav-btn next"></div>
</nav>

@import url('https://fonts.googleapis.com/css?family=Lato:700');

$wht: #fff;
$blk: #000;
$accent: #3ac8ff;

$grad : linear-gradient(45deg, darken($accent,15), $accent);
$gradh: linear-gradient(45deg, darken($accent,10), $accent);

body {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background:#efefef;
  font-family: 'Lato', sans-serif;
}

.pagination{
  overflow:hidden;
  background:$wht;
  border-radius: 5px;
  box-shadow:0 0 20px 0 rgba($blk,0.05);
  font-size:1.5em;
  display: flex;
  position: relative;
  user-select: none;
  
  .nav-btn{
    font-family: Font Awesome\ 5 Free;
    font-weight: 900;
    background: $grad;
    display: inline-block;
    padding:18px 24px;
    color:$wht;
    z-index: 2;
    cursor:pointer;
    text-shadow: 0 0 0 rgba($blk, 0);
    box-shadow:0 0 10px 0 rgba($blk, 0.2);
    transition:all 300ms ease;
    
    &:hover{
      background:$gradh;
      text-shadow: 0 0 25px rgba($blk, 0.3);
    }
    
    &.next{
      position:absolute;
      right:0;
    }
    
    &.prev::before{content: "\f053";}
    &.next::before{content: "\f054";}
  }
  
  .nav-pages{
    margin:0;
    padding:0;
    left:0;
    transition:left 300ms ease;
    position: absolute;
    width:max-content;
    
    li{
      list-style:none;
      display:inline-block;
      padding:18px 10px;
      border-right:1px solid #eee;
      color:rgba($blk,0.25);
      text-align: center;
      cursor:pointer;
      
      &.active, &:hover{
        color:rgba($blk,0.9);
      }
    }
  }
}

(function(baseElement, pages, pageShow){
  var pageNum = 0, pageOffset = 0;

  function _initNav(){
    //create pages
    for(i=1;i<pages+1;i++){
      $((i==1?'<li class="active">':'<li>')+(i)+'</li>').appendTo('.nav-pages', baseElement).css('min-width',pages.toString().length+'em');
    }
    
    //calculate initial values
    function ow(e){return e.first().outerWidth()}
    var w = ow($('.nav-pages li', baseElement)),bw = ow($('.nav-btn', baseElement));
    baseElement.css('width',w*pageShow+(bw*2)+'px');
    $('.nav-pages', baseElement).css('margin-left',bw+'px');
    
    //init events
    baseElement.on('click', '.nav-pages li, .nav-btn', function(e){
      if($(e.target).is('.nav-btn')){
        var toPage = $(this).hasClass('prev') ? pageNum-1 : pageNum+1;
      }else{
        var toPage = $(this).index(); 
      }
      _navPage(toPage);
    });
  }

  function _navPage(toPage){
    var sel = $('.nav-pages li', baseElement), w = sel.first().outerWidth(),
        diff = toPage-pageNum;
    
    if(toPage>=0 && toPage <= pages-1){
      sel.removeClass('active').eq(toPage).addClass('active');
      pageNum = toPage;
    }else{
      return false;
    }
    
    if(toPage<=(pages-(pageShow+(diff>0?0:1))) && toPage>=0){
      pageOffset = pageOffset + -w*diff;  
    }else{
      pageOffset = (toPage>0)?-w*(pages-pageShow):0;
    }
    
    sel.parent().css('left',pageOffset+'px');
  }
  
  _initNav();

})($('.pagination'), 25, 5);