Как сделать Fancybox thumbnails в виде галереи, а не слайдера?

коллеги. Есть задача отрисовать галерею Fancybox с миниатюрами (thumbnails), но не в виде типичного слайдера-карусели, которая у нее по-умолчанию, а в виде списка-галереи, как на скриншоте.

image

Возможно ли это для Fancybox? Какие настройки надо применить или в какую сторону копать чтобы сделать тамбы списком, а не слайдером-каруселью?

Вот ссылка на песок https://codepen.io/emelyanova/pen/JjxZOBB

Заранее БЛАГОДАРЮ!

<div class="f-carousel" id="myCarousel">
  <div class="f-carousel__viewport">
    <div class="f-carousel__track">
      <div
      class="f-carousel__slide"
      data-thumb-src="https://lipsum.app/id/68/256x144"
      data-fancybox="gallery"
      data-src="https://lipsum.app/id/68/1600x900"
    >
      <img
        width="640"
        height="360"
        data-lazy-src="https://lipsum.app/id/68/640x360"
      />
    </div>
    <div
      class="f-carousel__slide"
      data-thumb-src="https://lipsum.app/id/58/256x144"
      data-fancybox="gallery"
      data-src="https://lipsum.app/id/58/1600x900"
    >
      <img
        width="640"
        height="360"
        data-lazy-src="https://lipsum.app/id/58/640x360"
      />
    </div>
    <div
      class="f-carousel__slide"
      data-thumb-src="https://lipsum.app/id/9/256x144"
      data-fancybox="gallery"
      data-src="https://lipsum.app/id/9/1600x900"
    >
      <img
        width="640"
        height="360"
        data-lazy-src="https://lipsum.app/id/9/640x360"
      />
    </div>
    <div
      class="f-carousel__slide"
      data-thumb-src="https://lipsum.app/id/62/256x144"
      data-fancybox="gallery"
      data-src="https://lipsum.app/id/62/1600x900"
    >
      <img
        width="640"
        height="360"
        data-lazy-src="https://lipsum.app/id/62/640x360"
      />
    </div>
    <div
      class="f-carousel__slide"
      data-thumb-src="https://lipsum.app/id/63/256x144"
      data-fancybox="gallery"
      data-src="https://lipsum.app/id/63/1600x900"
    >
      <img
        width="640"
        height="360"
        data-lazy-src="https://lipsum.app/id/63/640x360"
      />
    </div>
    </div>
  </div>
</div>
const container = document.getElementById("myCarousel");
const options = {
  infinite: false,
  Dots: false,
  //Navigation: false,
  Thumbs: {
    type: "classic"
  }
};
Fancybox.bind('[data-fancybox="gallery"]', {
   Carousel : {
     infinite: false
   },
  dragToClose: false,
  // Images: {
  //   zoom: false,
  // },

  Thumbs: {
    type: "classic"
  }
});
new Carousel(container, options, { Thumbs });


Ответы (0 шт):