Image scroll Error On My Website

[hiteshgolait]

Hey! Shopify experts

kickweightwithkeisha.com This is my online store.

I’m facing an issue to scroll product images both on mobile and computer.

Give me the solution… I will really appreciate

Images were not appearing on mobile… Then I added this code. Tell me if this is right or wrong.

@media screen and (max-width: 739px){
#product-photos {display: block;}
}

Theme Name: Fashionopolism

Thanks in Advance

@GemPages

[BSS-Commerce]

Hi @hiteshgolait

1. When I check the element with id=product-photos, I see that 2 parts of this code hide the display of images on mobile.

2. Maybe the theme provider’s intention (on mobile) is that the element with id=product-photos will be hidden, and the element with id=mobile-product-photos will be displayed, then the result will be:

=> If you want to display like above, navigate to id=mobile-product-photos and make it visible on break-point mobile {display: block}
=> If it is displayed like the first image, please remove display none in the 2 red circled parts

2. I noticed your click preview img is having a problem. You can hide the display of the 2 arrows and show the image by letting the customer click on the thumbnail.

Please add the CSS code to stylesheet.css at the bottom of the file:

#product-photos > main-image-navigation{
  display: none;
}

• Add the JS code to your JS file (depending on which JS your theme uses)

let listPreview = $(".product-main-image");
let listThumb = $(".product-thumbnail");
listThumb.each((i,item1) => {
        item1.addEventListener("click",() => {
        listThumb.removeClass("selected");
        listPreview.removeClass("selected");
        item1.classList.add("selected")
        listPreview[i].classList.add("selected")
  })
})

I hope that it will work for you.

[hiteshgolait]

I placed the codes… But it did not work… Looking forward to another solution.