创建自定义产品滑块以仅适用于移动shopify主题

如何解决创建自定义产品滑块以仅适用于移动shopify主题

我正在尝试在Shopify主题中创建仅用于移动设备的自定义产品滑块。因此，有两种不同的滑块，一种用于移动设备，一种用于台式机。我也可以在滑块上添加视频。但问题是视频没有随着滑块移动。我已从以下网址获取了代码：https://www.shopify.in/partners/blog/product-media

这是我的product-template.liquid代码

 {% for media in product.media %}
  {% include 'mediamobile' %}
{% endfor %}

这是我的mediamobile.liquid代码

{% case media.media_type %}
  {% when 'image' %}
    <div class="product-image-left single-itemim lightBox-pop Mobile">
        {% if product.images.size > 0 %}
            {% for image in product.images %}
            {% capture wrapper_class %}
            {%- unless featured_image == image -%}
            hide
            {%- endunless -%}
            {% endcapture %}
            <div data-index="{{ forloop.index }}" id="ImageWrapper-{{ image.id }}" data-image-id="{{ image.id }}" class="responsive-image__wrapper" {{ wrapper_attributes }}>
                <a href="{{ image | img_url: '1000x' }}" class="image-popup-link"><img id="Image-{{ image.id }}"
                                                                                       class="responsive-image__image lazyload {{ image_class }}"
                                                                                       src="{{ image | img_url: '800x' }}"
                                                                                       data-src="{{ img_url }}"
                                                                                       data-widths="[{{ image_widths }}]"
                                                                                       data-aspectratio="{{ image.aspect_ratio }}"
                                                                                       data-sizes="auto"
                                                                                       tabindex="-1"
                                                                                       alt="{{ image.alt | escape }}"
                                                                                       {{ image_attributes }}
                >
                </a>

            </div>

            {% endfor %}
            {% else %}
           
        {% endif %}
    </div>
    {% when 'external_video' %}
    <div class="product-single__media" style="padding-top: {{ 1 | divided_by: media.aspect_ratio | times: 100}}%;" data-media-id="{{ media.id }}">
      {{ media | external_video_tag }}
    </div>
  {% when 'video' %}
    <div class="product-single__media" data-media-id="{{ media.id }}">
      {{ media | video_tag: controls: true }}
    </div>
  {% when 'model' %}
    <div class="product-single__media" style="padding-top: 100%" data-media-id="{{ media.id }}">
      {{ media | model_viewer_tag }}
    </div>
  {% else %}
    <div class="product-single__media" style="padding-top: 100%;" data-media-id="{{ media.id }}">
      {{ media | media_tag }}
    </div>
{% endcase %}

我的网站网址是：https://inka-corps.myshopify.com/collections/room_collection/products/inka-arne-dining-chair 密码：aichay