Javascript 与Shopify产品图像的滑块同步一起使用时，jQuery Slick carousel过滤不起作用

对于产品图像，我希望有一个小缩略图和一个特色图像，它会根据我使用滑块同步功能选择的缩略图进行更改

我还希望页面仅显示所选颜色变体的产品图像（例如，选择蓝色变体时仅显示蓝色产品），但图像不会过滤

两个图像部分的代码（一个div中的特征图像，其类别为。单滑块，缩略图图像位于一个div中，其类别为。滑块导航）

基于产品颜色（当所选变体等于图像alt时）的幻灯片过滤代码无效：

let imageSelect = {
changeImage: function(event) {
  let
    slideSelector = '.js-slides',
    $form = $(document).find(addToCartFormSelector),
    selectedVariant = productForm.getActiveVariant($form),
    color = selectedVariant.option1,
    images = $(slideSelector).find('img'),
    $slides = $(document).find(slideSelector),
    variantImageId = function() {
      let
        src = selectedVariant.featured_image.src,
        splitSrc = src.split('?v='),
        newSrc = splitSrc[1];

      return newSrc
      };

  $.each(images, function(index, image) {
    if(image.alt === color || image.src.includes(variantImageId())) {
      $(image).parent().addClass('show-slide')
    } else {
      $(image).parent().removeClass('show-slide')
    }
  })

  $slides.slick('slickFilter', '.show-slide')
},

init: function(event) {
  $(addToCartFormSelector).on('change', function(event) {
      let $slides = $(document).find(slideSelector)

      $('.slider-single').slick('slickUnfilter', '.show-slide')
      $('.slider-nav').slick('slickUnfilter', '.show-slide')
      imageSelect.changeImage()
    })
  }
}

imageSelect.init()

---

你找到解决办法了吗？

$(function() {
  $('.slider-single').slick({
    slidesToShow: 1,
    slidesToScroll: 1,
    arrows: false,
    fade: true,
    asNavFor: '.slider-nav'
  });

  $('.slider-nav').slick({
    slidesToShow: 4,
    asNavFor: '.slider-single',
    vertical: true,
    verticalSwiping: true,
    arrows: false,
    centerMode: true,
    focusOnSelect: true
  });
});

let imageSelect = {
changeImage: function(event) {
  let
    slideSelector = '.js-slides',
    $form = $(document).find(addToCartFormSelector),
    selectedVariant = productForm.getActiveVariant($form),
    color = selectedVariant.option1,
    images = $(slideSelector).find('img'),
    $slides = $(document).find(slideSelector),
    variantImageId = function() {
      let
        src = selectedVariant.featured_image.src,
        splitSrc = src.split('?v='),
        newSrc = splitSrc[1];

      return newSrc
      };

  $.each(images, function(index, image) {
    if(image.alt === color || image.src.includes(variantImageId())) {
      $(image).parent().addClass('show-slide')
    } else {
      $(image).parent().removeClass('show-slide')
    }
  })

  $slides.slick('slickFilter', '.show-slide')
},

init: function(event) {
  $(addToCartFormSelector).on('change', function(event) {
      let $slides = $(document).find(slideSelector)

      $('.slider-single').slick('slickUnfilter', '.show-slide')
      $('.slider-nav').slick('slickUnfilter', '.show-slide')
      imageSelect.changeImage()
    })
  }
}

imageSelect.init()