html - Picture slider on Mobile

Question

I am working on a Shopify store, and I want to display multiple product images depending on what options are selected. This is the code I am using, which works perfectly on desktop, but messed up the way pictures are displayed on slider in mobile:

{% assign wanted_alts = product.selected_or_first_available_variant.options %}
            
            <ul class="product-single__thumbnails product-single__thumbnails-{{ section.id }}" data-slider-container>
              {% if enable_thumbnail_slides == true %}
                <div class="product-single__thumbnails-slider-track" data-slider-track>
              {% endif %}

              {% for media in product.media %}
                {% if wanted_alts contains media.alt or media.alt == "All" %}
                  <li class="product-single__thumbnails-item product-single__thumbnails-item--{{ section.settings.media_size }} {% if enable_thumbnail_slides == true %} product-single__thumbnails-item-slide{% endif %} js"{% if enable_thumbnail_slides == true %} data-slider-slide-index="{{ forloop.index0 }}" data-slider-item{% endif %}>
                    <a href="{{ media.preview_image | img_url: product_image_zoom_size, scale: product_image_scale }}"
                      class="text-link product-single__thumbnail product-single__thumbnail--{{ section.id }}"
                      data-thumbnail-id="{{ section.id }}-{{ media.id }}"
                      {% if enable_thumbnail_slides == true %} data-slider-item-link{% endif %}
                      {% if enable_image_zoom %}data-zoom="{{ media.preview_image | img_url: product_image_zoom_size, scale: product_image_scale }}"{% endif %}>

                        {%- capture thumbnailAlt -%}
                          {%- if media.media_type == 'video' or media.media_type == 'external_video' -%}
                            {{ 'sections.featured_product.video_thumbnail_alt' | t: imageAlt: media.alt | escape }}
                          {%- elsif media.media_type == 'model' -%}
                            {{ 'sections.featured_product.model_thumbnail_alt' | t: imageAlt: media.alt | escape }}
                          {%- else -%}
                            {{ 'sections.featured_product.gallery_thumbnail_alt' | t: imageAlt: media.alt | escape }}
                          {%- endif -%}
                        {%- endcapture -%}

                        <img class="product-single__thumbnail-image" src="{{ media.preview_image | img_url: '110x110', scale: 2 }}" alt="{{ thumbnailAlt }}">
                        {%- if media.media_type == 'video' or media.media_type =='external_video' -%}
                          <div class="product-single__thumbnail-badge">
                            {% include 'icon-video-badge-full-color' %}
                          </div>
                        {%- endif -%}
                        {%- if media.media_type == 'model' -%}
                          <div class="product-single__thumbnail-badge">
                            {% include 'icon-3d-badge-full-color' %}
                          </div>
                        {%- endif -%}
                    </a>
                  </li>
                {% endif %}
              {% endfor %}

              {% if enable_thumbnail_slides == true %}
                </div>
              {% endif %}
            </ul>

The only things I changed are: Included {% assign wanted_alts = product.selected_or_first_available_variant.options %} before the images list to find out what options I want to display.

Wrap each <li> item in a if statement that tests if I want to show that image or not (based on the alt_text):

{% for media in product.media %}
    {% if wanted_alts contains media.alt or media.alt == "All" %} //Line I added
        <li>
        ...
        </li>
    {% endif %}//Line I added
{% endfor %}

This is my website.

Now my thumbnails are messed up on mobile, but they look exactly like I wanted on desktop.

Can someone help me to figure this out?

This is how it looks on mobile now:

This is how it looked before I changed the code (and the way I want it to be):

Answer 1

等待大神解答