What is the reason behind this behavior of the vertical slick carousel?

Question

JavaScript

Guys, help, I can not understand what is the reason. They gave me a layout to work with, but I can't overcome the glitch: there is a vertical slick carousel, its items have id's. You need to catch the hash in the address bar and go to the corresponding slide.
Naturally, I pull out the hash, find the index of the desired block before the carousel is initialized. And after initialization, I go to the slide:

// находим index блока
  var services_id = false;
  if(location.hash.substring(1).length > 0) {
    if($('#'+location.hash.substring(1)).length > 0) services_id = $('#'+location.hash.substring(1)).index();		
  }
  
  // запускаем карусель
  
  // переходим к слайду
  if (services_id){	
    $('.service-slider').slick( 'slickGoTo', services_id );
  }

But it works like this: if you FOLLOW a link with a hash, the carousel goes up somewhere.

If the open page is UPDATED, it works as it should.

Link to page: deleted

Why is this happening? How to fix?

Answer 1

Make a border on the carousel block and you will see that the carousel itself is in place.
But the arrows are styled pressed to the bottom of the carousel block. They remain there all the time while the pictures move to the top.
As an option - recalculate the index of the "first" picture in such a way that there are always enough pictures below so that there is no empty space to the bottom of the carousel block.