FancyBox не появляется thumbs?

Question

[bazliiii]

Добрый день , использую слайдер в котором при нажатии нужно открывать fancybox , но по итогу открывается только одна картинка без стрелок и подобного:

<div class="slider-details">
                  <img src="./images/img8.png" alt="apartment">
                  <img src="./images/img8.png" alt="apartment">
                  <img src="./images/img8.png" alt="apartment">
                  <img src="./images/img8.png" alt="apartment">
                </div>
                <div class="nav-container">
                  <div class="slider-nav">
                    <a id="gallery" data-fancybox="gallery" href="./images/img8.png" data-thumb="./images/img8.png">
                      <img src="./images/img8.png" alt="apartment"></a>
                    <a data-fancybox="gallery" href="./images/img8.png">
                      <img src="./images/img8.png" alt="apartment"></a>
                    <a data-fancybox="gallery" href="./images/img8.png">
                      <img src="./images/img8.png" alt="apartment"></a>
                    <a data-fancybox="gallery" href="./images/img8.png">
                      <img src="./images/img8.png" alt="apartment"></a>
                    <a data-fancybox="gallery" href="./images/img8.png">
                      <img src="./images/img8.png" alt="apartment"></a>
                  </div>

$(".slider-details").each(function () {
  $(this).slick({
    fade: true,
    arrows: true,
    dots: false,
    asNavFor: '.slider-nav',
    prevArrow: '<div class="slick-prev"><span class="fasteignablog-arrow-left"></span></span><div>',
    nextArrow: '<div class="slick-next"><span class="fasteignablog-arrow-right"></span></span></div>',
    slidesToShow: 1,
    slidesToScroll: 1,
  });
});

$(".slider-nav").each(function () {
  $(this).slick({
    arrows: false,
    dots: false,
    asNavFor: '.slider-details',
    vertical: true,
    verticalSwiping: true,
    slidesPerRow: 1,
    slidesToShow: 3,
    slidesToScroll: 1
  });
});

Fancybox.bind('[data-fancybox="gallery"]', {
  caption: function (fancybox, carousel, slide) {
    return (
      `${slide.index + 1} / ${carousel.slides.length} <br />` + slide.caption
    );
  },
});