How to hide thumbnail slides without breaking main swiper

[modulareverything]

I need to hide certain slides in the thumbnail selector, but not break the functionality of the main slider.

I have product variants that should appear when you select the active variant, but I only want the selected variant to be visible in the thumbnail selector.

The reason for this is there are model shots of the products but they're all hidden due to the volume of variant images. I've drawn a couple of crude diagrams to show you what I mean:

This is what I have now, showing all variants and working correctly, but hiding the model shots:

This is what I'd like, where only the selected variant appears, and the model shots can be seen:

Here's the function I have that selects the correct slide when you select a variant:

  function updateMedia(gallery, featured_image) {
    /**
     * Create an object of variants (ids) with an index, then match the
     * slide variant ID with the currently selected variantId
     * and finally slideTo that found index
     */

    const swiper = gallery.querySelector(".swiperMain").swiper;
    const { id } = featured_image; // featured_image.id returns the ID of the image object I pass into the function

    if (swiper) {
      const targetId = id.toString();
      const ids = [...swiper.slides].map((slide, index) => ({
        imageId: slide.dataset.image,
        index,
      }));
      swiper.slideTo(ids.find(({ imageId }) => imageId === targetId).index);
    }
  }

Please let me know if you need any more information. Happy to provide a CodePen or something for this if required.