<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>
///https://codepen.io/DedaloD/pen/jOYzJGp
///https://stackblitz.com/@fancyapps
//https://stackblitz.com/edit/js-vk4rms?file=index.js
View Compiled
const container = document.getElementById("myCarousel");
const options = {
  infinite: false,
  Dots: false,
  //Navigation: false,
  Thumbs: {
    type: "classic"
  },
  // enabled: true,
  // breakpoints: {
  //   "(min-width: 768px)": {
  //     enabled: false,
  //   },
  // },
};
Fancybox.bind('[data-fancybox="gallery"]', {
   Carousel : {
     infinite: false
   },
  dragToClose: false,
  // Images: {
  //   zoom: false,
  // },

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

External CSS

  1. https://cdn.jsdelivr.net/npm/@fancyapps/ui@5.0/dist/carousel/carousel.css
  2. https://cdn.jsdelivr.net/npm/@fancyapps/ui@5.0/dist/carousel/carousel.thumbs.css
  3. https://cdn.jsdelivr.net/npm/@fancyapps/ui@5.0/dist/fancybox/fancybox.css

External JavaScript

  1. https://cdn.jsdelivr.net/npm/@fancyapps/ui@5.0/dist/fancybox/fancybox.umd.js
  2. https://cdn.jsdelivr.net/npm/@fancyapps/ui@5.0/dist/carousel/carousel.umd.js
  3. https://cdn.jsdelivr.net/npm/@fancyapps/ui@5.0/dist/carousel/carousel.thumbs.umd.js