Difficulty touch-dragging to scroll video carousel

[rachelcsimmons]

trafficstars

Checks

• [X] Not a duplicate.
• [X] 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

4.1.4

Description

When I have a splide carousel with videos in it, using the video extension with my vimeo videos, it is very difficult to scroll the carousel on mobile. Unless you put your dragging finger on the gap between the slides, it usually doesn't work. I am assuming this is because the video is interpreting the attempted drag as an attempted interaction on the video instead.

When I use only images in the carousel instead of videos, the issue is no longer a problem.

Reproduction Link

No response

Steps to Reproduce

1. Create splide carousel using splide video extension. Parameters I used:

type: 'loop',
breakpoints: {
  749: {
    perPage: 1,
	rewindByDrag: true,
arrows: true,
	padding: { right: '15%', left: '15%' },
  }
},
gap: '{{ settings.spacing_grid_horizontal }}px',
focus: 'center',
video: {
	autoplay: true,
	mute: true,
	hideControls: true,
	disableOverlayUI: false,
loop: true,
},
arrows: true,
// rewind: true,
padding: { right: '6rem' },
updateOnMove: true,
pagination: true,
paginationKeyboard: true,
live: false,
drag: 'free',
snap: true,
autoplay: true,
//dragMinThreshold: 1,
flickMaxPages: 0.3,
pauseOnHover: false,
// fixedWidth: '288px',
    perPage: 3,

2. Populate 1 vimeo video per slide (loop, autoplay, custom interval). Example slide below (it's using liquid for some variables)

<li class="splide__slide" data-splide-vimeo="https://vimeo.com/{{ slide.vimeo_id }}" data-splide-interval="{{ slide.length | times: 1000 }}">
		<div class="splide__slide__container"> 
		{{- slide.thumbnail | image_url: height: 360 | image_tag -}}
		</div>
	</li>

3. When viewing on mobile, attempt to drag to scroll to the next video. it's easy when you drag the gap, it's difficult when you drag anything that's not the gap.

Expected Behaviour

I expect for a drag touch to always be interpreted as a drag, and not an interaction on the video. My videos don't have controls anyway. Also I have confirmed at least 3 different people are experiencing this with this carousel—it's not me being bad at dragging on my phone :)