Touch switching is not possible on mobile devices on Shopify

[shikai-yu]

Checks

• Not a duplicate.
• Not a question, feature request, or anything other than a bug report directly related to Splide. Use Discussions for these topics: https://github.com/Splidejs/splide/discussions

Version

v4.1.3

Description

When I was developing a carousel plug-in using splide on Shopify, I found that I couldn't use touch to slide horizontally on the mobile side. I could only switch between them using the left and right switch buttons and automatic carousel.
If I keep swiping horizontally, sometimes it works by touch swiping, but not every time.

Reproduction Link

No response

Steps to Reproduce

1.Create a component file
2.Below is the code from the file：

{%- if title_text != blank -%} <{{heading_tag }} class="{{section.id}}-brand-swiper-title page-width">{{ title_text | escape }} {%- endif -%}

{%- if section.blocks.size > 0 -%}

{%- for block in section.blocks -%} {% assign index = forloop.index %}
• {%- if block.settings.link != blank -%} {%- else -%}
  {%- endif -%}

  {% if block.settings.brand_img_pc != blank %} {% if block.settings.brand_img_mobile != blank %} {% endif %} {% else %} {%- render 'placeholder-svg', name: 'lifestyle-1' -%} {% endif %}

  {% if block.settings.brand_title_pc != blank or block.settings.brand_subtitle_pc != blank %}

  {% if block.settings.brand_title_pc != blank %} {% if block.settings.brand_title_mobile != blank %}

  {{ block.settings.brand_title_mobile }}

  {% endif %}

  {{ block.settings.brand_title_pc }}

  {% endif %} {% if block.settings.brand_subtitle_pc != blank %} {% if block.settings.brand_subtitle_mobile != blank %}

  {{ block.settings.brand_subtitle_mobile }}

  {% endif %}

  {{ block.settings.brand_subtitle_pc }}

  {% endif %}

  {% endif %} {%- if block.settings.link != blank -%} {%- else -%}
  {%- endif -%}
{% endfor %}

{% if arrow_left_img != blank %} {% else %} {% endif %}

{% if arrow_right_img != blank %} {% else %} {% endif %}

{%- endif -%}

{%- if section.blocks.size > 0 -%}

{%- for block in section.blocks -%}

{% endfor %}

{% endif %}

<script> document.addEventListener( 'DOMContentLoaded', function() { let splideOptions = { type:'loop', autoplay: true, autoWidth:true, autoHeight:true, arrows:false, pagination:false, pauseOnHover:false, cover: true, dragMinThreshold: { mouse: 1, touch: 5, }, flickPower: 500, interval: {{ interval_time | times: 1000 }}, drag: true, gap: '24px', breakpoints: { 768: { gap: '16px', }, }, } const splide = new Splide( '#{{ section.id }}Splide',splideOptions ); $('#{{ section.id }}ArrowLeft').on('click',function(){ splide.go('-1') }); $('#{{ section.id }}ArrowRight').on('click',function(){ splide.go('+1') }); $('.{{ section.id }}-brand-point .brand-point-hot-spot').on('click',function(){ const index = $('.{{ section.id }}-brand-point .brand-point-hot-spot').index(this); splide.go(`>${index}`) }); splide.on( 'mounted', function () { $('.{{ section.id }}-brand-point').removeClass('active'); $('.{{ section.id }}-brand-point').eq(0).addClass('active'); } ); splide.on( 'autoplay:playing', function ( rate ) { let progressNum = rate*100; $('.{{ section.id }}-brand-point.active').find('.{{ section.id }}-point-progress').css('width',progressNum+'%'); } ); splide.on( 'move', function (newIndex) { $('.{{ section.id }}-brand-point').removeClass('active'); $('.{{ section.id }}-brand-point').eq(newIndex).addClass('active'); } ); splide.mount(); }); </script> 3.查看添加的视频

MobileTouch.mp4

文件

Expected Behaviour

Solve the problem that the v4 version cannot be switched horizontally on the mobile side in Shopify development