Javascript 删除slick slider产品缩略图中不需要的照片

我是Javascript新手，有人能帮我解决以下问题吗？ 我有一个有各种颜色变化的产品，所以我用display:none-css方法制作了色样，只显示所选颜色的照片。然而，在移动版本中，未显示的照片仍在缩略图滑块中占据位置（未显示，但占用了一个空间，这会弄乱滑块），似乎是在使用具有平滑数据索引的平滑滑块对文件进行排序，我正在尝试使用slickRemove功能去除不需要的颜色，但我没有任何运气，任何人可以帮助我如何去除未选择的颜色，您的帮助将不胜感激，谢谢

var getfeaturedimage = document.getElementById("FeaturedImage-product-template");
  var getfeaturedimagevalue = getfeaturedimage.getAttribute("color-option");
  var thumbnailLi2 = $('.product-single__thumbnails-item[color-option="' + getfeaturedimagevalue + '"]');
         var colorshown2 = $('.product-single__thumbnail-image[color-option="' + getfeaturedimagevalue + '"]');
          $('.product-single__thumbnails-item').css('display','none')
          $('.product-single__thumbnail-image').css('display','none')
          $('.product-single__thumbnails-item').css('clear','none')

          var $notcolor = document.querySelectorAll('li[data-slick-index]:not([data-slick-index="getfeaturedimagevalue"])');
          $notcolor.slick('slickRemove','i');

          $(thumbnailLi2).css('display','')
          $(colorshown2).css('display','') 

页面视图