WooCommerce Twig Single Proudct Gallery with variations

gallery.js

import slick from 'slick-carousel/slick/slick'

(function ($) {
  const initGallerySlider = () => {
    return $(".gallery").slick({
			arrows: false,
      dots: false,
			speed: 700,
      fade: true,
    })
  }
  
  const initGallerySliderNav = () => {
    $('.gallery-nav').slick({
      slidesToShow: 5,
      slidesToScroll: 1,
      asNavFor: '.gallery',
      arrows: false,
      dots: false,
      centerMode: false,
      focusOnSelect: true,
      adaptiveHeight: false,
    })
  }

  const onVariationChange = (cb) => {
    $('[name="variation_id"]').change(() => {
      cb()
    })
  }

  const getCurrentVariation = () => {
    return $('[name=variation_id]').attr('value')
  }

  const jumpToVariation = (slider, id) => {
    const slideIndex = $(`[data-variation=${id}]`).attr('data-slide-index')
    slider.slick('slickGoTo', parseInt(slideIndex))
  }

  $(document).ready(() => {
    const gallerySlider = initGallerySlider()

    onVariationChange(() => {
      const currentVariation = getCurrentVariation()

      if(currentVariation) {
        jumpToVariation(gallerySlider, currentVariation)
      }
    })

    initGallerySliderNav()
  })
}(window.jQuery))

gallery.twig

<div class="small-12 medium-large-6 gallery-wrapper slider--gallery">
    <div class="gallery">
        {% for imageId in post.product.get_gallery_image_ids %}
            {{ responsiveImage.displayResponsiveImage(TimberImage(imageId), { ratio: '1:1', class: 'product-image' }) }}
        {% endfor %}
        {% for variation in variations %}
            {% set slickIndex = post.product.get_gallery_image_ids|length + loop.index - 1 %}
            <div data-variation="{{ variation.variation_id }}" data-slide-index="{{ slickIndex }}">
                {{ responsiveImage.displayResponsiveImage(TimberImage(variation.image.url), { ratio: '1:1', class: 'product-image' }) }}
            </div>
        {% endfor %}
    </div>
    <div class="gallery-nav">
        {% for imageId in post.product.get_gallery_image_ids %}
            {{ responsiveImage.displayResponsiveImage(TimberImage(imageId), { ratio: '1:1', class: 'product-image' }) }}
        {% endfor %}
        {% for variation in variations %}
            {{ responsiveImage.displayResponsiveImage(TimberImage(variation.image.url), { ratio: '1:1', class: 'product-image' }) }}
        {% endfor %}
    </div>
</div>