Display a list of images from metafield file list

[Lea_Arq]

Hi friends! I am looking to build some custom image slider components using metafields file list types for things like articles, products, and pages.I am having a lot of trouble pulling a proper URL from the string of media IDs that this metafield returns from the list type:

I have tried a multitude of different filters, loops, and assigns to no avail. Here's what I am working with currently which is a mishmash of:
https://community.shopify.com/c/shopify-design/how-to-render-images-for-a-metafield-with-multiple-fi...I 
https://support.metafields.guru/support/solutions/articles/44001935861 

https://stackoverflow.com/questions/73509894/display-a-list-of-metafield-files-using-shopify-liquid 

{% assign file = article.metafields.custom.slider_images_optional_.value %}

        {% for file_reference in file %}
            {% assign file_output = file %}
            {% assign file_url = field.url %}
            {% assign file_name_with_shopify_extension = file_url | split: '/' | last %}
            <div class="carousel-cell">
                {{ file_name_with_shopify_extension }}
                <img 
                    class="lazyload"
                    src="{{ field | metafield_tag }}"
                    data-widths="[475, 880, 1200, 162]"
                    data-aspectratio="{{ field.aspect_ratio }}"
                    data-sizes="auto"
                 />
                 <noscript>
                    <img class="grid-product__image lazyloaded"
                      src="{{ field | metafield_tag }}">
                  </noscript>
            </div>
        {% endfor %}

Preview URL: https://0oi2hl85qshuad10-65131774191.shopifypreview.com/blogs/journal/how-to-choose-the-best-linens-...

the metafield_tag  filter doesn’t help me identify what’s being output at all, it gives me a MediaListDrop error,Liquid error ... media_tag does not support MediaListDropI tried using a similar solution found here, but this works for files and not images https://community.shopify.com/c/shopify-design/how-to-render-images-for-a-metafield-with-multiple-fi...

I simply want to be able to loop through the images, pull the shopify file URL…

I feel like @MetafieldsGuru probably knows a more elegant way to solve this 

[Lea_Arq · Accepted solution]

{%- if article.metafields.custom.slider_images_optional_ != blank -%}

<div class="main-carousel" data-flickity='{ "cellAlign": "left", "contain": true, "initialIndex": 2, "cellAlign": "center"}'>

{% assign file = article.metafields.custom.slider_images_optional_.value %}

{% for image in article.metafields.custom.slider_images_optional_.value %}

<div class="carousel-cell">

<img

class="lazyload"

src=" {{ image | image_url: width: '1640x' }}"

data-widths="[475, 880, 1200, 1620]"

data-aspectratio="{{ image.aspect_ratio }}"

data-sizes="auto"

/>

<noscript>

<img class="grid-product__image lazyloaded"

src="{{ field | image_url: width: '1640x' }}">

</noscript>

</div>

{% endfor %}




</div>

{%- endif -%}

[wmacka]

I am trying to display these in a row - rather than on top of each other - can anyone help modify the above?

I would like up to 4 images per row.