Fancybox V5 lazy loading doesn't work. Images are being fetched on page load

Question

I can't find any documentation about lazy loading images with fancybox (carousel). For some reason the images are just being fetched on the page load, no lazy load is happening. What could be the issue?

  <div
            id="image-slider"
            class="f-property-carousel f-carousel rounded-2xl block basis-[500px] h-[500px] grow-[9999] max-h-[12rem] lg:max-h-[30rem]"
        >
            <div class="f-carousel__viewport cursor-pointer rounded-2xl">
                <div class="f-carousel__track rounded-2xl">
                    {% for img_url in property_view.image_urls %}
                        <a href="{{ img_url }}" data-fancybox="group" class="f-carousel__slide rounded-2xl">
                            <img
                                {% if loop.index > 1 %}loading="lazy"{% endif %}
                                src="{{ img_url }}"
                                alt="{{ property_view.title }}"
                                class="lazy w-full h-full max-w-[80%] mx-auto object-cover drop-shadow-xl rounded-2xl"
                            >
                            </a>
                        {% endfor %}
                    </div>
                </div>
            </div>

Config and initialization:

// Initialize slider
const options = {
    infinite: true,
    slidesPerPage: 1,
    transition: "slide",
    Dots: {dynamicFrom: 3},
    Panzoom: {touch: false},
    Navigation: {prevTpl: "", nextTpl: "", classes: {button: "f-button fade-in",}},
};

document.querySelectorAll(".f-carousel").forEach((container) => {
    new window.Carousel(container, options);
});