What could be the reason for disabling thumbs when linking fancybox and slick?

Question

JavaScript

I'm trying to use fancybox to display images from a slick slider. Because to scroll through the slides, slick creates copies of the blocks, duplicates of the images from the copies got out in the thumbs. I tried to solve this problem in two ways.

The first is to use fade: true in the slick settings
The second is to overwrite the image categories for the gallery when initializing the slider

spoiler

_sliderNav.on('init', function(event, slick){
      var line = slick.$slideTrack,
        slides = line.find('[data-slick-index]');

      slides.each(function () {
        var _this = $(this),
          fancyId = _this.find('[data-fancybox]'),
          index = _this.index();

        fancyId.attr('data-fancybox', 'cert' + index);
      });
    });

In any case, the thumbs are no longer initialized, the thumbs call button and the events on it disappear. What could be the reason?

Answer 1

In any case, the thumbs are no longer initialized, the thumbs call button and the events on it disappear. What could be the reason?

you add an index to the data-fancybox, but it should be the same everywhere, then they will be in the group
I did with owl, but the principle is the same.
html of a single slide

<div class="item" data-index="2">
                <a href="/data/himg/booking1395_1.jpg" data-fancybox="images-tour"><img
                        class="owl-lazy" width="932" height="619" src=""
                        data-src="/data/himg/booking1395_1.jpg"
                        alt=""></a>
            </div>

from this you need data-index (starting from 1) to search for the desired slide and data-fancybox so that the opening would work when you click on the link.
script

var owl = $('.slider'); //слайдер еще без клонов
$links = owl.find('a'); // ссылки. Тут не должно быть клонированных ссылок

/*
    'click.fb-start' нашел полазив в плагине.
    При переходе по ссылке с hash, скрипт находит дата атрибут с названием как в хеш, и тригает на нем это событие
    
    '.item a' для того, что бы клик нормально работал и на клонах. 
*/
owl.on('click.fb-start', '.item a', function (e) {
    e.preventDefault();
    var index = $(this).parent('.item').data('index'); 
    $.fancybox.open($links, {
        arrows: true,
        toolbar: true,
        loop: true,
        buttons: [
            "slideShow",
            "fullScreen",
            "thumbs",
            "close"
        ],
        hash: 'images-tour' // хеш такой как в дата атрибуте
    }, index); // по этому индексу в $links будет найдена ссылка
});

when I did it with owl, I got links after carousel initialization via api.
in slick you can get it like this

var $links = $(".Modern-Slider").slick('getSlick').$slides.find('a');