光滑的滑块同步缩略图未对齐（在Shopify上）

Question

我已经安装了Slick滑块，用于同步产品图片和缩略图的幻灯片，在您使用主图像而不是缩略图进行导航之前，所有操作都正常。

您可以在此处看到问题： https://monosnap.com/file/2wLtDBErumVnQs8UlA5PtRro8UBQZq

它在Shopify上运行，但我不认为这是与居中有关的问题，但我只是想不通！

任何帮助表示赞赏！

  document.addEventListener("DOMContentLoaded", function(event) { 
    $('.slider-for').slick({
      slidesToShow: 1,
      slidesToScroll: 1,
      arrows: true,
      fade: true,
      asNavFor: '.slider-nav'
    });
    $('.slider-nav').slick({
      slidesToShow: 3,
      slidesToScroll: 1,
      asNavFor: '.slider-for',
      dots: false,
      centerMode: true,
      focusOnSelect: true,
      infinite: true
    });
  });


        <div class="slider-for">
          {% for image in product.images %}
          <img src="{{image | img_url: '565x', crop: 'center'}}" title="{{image.alt | default: product.title | escape}}" alt='{{image.alt | default: product.title | escape}}'/>                          
          {% endfor %}
        </div>

        <div class="slider-nav">
          {% for image in product.images %}
          <div>
            <img src="{{image | img_url: '400x'}}" alt="{{image.alt | default: product.title | escape}}" class="product-thumbnails">
          </div>                          
          {% endfor %}
        </div>