Shopify Variant on Change Product image

variant.js

<!---- variants slectionchangejs ---->
          {% if product.variants.size > 1 %}
          <script>
            function selectCallback(variant, selector){
              var title=variant.title;
              var price = variant.price;
              console.log(price);
              $("span[data-product-price]").text( Shopify.formatMoney(variant.price,'{{ shop.money_format }}'));
              console.log(title);
              var media_src = variant.featured_media.id;
              console.log(media_src);
              const slider_change=document.querySelectorAll('.slick-product-slider .product__media-wrapper[data-media-id]');
              [...slider_change].forEach(
                //slider_changes => slider_changes.getAttribute('data-media-id')
                slider_changes => {
                  if (document.querySelector('.slick-product-slider .product__media-wrapper[data-media-id]' === media_src) {
                    $('.slick-product-slider .product__media-wrapper').addClass('is-selected');
                  }
                }
              )
              console.log(slider_change);

              // This is where you would put any code that you want to run when the variant changes.
            }

            var variantIdFieldIdentifier = 'Option1';
            new Shopify.OptionSelectors(variantIdFieldIdentifier, {
              product: {{ product | json }},     // Product object required to know how options map to variants
              onVariantSelected: selectCallback, // Function to do any interesting stuff (eg: update price field, image, etc) when selections change
              enableHistoryState: true           // When true, will update the URL to be a direct link to the currently-selected variant
            })


          </script>
          {% endif %}