How to go to the next picture from the current picture in Bootstrap/Fancyapp photo/video gallery?

Question

I am trying to create a photo/video gallery on bootstrap. I believe I have linked the CSS and JS correctly to my index.html, after clicking on the photo, it takes me to the link of the photo, instead of opening the gallery that can go to next/previous photos. This is where I got the code

My CSS Code:

a[data-fancybox] img {
    cursor: zoom-in;
  }
  
  .fancybox__caption a {
    opacity: 0.8;
  }
  
  .fancybox__caption a:hover {
    opacity: 1;
    text-decoration: underline;
  }

and my JS code:

Fancybox.bind('[data-fancybox="gallery"]', {
    caption: function (fancybox, carousel, slide) {
      return slide.$trigger.title;
    },
  });

My HTML code:

<div class="flex flex-wrap gap-5 justify-center max-w-5xl mx-auto px-6">
<a
    data-fancybox="gallery"
    title="Hello, World!"
    href="https://lipsum.app/id/60/1500x1000"
    >
    <img class="rounded" src="https://lipsum.app/id/60/240x160" />
</a>
</div>