Как сделать Fancybox thumbnails в виде галереи, а не слайдера?
коллеги. Есть задача отрисовать галерею Fancybox с миниатюрами (thumbnails), но не в виде типичного слайдера-карусели, которая у нее по-умолчанию, а в виде списка-галереи, как на скриншоте.
Возможно ли это для 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 });