How to use two slick.js sliders where one of them is restyled as a thumbnail block?

Question

JavaScript

Good afternoon.
I am developing a project on wordpress.
There is a plugin that turns post thumbnails into 2 sliders connected to each other.
On the top - a large one miniature, on the bottom - several small ones.

Click on the bottom thumbnail and the top slider will scroll to its copy.

I myself can do it in layout.

But here it is completely different.

I destroyed the second slider and turned it into a block with thumbnails.
And now they are not connected.

I came up with the idea of ​​clicking on the thumbnail, counting which number it is, and setting the top slider. $('.your-element').slick('setPosition');

But how to count the element that I clicked on?

Or can you suggest another way.

Thanks in advance.

Answer 1

$('.первыйслайдер .слайд').on('click', function(){
      var sliderIndex = $(this).index();
      $второйслайдер.slick('slickGoTo', sliderIndex);
    });