Im trying to create a fancyapps slider gallery that on click opens fancybox gallery (lightbox). Fancybox is working fine but my slider gallery is displaying as a grid not as a slider. Any help is much appreciated.

useEffect(() => {
    if (offer?.Galeria?.length) {
      const carouselElement = document.querySelector(".f-carousel");
      new Carousel(carouselElement, {
        Dots: true,
        Navigation: true,
      });

      Fancybox.bind("[data-fancybox='gallery']", {
        infinite: true,
      });
    }

    return () => {
      Fancybox.destroy();
      const carouselElement = document.querySelector(".f-carousel");
      if (carouselElement) {
        carouselElement.Carousel?.destroy();
      }
    };
  }, [offer]);

 return (
    <div>
      <Navbar />
      <div className="container-fluid">
        <div className="col-md-8 mx-auto">
          <h1>{offer.Tytul_oferty}</h1>
          <p>{opis}</p>
          <p>Powierzchnia: {offer.Powierzchnia} m²</p>
          <p>Pokoje: {offer.Pokoje}</p>
          <p>Cena: {offer.Cena} PLN</p>


          <div className='f-carousel has-thumbs is-ltr'>
            {offer.Galeria?.map((image, index) => (
              <a
                key={index}
                data-fancybox="gallery"
                href={image.url}
                className={styles.carouselImage}
              >
                <img
                  src={image.url}
                  alt={image.altText || `Obraz ${index + 1}`}
                  className="img-fluid rounded"
                />
              </a>
            ))}
          </div>
        </div>
      </div>
      <Footer />
    </div>
  );

'use client';

import { useEffect } from 'react';
import { Fancybox } from '@fancyapps/ui';
import '@fancyapps/ui/dist/fancybox/fancybox.css';

const FancyboxGallery = () => {
  useEffect(() => {
    Fancybox.bind('[data-fancybox="gallery"]', {
      dragToClose: false,

      Toolbar: {
        display: {
          left: ['infobar'],
          middle: ['fullscreen'],
          right: ['thumbs', 'close'],
        },
      },

      Images: {
        zoom: false,
      },

      Thumbs: {
        type: 'modern',
      },

      Carousel: {
        transition: 'fade', // Płynne przejścia
        friction: 0, // Średni opór
        infinite: true,
      },

      on: {
        'Carousel.ready Carousel.change': (fancybox) => {
          fancybox.container.style.setProperty(
            '--bg-image',
            `url("${fancybox.getSlide().thumbSrc}")`
          );
        },
      },
    });

    // Cleanup Fancybox bindings when component is unmounted
    return () => {
      Fancybox.destroy();
    };
  }, []);
};

export default FancyboxGallery;

I’m trying to create a gallery that fancyapps has on their page: https://fancyapps.com/carousel/. And it is a gallery “combine with fancybox”. I can’t get through this :c