jQuery Slick carousel filtering not working when used with slider syncing for Shopify product images

For the product images, I want to have small thumbnails and a featured image, which changes based on the thumbnail selected which I did with the Slider Syncing function.

I also want the page to only product images of the color variant selected (e.g. show only blue product when the blue color variant is selected) but the images aren't filtering.

Code for the two image sections (featured image within a div which has a class of .slider-single and thumbnail images are within a div with a class of of .slider-nav)

<div class="product-images js-product-slideshow w-100 w-50-l flex flex-column flex-row-l mb4 pr4-l">
   <div class="js-slides slider-single w-100 w-85-l ph2-m ph3-l">
     {% for image in product.images %}
       <div class="w-100">
         <img src="{{ image.src | img_url: '600x', scale: 3 }}" alt="{{ image.alt | escape }}">
       </div>
     {% endfor %}
   </div>

   <div class="js-slides slider-nav w-100 w-15-l">
     {% for image in product.images %}
       <div data-product-color="{{ image.alt }}">
         <img src="{{ image.src | img_url: 'compact' }}" alt="{{ image.alt | escape }}">
       </div>
     {% endfor %}
   </div>
</div>

The code for the slider syncing which works:

$(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
  });
});

The code for slide filtering based on product color (which is when the selected variant is equal to the image alt) which doesn't work:

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()