php - how to show images of different variation on single-product.twig

one text

I'm new to timber and twig. I have a custom single-product.twig template that I need to add a functionality so when user change the variation on the product, the image change to the current variation. here is my single product code and I assigned each variation with their own image on the backend of woo commerce:

<aside class="mt10 mw4 center">
    <div class="ph4">
        {% do action('woocommerce_before_single_product') %}
    </div>
</aside>

<article class="single-product-details mw4 center grid-l grid-columns-9 gap4 bw1 ba b--red {{ post.class }}" itemscope itemtype="http://schema.org/Product">


    <div
        class="[images] grid-col-span-6">

        {# {% do action('woocommerce_before_single_product_summary') %} #}
        {% if product.get_gallery_image_ids %}
            {% set product_gallery = product.get_gallery_image_ids %}
            {# <nav class="product_gallery ">
                {% for item in product_gallery %}
                    <div>
                        <img src="{{TimberImage(item).src|resize(150,150,'center')}}" alt="{{post.title}}"/>
                    </div>
                {% endfor %}
            </nav> #}
            <figure class="product-slider">
                {% for item in product_gallery %}
                    <div>
                        <img src="{{TimberImage(item).src|resize(1000,1000,'center')}}" alt="{{post.title}}"/>
                    </div>
                {% endfor %}
            </figure>
        {% else %}
            {# SINGLE IMAGE #}
            <img class="w-100" src="{{ post.thumbnail.src('shop_single') }}"/>
        {% endif %}

    </div>

    <div class="[add2cart] ph4 grid-col-span-3">
        <div
            class="summary entry-summary">

            {# TITLE #}
            {% do action('woocommerce_single_product_summary') %}

            {% block display_price %}
                {# Display price for single simple product #}
                <p class="">
                    {% if product.get_sale_price %}
                        <strike class="gray">${{product_price}}</strike>
                        <span content="USD" itemprop="priceCurrency">$</span>
                        <span itemprop="price" content="{{product_sale_price}}">{{product_sale_price|number_format(2, '.', ',')}}</span>
                    {% else %}
                        {% spaceless %}
                            {% if product.get_price == '0.00' %}
                                <span content="USD" itemprop="priceCurrency"></span>
                                <span content="0.00" itemprop="price">Free</span>
                            {% else %}
                                <span content="USD" itemprop="priceCurrency">$</span>
                                <span itemprop="price" content="{{ product.get_price }}">{{ product.get_price |number_format(2, '.', ',')}}</span>
                            {% endif %}
                        {% endspaceless %}
                    {% endif %}
                </p>
            {% endblock %}

            {% if not product.is_in_stock() %}
                <p>This product is currently out of stock. Add your email address below to be notified when it's back!</p>
                {# {{fn('do_shortcode','[gravityform id="6" title="false" description="false"]')}} #}
            {% else %}
                {% block form %}
                    <form action="{{product.add_to_cart_url}}" class="cart" method="post" enctype="multipart/form-data">

                        {% block quantity %}
                            {% if item.id %}
                                {% set group_prod_id = '_' ~ item.id %}
                                {% set group_prod_name = '[' ~ item.id ~ ']' %}
                            {% endif %}
                            <div class="product-quantity mb2 mb3-l">
                                <label class="" for="quantity">Quantity</label>
                                <select name="quantity{{ group_prod_name }}" id="quantity{{ group_prod_id }}">
                                    {% for item in 1..6 %}
                                        <option value="{{ item }}">{{ item }}</option>
                                    {% endfor %}
                                </select>
                            </div>
                        {% endblock %}

                        {% block variations %}{% endblock %}

                        {# Hidden validation field? #}
                        <input type="hidden" id="add-to-cart" name="add-to-cart" value="{{ product.get_id }}">

                        {% block add_to_cart %}
                            <button class="db mv2 pv1 ph3 ba dim w-100 w-auto-m" type="submit" data-product_id="{{product_id}}">
                                {% if product.is_on_backorder(1) %}
                                    Pre-order
                                {% elseif item.get_type == 'variable-subscription' or item.get_type == 'subscription' %}
                                    Subscribe
                                {% else %}
                                    Add to Cart
                                {% endif %}
                            </button>
                        {% endblock %}

                    </form>
                {% endblock %}
            {% endif %}

        </div>

    </div>

    <div class="grid-col-span-9">
        {% do action('woocommerce_after_single_product_summary') %}
    </div>

    <meta itemprop="url" content="{{ post.link }}"/>

</article>

{% if related_products %}
    {% for item in related_products %}
        {% block pre_tease %}{% endblock %}
        <article class="w-50 w-third-m w-25-l ph4 mv4 flex flex-column">
            <a class="black dim" href="{{ post.link }}"> {% block before_tease %}{% endblock %}
                {% if post.thumbnail %}
                    <img class="db mv4" src="{{ post.thumbnail|resize(400,400) }}" alt="">
                {% endif %}
                <header>
                    <h3>{{ post.title }}</h3>
                </header>
                <p class="dn db-m">
                    {% if post.excerpt %}
                        {{ post.excerpt }}
                    {% else %}
                        {{ post.content|excerpt(30) }}
                    {% endif %}
                    <span class="white bg-black dt br-pill lh-solid pv1 ph3 mv3 ttu f7">Info</span>
                </p>
                {% block after_tease %}{% endblock %}
            </a>
        </article>
    {% endfor %}
{% endif %}

{% do action('woocommerce_after_single_product') %}