在光滑的滑块产品缩略图中删除不需要的照片

Question

我是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','') 

网页浏览