<!-- main slider -->
<div class="sliderContainer">
  <div class="slider single-item">
    <div class="slide">Slide1</div>
    <div class="slide">Slide2</div>
    <div class="slide">Slide3</div>
  </div>
  <div>
    <div>
      
      
  <div class="progressBarContainer">
<!-- Как к активному item добавить рядом класс active? -->
    <div class="item">
      <h3>Slide 1</h3>
      <span data-slick-index="0" class="progressBar"></span>
    </div>
    <div class="item">
      <h3>Slide 2</h3>
      <span data-slick-index="1" class="progressBar"></span>
    </div>
    <div class="item">
      <h3>Slide 3</h3>
      <span data-slick-index="2" class="progressBar"></span>
    </div>
    </div>
      </div>
  </div>
</div>
<!-- end main slider -->

h3 {
  margin:5px 0; 
}

.sliderContainer {
  position: relative;
}

.slider {
  width: 500px;
  margin: 30px 50px 50px;
}

.slick-slide {
  background: #3a8999;
  color: white;
  padding: 80px 0 120px;
  font-size: 30px;
  font-family: "Arial", "Helvetica";
  text-align: center;
}

.slick-prev:before,
.slick-next:before {
  color: black;
}

.slick-dots {
  bottom: -30px;
}

.slick-slide:nth-child(odd) {
  background: #e84a69;
}

.progressBarContainer {
  position: absolute;
  bottom: 20px;
  width:300px;
  left:150px;
}

.progressBarContainer div {
  display: block;
  width: 30%;
  padding: 0;
  cursor: pointer;
  margin-right: 5%;
  float: left;
  color: white;
}

.progressBarContainer div:last-child {
  margin-right: 0;
}

.progressBarContainer div span.progressBar {
  height: 4px;
  background-color: rgba(255, 255, 255, 0.4);
  display: block;
  margin-left: -10px;
  margin-right: -10px;
}

.progressBarContainer div span.progressBar .inProgress {
  background-color: rgba(255, 255, 255, 1);
  width: 0%;
  height: 4px;
  transition: width .1s ease;
}
.progressBarContainer .item {
  padding-left: 10px;
  padding-right: 10px;
  box-sizing: border-box;
}
.progressBarContainer .item.active {
  background-color: rgba(0, 0, 0, .3);
  color: black;
}

$(document).ready(function(){
  

  $(".slider").slick({
  infinite: true,
  arrows: false,
  dots: false,
  autoplay: false,
  speed: 800,
    fade: true,
  slidesToShow: 1,
  slidesToScroll: 1,
  });

  //ticking machine
  var percentTime;
  var tick;
  // speed time
  var time = 20;
  var progressBarIndex = 0;
  $('.progressBarContainer .progressBar').each(function(index) {
      let progress = $('<div></div>', {
        class: 'inProgress inProgress' + index
      });
      $(this).append(progress);
  });

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

  function interval() {
      if (($('.slider .slick-track div[data-slick-index="' + progressBarIndex + '"]').attr("aria-hidden")) === "true") {
          progressBarIndex = $('.slider .slick-track div[aria-hidden="false"]').data("slickIndex");
          startProgressbar();
      } else {
        !$('.inProgress' + progressBarIndex).closest('.item').hasClass('active') && (
    $('.inProgress').closest('.item').removeClass('active'),
    $('.inProgress' + progressBarIndex).closest('.item').addClass('active')
  );
          percentTime += 1 / time;
          $('.inProgress' + progressBarIndex).css({
              width: percentTime + "%"
          });
          if (percentTime >= 100) {
              $('.single-item').slick('slickNext');
              progressBarIndex++;
              let len = $('.progressBarContainer .item').length;
              if (progressBarIndex > len - 1) {
                  progressBarIndex = 0;
              }
              startProgressbar();
          }
      }
  }

  function resetProgressbar() {
      $('.inProgress').css({
          width: 0 + '%'
      });
      clearInterval(tick);
  }
  startProgressbar();
  // End ticking machine

  $('.progressBarContainer div').click(function () {
    clearInterval(tick);
    var goToThisIndex = $(this).find("span").data("slickIndex");
    $('.single-item').slick('slickGoTo', goToThisIndex, false);
    startProgressbar();
  });
  
    
});