How do I make the image carousel scrollable on mobile after clicking into a product - DawnTheme

[environmentalPa]

Hi guys,

Is there a way to make the image carousel scrollable AFTER clicking into a product on mobile? 

I'm using https://www.mobileviewer.io/ to test responsiveness.

After I click into the product it looks like this, which is just the zoomed image, however I want this to also be a carousel. As in, I don't want to have to X out after clicking into a product to be able to scroll through the other images. 

Looking for some help on this. Here is my store link: https://environmentalpartners.com.au/products/earth-friendly-cleaning-kit 

Thanks in advance and regards,

Jimmy

[wisn_shaftler]

this is stupid solution, but this will work. put this code in the theme.liquid bottom most before body tag close. (means before </body> )

{% if template == "product" %}

<style>
button.wisn-next {
    display: none;
}
button.wisn-back {
    display: none;
}


@media screen and (max-width: 768px) {
    product-modal[open] ~ .wisn-next {
        display: block;
        position: absolute;
        top: 50%;
        right: 0;
        z-index: 101;
        background: orange;
        border: none;
        padding: 10px 20px;
        transform: translateY(50%);
    }
    
    
    product-modal[open] ~ .wisn-back {
        display: block;
        position: absolute;
        top: 50%;
        left: 0;
        z-index: 101;
        background: orange;
        border: none;
        padding: 10px 20px;
        transform: translateY(50%);
    }

}
</style>



<script>
document.body.insertAdjacentHTML("beforeend", `<button name="wisn-next" class="wisn-next">next</button>`)
document.body.insertAdjacentHTML("beforeend", `<button name="wisn-previous" class="wisn-back">back</button>`)
document.addEventListener("click", e => {
    const target = e.target.closest(".wisn-back");
    if (!target) return;

    const modalImages = document.querySelectorAll(`product-modal .product-media-modal__content img`);
    const previousImage = document.querySelector(`product-modal .product-media-modal__content img:has(+img.active)`);

    if (!previousImage) return;
    modalImages.forEach(elem => elem.classList.remove("active"));
    previousImage?.classList.add("active");
})
document.addEventListener("click", e => {
    const target = e.target.closest(".wisn-next");
    if (!target) return;

    const modalImages = document.querySelectorAll(`product-modal .product-media-modal__content img`);
    const nextImage = document.querySelector(`product-modal .product-media-modal__content img.active + img`);

    if (!nextImage) return;
    modalImages.forEach(elem => elem.classList.remove("active"));
    nextImage?.classList.add("active");
})
</script>

{% endif %}

[environmentalPa]

Don't think it worked but maybe I'm pasting it wrong? 

Regards,

Jimmy

[wisn_shaftler]

you can try replace if part with

{% if template.name contains 'product' %} 

my code is not exactly a carousel it just showing the next image and previous image when click on next and back

screen recording

https://drive.google.com/file/d/1TgddxijOQap5B1Z18onVZiCBAsQ3tO5I/view?usp=drive_link

[environmentalPa]

Appreciate you taking the time to help.

Still not sure how you made it work, I must be pasting it wrong. 

Also is there a way to make the colors match the other greens?

Regards,

Jimmy