How to stop page scroll until all slider is loaded in slick slider

all apologies, if this is asked earlier,

<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/jquery.slick/1.6.0/slick.css">
<link rel="stylesheet" type="text/css" href="https://kenwheeler.github.io/slick/slick/slick-theme.css">
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/jquery.slick/1.6.0/slick.min.js"></script>

<script type="text/javascript">
  jQuery(document).ready(function() {
    

    
    
jQuery(".wpostahs-slider-design-1 .wpostahs-slick-slider .slick-arrow").insertAfter("#arrowsShow");
  var $slider = $('.slider');
  var $progressBar = $('.progress');
  var $progressBarLabel = $( '.slider__label' );
  var scrollCount = null;
var scroll= null;
  $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({
    

    slidesToShow: 1,
    slidesToScroll: 1,
    speed: 1000,
    dots: false,

   
    fade: true, 
  });  
   $(window).scroll(function () {
    var offset = $(".verticalSLider").offset().top;

    if ($(window).scrollTop() >= offset) {
       
$slider.slick('slickNext');
    }
});
   
});

</script> 

This code is working fine but how to make it possible, to stop the page from scrolling to the bottom unless the complete slider is loaded, the slider with the progress bar is working but it is also making page to scroll without completing the slider.