How can I fix the photo swiping issue on my Dawn theme mobile interface?

Store Design
,
1

Hi there! I have the Dawn theme and my problem is on mobile only.

When I am on the product image and swipe it to see the next image, it actually swipes two, three, or more images at once. In order to swipe to the next image I need to be super gentle with the swipe.

Here is a video with the issue - https://imgur.com/a/nxZrx3j

So I guess I need to add custom code to my product template file saying that any strength of swiping should get me to the next or previous photo only.

Does anyone know how to resolve this?

Oh, and as a bonus, if someone knows how to make it so that when you get to the last photos and continue swiping, you just start from the first image again - looping effect. So the swipe appears endless.

2

Hi @Janeta03

Thanks for asking a good question on the Shopify community,

I am here to help you.

Before proceeding with the solution can you please share your website URL so we can check the exact issue and send you the solution accordingly?

Thanks

3

Oh, yes, sorry. So my website is www.crystalenergy.shop and the Shopify URL is https://admin.shopify.com/store/e3e572-3/

4

Hi @Janeta03

This is Richard from PageFly - Shopify Page Builder App, I’d like to suggest this idea:

this problem may be because the slideshow theme which is using library running with animation smooth, so you should contact the theme to get the necessary support, and about the 2nd issue is about custom code you should find a coding expert to be able to do this

Hope you find my answer helpful!
Best regards,
Richard | PageFly

5

did you figure out a fix? I have the same I can swipe 4 times and then my swipe function doesn’t work on mobile only

7

I found this code worked, and just pasted it at the bottom of my base.css file

/* Fix: product gallery swipe skipping slides on mobile */
@media screen and (max-width: 749px) {
media-gallery slideshow-slides {
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
}

media-gallery slideshow-slide {
scroll-snap-align: start;
scroll-snap-stop: always;
}
}