Add thumbail Card product

demo site  marktdiscount 
line 63


    <div data-product-id="{{ card_product.id }}"  class="card__media_sl">
          {% if card_product.metafields.custom.connect_products != blank %}
            {% for related_product in card_product.metafields.custom.connect_products.value %}
              <div class="card__media-item">
                {% if related_product.featured_image %}
                  <img src="{{ related_product.featured_image | image_url: width: 600 }}" alt="{{ related_product.title }}">
                {% endif %}
              </div>
            {% endfor %}
          {% else %}
            {% for media in card_product.media %}
              <div class="card__media-item">
                {% case media.media_type %}
                  {% when 'image' %}
                    <img 
                      src="{{ media.preview_image | img_url: '480x480' }}" 
                      alt="{{ media.alt | escape }}" 
                      loading="lazy">
                  
                  {% when 'video' %}
                    {{ media | video_tag: controls: true }}
          
                  {% when 'external_video' %}
                    {{ media | external_video_tag }}
          
                  {% when 'model' %}
                    {{ media | model_viewer_tag }}
                {% endcase %}
              </div>
            {% endfor %}
          {% endif %}

          </div>
line 165 


   <!-- Thumbnails -->
      {% if card_product.metafields.custom.connect_products != blank %}
        <div class="card__media-thumbs" data-product-id="{{ card_product.id }}">
          {% for related_product in card_product.metafields.custom.connect_products.value %}
            {% if related_product.featured_image %}
              <div class="thumb-item" data-index="{{ forloop.index0 }}">
                <img src="{{ related_product.featured_image | image_url: width: 100 }}" alt="thumb-{{ related_product.title }}">
              </div>
            {% endif %}
          {% endfor %}
          <button class="thumbs-next-arrow" data-product-id="{{ card_product.id }}">
            <span class="svg-wrapper">
              {{ 'arrow-thumbail.svg' | inline_asset_content }}
            </span>
          </button>
        </div>
      {% elsif card_product.media.size > 1 %}
        <div class="card__media-thumbs" data-product-id="{{ card_product.id }}">
          {% for media in card_product.media %}
            <div class="thumb-item" data-index="{{ forloop.index0 }}">
              <img src="{{ media.preview_image | img_url: '100x100' }}" alt="thumb-{{ media.alt | escape }}">
            </div>
          {% endfor %}
          <button class="thumbs-next-arrow" data-product-id="{{ card_product.id }}">
            <span class="svg-wrapper">
              {{ 'arrow-thumbail.svg' | inline_asset_content }}
            </span>
          </button>
        </div>
      {% endif %}
 main.js 

$('.card__media_sl').each(function () {
  const $slider = $(this);
  const productId = $slider.data('product-id');

  if ($slider.find('.card__media-item').length > 1) {
    
    $slider.flickity({
      wrapAround: true,
      pageDots: false,
      prevNextButtons: false,
      cellAlign: 'left',
      autoPlay: false,
    });
  }
});


   $('.card__media-thumbs').each(function () {
  const $slider = $(this);
  const productId = $slider.data('product-id');

  if ($slider.find('.thumb-item').length > 5) {
    $slider.addClass('card__media-thumbs-slider');
    $slider.flickity({
      wrapAround: false,
      pageDots: false,
      prevNextButtons: false,
      cellAlign: 'left',
      autoPlay: false,
    });
  }
});
  
$(document).on('click', '.card__media-thumbs .thumb-item', function () {
  const $thumb = $(this);
  const index = $thumb.data('index');
  const productId = $thumb.closest('.card__media-thumbs').data('product-id');
  const $slider = $('.card__media_sl[data-product-id="' + productId + '"]');

  if ($slider.length) {
    $slider.flickity('select', index);
    $thumb.addClass('active').siblings().removeClass('active');
  }
});

// Next arrow click
$(document).on("click", ".thumbs-next-arrow", function () {
  const productId = $(this).data('product-id');
  const $slider = $('.card__media_sl[data-product-id="' + productId + '"]');
  const $thumbs = $('.card__media-thumbs[data-product-id="' + productId + '"]');

  if (!$slider.length) return;

  $slider.flickity('next');

  const flkty = Flickity.data($slider[0]);
  if (!flkty) return;

  setTimeout(() => {
    const index = flkty.selectedIndex;
    $thumbs.find('.thumb-item').removeClass('active')
      .eq(index).addClass('active');
  }, 50);
});