How to make a slider like on this site using slick slider (slider at the very beginning) - https://tyr.ru?

Question

Slick

For example, there is a slider with a progress bar, but you need to make transition buttons for certain slides and somehow redo the progress bar. - https://codepen.io/mjtweaver/pen/pEkYgQ

<div class="content">
  <div class="slider">
    <div>
      <div class="image">
        <img src="https://kenwheeler.github.io/slick/img/lazyfonz2.png" alt="">
      </div> <!-- end image -->
    </div>
    <div>
      <div class="image">
        <img src="https://kenwheeler.github.io/slick/img/lazyfonz4.png" alt="">
      </div> <!-- end image -->
    </div>
    <div>
      <div class="image">
        <img src="https://kenwheeler.github.io/slick/img/lazyfonz3.png" alt="">
      </div> <!-- end image -->
    </div>
    <div>
      <div class="image">
        <img src="https://kenwheeler.github.io/slick/img/lazyfonz2.png" alt="">
      </div> <!-- end image -->
    </div>
    <div>
      <div class="image">
        <img src="https://kenwheeler.github.io/slick/img/lazyfonz4.png" alt="">
      </div> <!-- end image -->
    </div>
    <div>
      <div class="image">
        <img src="https://kenwheeler.github.io/slick/img/lazyfonz3.png" alt="">
      </div> <!-- end image -->
    </div>
  </div> <!-- end slider -->
  <div class="progress" role="progressbar" aria-valuemin="0" aria-valuemax="100">
    <span class="slider__label sr-only">
  </div>
  </span>
</div> <!-- end content -->

.progress {
  display: block;
  width: 100%;
  height: 10px;
  border-radius: 10px;
  overflow: hidden;
  
  background-color: #f5f5f5;
  background-image: linear-gradient(to right, black, black);
  background-repeat: no-repeat;
  background-size: 0 100%;
  
  transition: background-size .4s ease-in-out;
}




/**
 *  Demo Styles from the Slick Slider
 *  website
 */

body {
  background-color: #3498db;
}

.content {
  margin: auto;
  padding: 20px;
  width: 600px;
}

.slider {
  margin: 30px auto 50px;
}

.image {
  padding: 10px;
}

img {
  border: 5px solid #FFF;
  display: block;
  width: 100%;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  border: 0;
}

$(document).ready(function() {
  var $slider = $('.slider');
  var $progressBar = $('.progress');
  var $progressBarLabel = $( '.slider__label' );
  
  $slider.on('beforeChange', function(event, slick, currentSlide, nextSlide) {   
    var calc = ( (nextSlide) / (slick.slideCount-1) ) * 100;
    
    $progressBar
      .css('background-size', calc + '% 100%')
      .attr('aria-valuenow', calc );
    
    $progressBarLabel.text( calc + '% completed' );
  });
  
  $slider.slick({
    slidesToScroll: 1,
  autoplay: true,
    speed: 400
  });  
});