为什么Slick Slider slickGoTo方法不起作用？

Question

I am developing a WooCommerce website. On the single product page, I am using slick slider to display the product images.

The product is variable and has different colour options. These are shown in a select field. I am trying to make it so that when a user selects a colour, the slick slider automatically slides to the matching slide.

I am adding a data-color attribute to each slider which contains the colours name. Using this I'm able to get the correct slideIndex for each colour. However when I try to use slickGoTo nothing happens.

The slickGoTo method is written correctly as when I move it outside of the function it works. When its inside the change function it doesn't fire.

$( "#pa_colour" ).on('change', function() { 

    var prod_color = $( "#pa_colour option:selected" ).val();
    var slide_index = parseInt( $( ".slider-for" ).find('[data-color="' + prod_color + '"]').data("slick-index") ) -1;

    $( ".slider-for" ).slick( 'slickGoTo', slide_index, false);

  });

<div class="slider-for" id="#main-prod-slider">
  <div data-color="<?php echo $product_attribute_name; ?>">
  
    <a href="<?php echo $product_variation['image']['url']; ?>" data-lightbox="welly-<?php echo $image_count ?>" data-lightbox="welly">
        <img src="<?php echo $product_variation['image']['url']; ?>" alt="" width="" height="" />
      </a>
  
  </div>
</div>

</div>