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

Question

我正在开发WooCommerce网站。在单一产品页面上，我正在使用光滑的滑块显示产品图像。

该产品是可变的，并且具有不同的颜色选项。这些显示在选择字段中。我试图做到这一点，以便当用户选择一种颜色时，光滑的滑块会自动滑动到匹配的幻灯片上。

我正在向每个包含颜色名称的滑块添加data-color属性。使用这个我可以为每种颜色获取正确的slideIndex。但是，当我尝试使用slickGoTo时，没有任何反应。

当我将slickGoTo方法移出它起作用的函数之外时，它会正确编写。当它在change函数中时不会触发。

$( "#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>