There is no switching function for mobile product images

I created a Single Product Layout in Layout, set the Product Gallery to Bottom grid, and turned on the Main carousel with pagination. On the computer, I can use the arrows to switch product images normally, but I don’t know why it doesn’t work on mobile phones and tablets. Can display arrows and switch pictures
Below is a video demonstration
https://drive.google.com/file/d/1g1pbD_GjYeJRsLJoM1ATmo1CbpAdZon4/view?usp=sharing

Attachments:

You must be logged in to view attached files.

Hello,

Try to use the code below to show the arrows on mobile.

.single-product .pswp--touch [class*="pswp__button--arrow--"] {
    visibility: visible;
}

Clear the cache and recheck the issue.

Kind Regards

I have a question, can I set the Main Carousel image to use Full Size on the website instead of the thumbnail format generated by Woocommerce?

I have another question. When you click on the black background area on the computer, you can automatically exit the picture browsing. But why can’t you click on the black area on the mobile phone to exit the picture browsing?

Hello,

1. Unfortunately, we do not have such functionality in Theme Settings to disable it.

2. Sorry but the Photoswipe library works in such a way – https://photoswipe.com/

Thank you for your time.

Kind Regards

Woodmart comes with a Photoswipe popup feature that allows you to click on a black background to exit the image viewing feature, you can check out the video on how to do this. And when I use F12 on my computer, I can click on the black background to exit, but I don’t know why when I click on the black background area on my mobile, it doesn’t exit the image view!
https://drive.google.com/file/d/1gmS7sxERvunfhXXHWfq4a6VWH-5j2TSB/view?usp=sharing
The link above is a video of me in action.

Attachments:

You must be logged in to view attached files.

Hello,

In the browser emulator of mobile device, you cannot close it by clicking on the black bg area – https://prnt.sc/dl5-uCC4X4ws. When you checking the mobile version in browser, you need to reupdate the page to make it work similarly to mobile.

As I mentioned above, the Photoswipe library works in such a way – https://photoswipe.com/

Also, why do you need to click on the black bg area if you can just swipe the image to close it? https://gyazo.com/e74ca4259439e3e3bd90d53199de24be

Kind Regards

Because I think the original image display logic is better than the feature you sent me, and seeing that you can click on the black background to close the view on the computer side, I’d like to see that on the mobile side as well.

One more question, if I want the background to be semi-transparent when the image is viewed, how do I set it?

Hello,

Here is a custom CSS to make it a little bit transparent –

.single-product .pswp__bg {
    background: rgba(51,51,51,0.91);
}

Kind Regards

[Author]

Posts