title: jQuery Slick carousel filtering not working when used with slider syncing for Shopify product images
body: <p>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.</p>
  
  <p>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.</p>
  
  <p>Code for the two image sections (featured image within a div which has a class of <strong>.slider-single</strong> and thumbnail images are within a div with a class of of <strong>.slider-nav</strong>)</p>
  
  <pre><code>&lt;div class="product-images js-product-slideshow w-100 w-50-l flex flex-column flex-row-l mb4 pr4-l"&gt;
     &lt;div class="js-slides slider-single w-100 w-85-l ph2-m ph3-l"&gt;
       {% for image in product.images %}
         &lt;div class="w-100"&gt;
           &lt;img src="{{ image.src | img_url: '600x', scale: 3 }}" alt="{{ image.alt | escape }}"&gt;
         &lt;/div&gt;
       {% endfor %}
     &lt;/div&gt;
  
     &lt;div class="js-slides slider-nav w-100 w-15-l"&gt;
       {% for image in product.images %}
         &lt;div data-product-color="{{ image.alt }}"&gt;
           &lt;img src="{{ image.src | img_url: 'compact' }}" alt="{{ image.alt | escape }}"&gt;
         &lt;/div&gt;
       {% endfor %}
     &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The code for the slider syncing which works:</p>
  
  <pre><code>$(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
    });
  });
  </code></pre>
  
  <p>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:</p>
  
  <pre><code>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()
  </code></pre>