Галерея фотографий со стрелками в карточках товара

<!--SH11 - Модификация для Тильды. Превью-карусель в карточках товара https://mod.tistols.com/preview-carousel -->
<script>
    function waitForElement(elementId, callBack) {
        window.setTimeout(function () {
            let element = document.querySelector(elementId);
            if (element !== null && element.length !== 0) {
                callBack(elementId, element);
            } else {
                waitForElement(elementId, callBack);
            }
        }, 50);
    }

    function initCardGallery1() {
        let store = JSON.parse(window.tStoreXHR[Object.keys(window.tStoreXHR)[1-1]].response);
        let cards = document.querySelectorAll(".uc-vitrina .t-store__card:not([num])");

        for (var o = 0; o < cards.length; o++) {
            let plength = JSON.parse(store.products[o].gallery);
            let width
        if (plength.length < 5 ) {
            width = (cards[o].querySelector(".js-product-img").clientWidth / plength.length).toFixed(2);
        }else{
             width = (cards[o].querySelector(".js-product-img").clientWidth / 5).toFixed(2);
        }
            let pad = 2;

            for (var i = 0; i < Math.min(5, plength.length); i++) {
                cards[o].querySelector(".js-product-img").insertAdjacentHTML("beforeend", '<div class="pag" style="width: ' + (width - pad * 2 ) + 'px; left: ' + (width + pad * 2) * i + 'px;"></div>');
            }

            for (var i = 0; i < Math.min(5, plength.length); i++) {
                cards[o].querySelector(".js-product-img").insertAdjacentHTML("beforeend", '<div class="pag" style="width: ' + (width - pad * 2 ) + 'px; left: ' + (width + pad * 2) * i + 'px;"></div>');
            }
            
            
            if (plength.length > 5) {
            
                cards[o].querySelector(".js-product-img").insertAdjacentHTML("beforeend", '<div class="more-photos" style="display: none;">Еще ' + (plength.length - 5) + ' фото</div>');
            }

            cards[o].querySelector(".js-product-img").addEventListener("mousemove", function (e) {
                let photos = JSON.parse(store.products[e.target.closest('.t-store__card').attributes.num.value].gallery);
                let maxIndex = Math.min(photos.length, 5);

            for (var i = 0; i < maxIndex; i++) {
                let pagElement = e.target.querySelectorAll('.pag')[i];
                if (pagElement) {
                    pagElement.style.width = (e.target.clientWidth - 2 * pad) / maxIndex + 'px';
                }

            if (e.layerX > e.target.clientWidth * ((1 / maxIndex) * i)) {
                if (e.target.tagName.toLowerCase() === "img") {
                    e.target.setAttribute("src", photos[i].img);
                } else {
                    e.target.style.backgroundImage = 'url("' + photos[i].img + '")';
                }
                
                if (typeof t786__updateLazyLoad !== "undefined") {
                    t786__updateLazyLoad();
                }
                
                e.target.querySelectorAll('.pag').forEach( (element) => {
                    element.setAttribute('name', 'hovered');
                });
    
                e.target.querySelectorAll('.pag')[i].setAttribute('name', 'active');
    
                if (i === maxIndex - 1) {
                    let morePhotosElement = e.target.querySelector('.more-photos');
                    if (morePhotosElement) {
                        morePhotosElement.style.display = 'flex';
                    }
                } else {
                    let morePhotosElement = e.target.querySelector('.more-photos');
                    if (morePhotosElement) {
                        morePhotosElement.style.display = 'none';
                    }
                }
            }
    }
});

cards[o].querySelector(".js-product-img").addEventListener("mouseleave", function (e) {
    let photos = JSON.parse(store.products[e.target.closest('.t-store__card').attributes.num.value].gallery); 
    e.target.setAttribute("style", 'background-image: url("' + photos[0].img + '") !important;');
    e.target.querySelectorAll('.pag').forEach( (element) => {
        element.removeAttribute('name');
    });

    let morePhotosElement = e.target.querySelector('.more-photos');
    if (morePhotosElement) {
        morePhotosElement.style.display = 'none';
    }
});
cards[o].setAttribute('num', o);
        }
    }

    if (window.innerWidth > 1000) {
        waitForElement('.uc-vitrina .t-store__card', () => {  
            let loadObserver = new MutationObserver(function (mutations) {
                mutations.forEach(function (mutation) {
                    if (document.querySelector('.uc-vitrina .t-store__card') !== null && document.querySelectorAll(".uc-vitrina .t-store__card")[document.querySelectorAll(".uc-vitrina .t-store__card").length -1].attributes.num === undefined) {
                        initCardGallery1();
                    }
                });
            });
            loadObserver.observe(document.querySelector('.uc-vitrina'), {
                attributes: true
            });
            initCardGallery1();
        });
    }
</script>

<style>
    .js-product-img {
    overflow:hidden;}
    .pag {
        position: absolute;
        bottom: 3px;
        background: #80b33a; /*Здесь задаём цвет линий*/ 
        border-radius: 30;
        height: 2px; /*Здесь задаём высоту линий*/ 
        pointer-events: none;
        opacity: 0.5; /*Здесь задаём непрозрачность линий от 0 до 1 */ 
        margin-left: 2px;
        margin-right: 2px;
    }

    .pag[name="hovered"] {
        opacity: 0.5;
    }

    .pag[name="active"] {
        opacity: 1;
    }

    .more-photos {
        position: absolute;
        pointer-events: none;
        bottom: 0;
        left: 0;
        right: 0;
        background: rgba(0, 0, 0, 0.5);
        color: white;
        text-align: center;
        padding: 5px;
        cursor: pointer;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-family: 'Manrope',Arial,sans-serif!important; /*Здесь задаём шрифт подсказки "Еще # фото" */ 
    }
</style>