Shopify implementation of Flickity Fullscreen?

[jhnngrg]

Hi guys,

having this code in the Shopify custom liquid section for Flickity slider does not allow fullscreen display of individual images in the slider. Is there anything I'm doing wrong? I know I have to attach fullscreen libraries separately, but I did that and it still doesn't work.

{{ "flickity.css" | asset_url | stylesheet_tag }}
{{ "fullscreen.css" | asset_url | stylesheet_tag }}
{{ "mc-custom-slider.css" | asset_url | stylesheet_tag }}
{{ "animate.min.css" | asset_url | stylesheet_tag }}

<div class="carousel" data-flickity='{ "fullscreen": true, "wrapAround": true, "freeScroll": true, "pageDots": false, "draggable": true }'>
    {%- for block in section.blocks -%}
    <div>
        <img src="{{ block.settings.desktopImage | img_url: 'master'}}" alt="{{ block.settings.desktopImage.alt }}"/>
    </div>
    {%- endfor -%}
</div>

{{ 'jquery-3.6.1.js' | asset_url | script_tag }}
{{ 'flickity.pkgd.js' | asset_url | script_tag }}
{{ 'fullscreen.js' | asset_url | script_tag }}



{% schema %}
{
    "name": "Flickity Slideshow",
    "settings": [
      
    ],
    "blocks" : [
      {
        "type" : "column",
        "name" : "slide",
        "settings" : [
          {
            "type": "image_picker",
            "id" : "desktopImage",
            "label" :  "Desktop Image"
          }
        ]
      }
    ],
    "presets": [
      {
        "name": "Flickity Slider"
      }
    ]
  }
{% endschema %}

Thank you!