如何在滑块导航中制作类似“填充”导航项？

$('.customer-logos').each(function() {

  var $this = $(this),
    sliderControl = $this.closest('.section').find('.slider-control'),
    prev = $this.closest('.section').find('.slick-prev'),
    next = $this.closest('.section').find('.slick-next'),
    $status = $this.closest('.section').find('.slider-num');


  $this.on('init reInit afterChange', function(event, slick, currentSlide, nextSlide) {

    var i = (currentSlide ? currentSlide : 0) + 1;
    $status.html('<strong>' + (((i) < 10) ? "0" + (i) : i) + '</strong>' + '<small>/' + (((slick.slideCount) < 10) ? "0" + (slick.slideCount) : slick.slideCount) + '</<small>');
  });

  $this.slick({
    slidesToShow: 6,
    slidesToScroll: 1,
    //autoplay: true,
    autoplaySpeed: 1500,
    arrows: true,
    dots: false,
    pauseOnHover: false,
    focusOnSelect: true,
    prevArrow: prev,
    nextArrow: next,
    pauseOnDotsHover: true,
    responsive: [{
      breakpoint: 768,
      settings: {
        slidesToShow: 4
      }
    }, {
      breakpoint: 520,
      settings: {
        slidesToShow: 3
      }
    }]
  });

  // Slider Progressbar Start Here
  var time = 1;
  var $bar,
    isPause,
    tick,
    percentTime;

  $bar = $('.slider-progress span');

  function startProgressbar() {
    resetProgressbar();
    percentTime = 0;
    isPause = false;
    tick = setInterval(interval, 20);
  }

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

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

  // Reset Progressbar When Slide Change
  $this.on('afterChange', function(event, slick, currentSlide) {
    startProgressbar();
  });

  $('.section').on({
    mouseenter: function() {
      isPause = true;
    },
    mouseleave: function() {
      isPause = false;
    }
  });

  startProgressbar();

});

/* Slider */

.slick-slide {
  margin: 0px 20px;
}

.slick-slide img {
  width: 100%;
}

.slick-slider {
  position: relative;
  display: block;
  box-sizing: border-box;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -khtml-user-select: none;
  -ms-touch-action: pan-y;
  touch-action: pan-y;
  -webkit-tap-highlight-color: transparent;
}

.slick-list {
  position: relative;
  display: block;
  overflow: hidden;
  margin: 0;
  padding: 0;
}

.slick-list:focus {
  outline: none;
}

.slick-list.dragging {
  cursor: pointer;
  cursor: hand;
}

.slick-slider .slick-track,
.slick-slider .slick-list {
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  -o-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

.slick-track {
  position: relative;
  top: 0;
  left: 0;
  display: block;
}

.slick-track:before,
.slick-track:after {
  display: table;
  content: '';
}

.slick-track:after {
  clear: both;
}

.slick-loading .slick-track {
  visibility: hidden;
}

.slick-slide {
  display: none;
  float: left;
  height: 100%;
  min-height: 1px;
}

[dir='rtl'] .slick-slide {
  float: right;
}

.slick-slide img {
  display: block;
}

.slick-slide.slick-loading img {
  display: none;
}

.slick-slide.dragging img {
  pointer-events: none;
}

.slick-initialized .slick-slide {
  display: block;
}

.slick-loading .slick-slide {
  visibility: hidden;
}

.slick-vertical .slick-slide {
  display: block;
  height: auto;
  border: 1px solid transparent;
}

.slick-arrow.slick-hidden {
  display: none;
}

.slick-arrow-wrap,
.slider-control {
  display: flex;
  align-items: center;
}

.slick-arrow {
  display: block;
  width: 30px;
  height: 30px;
  line-height: 30px;
  cursor: pointer;
}

.slider-progress {
  width: 200px;
  height: 3px;
  background: #ccc;
  margin-right: 30px;
  margin-left: 30px;
  position: relative;
  overflow: hidden;
}

.slider-progress span {
  width: 0%;
  height: 3px;
  background: red;
  position: absolute;
  display: block;
  top: 0;
  left: 0;
}

<script src="https://code.jquery.com/jquery-2.2.0.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">

<div class="section container">
  <h2>Our Partners</h2>
  <section class="customer-logos slider">
    <div class="slide"><img src="https://image.freepik.com/free-vector/luxury-letter-e-logo-design_1017-8903.jpg"></div>
    <div class="slide"><img src="https://image.freepik.com/free-vector/3d-box-logo_1103-876.jpg"></div>
    <div class="slide"><img src="https://image.freepik.com/free-vector/blue-tech-logo_1103-822.jpg"></div>
    <div class="slide"><img src="https://image.freepik.com/free-vector/colors-curl-logo-template_23-2147536125.jpg"></div>
    <div class="slide"><img src="https://image.freepik.com/free-vector/abstract-cross-logo_23-2147536124.jpg"></div>
    <div class="slide"><img src="https://image.freepik.com/free-vector/football-logo-background_1195-244.jpg"></div>
    <div class="slide"><img src="https://image.freepik.com/free-vector/background-of-spots-halftone_1035-3847.jpg"></div>
    <div class="slide"><img src="https://image.freepik.com/free-vector/retro-label-on-rustic-background_82147503374.jpg"></div>
  </section>
  <br>
  <div class="slider-control">

    <div class="slider-num">
      <strong></strong>
      <small></small>
    </div>

    <div class="slider-progress">
      <span></span>
    </div>

    <div class="slick-arrow-wrap">
      <div class="slick-arrow slick-prev">←</div>
      <div class="slick-arrow slick-next">→</div>
    </div>
  </div>
</div>