I want to display images for a product based on the color options. E.g. If my product is shoes that come in black and white, I want only the black images to appear when the black color option is selected. I have managed to do so by giving the images an alt, adding it to a class, and then showing and hiding the image based on if the alt matches the option. I noticed however for the mobile view that there were more Slick dots and slides than actual images showing. So I solved this by adding slick calls to filter and unfilter slides as I hide and show images giving me this code:

_filterThumbnails: function(variant) {
        
  if (variant.featured_image != null && variant.featured_image.alt != null) {
    $('[data-thumbnail-color]').hide();
    $('.product-single__media-group').slick('slickUnfilter');
    
    var thumbnail_selector = '[data-thumbnail-color="' + variant.featured_image.alt + '"]';
    $(thumbnail_selector).show();
    $('.product-single__media-group').slick('slickFilter',thumbnail_selector);
  }
  else {
    $('[data-thumbnail-color]').show();
    $('.product-single__media-group').slick('slickUnfilter');
  }
},

My problem is that the class I call slick from .product-single__media-group is the same in the desktop and mobile view. So on mobile the function calls slick through that class and works since slick exists for it. However, on desktop, the images are not using slick so the calls will be undefined and ruin the site.