variant change when image updated

image.liquid

{% for image in product.images %}
          <div class="swiper-slide" {% if featured_image == image %}data-featured="true"{% endif %}>
            <a   data-image-id="{{ image.id }}" class="mpi product-gallery__image product-gallery__image-{{ forloop.index }}" href="{{ image | product_img_url: '2048x' }}" title="{{ image.alt | escape }}" data-full-size-src="{{ image | product_img_url: 'master' }}">
              {% include 'responsive-image', image: image %}
            </a>
          </div>
  {% endfor %}

varaint.js

var product_variant_map = {};
    {% for variant in product.variants %}
      product_variant_map["{{variant.id}}"] = {{ variant | json }};
    {% endfor %}

    function variantImages(imgid) {
      var vid;
      var found = false;
      console.log(imgid + ' is called');
      Object.keys(product_variant_map).forEach(function(key) {
        if( imgid == product_variant_map[key].featured_image.id && !found){
          vid = key;
          found = !found;
          // Update the alternate selector
          var v = product_variant_map[vid];
          console.log(v.option1,v.option2,v.option3);
          if ( v.option1 !== null ) { $('.selector-wrapper:eq(0)  select').val(v.option1).trigger('change'); }
          if ( v.option2 !== null ) { $('.selector-wrapper:eq(1) select').val(v.option2).trigger('change'); }
          if ( v.option3 !== null ) { $('.selector-wrapper:eq(2) select').val(v.option3).trigger('change'); }
        }
      });
    }
  $(document).ready(function() {
  thumbnails = $('.swiper-button-next,.swiper-button-prev,.gallery-thumbs>a');
  if (thumbnails.length) {
    thumbnails.on('click', function(event) {
      event.preventDefault();
      var item = $(".swiper-slide-active>a");
      /*find the variants*/
      var imgid = item.data('image-id');
      console.log(imgid);
      variantImages(imgid);
    });
  }
  });