ایجاد گالری افقی بی‌نهایت در المنتور

/**

* Author: TavTheme

* Website: https://tavtheme.com/

* Instagram: @tavtheme

*/



<style>
/* ====== Infinite Gallery Marquee – by tav ====== */
.elementor-image-gallery {
    overflow: hidden;
    padding: 40px 0;
    background: transparent;
}

/* انیمیشن */
.elementor-image-gallery .tav-gallery-wrapper {
    display: flex;
    width: max-content;
    animation: tav-marquee 100s linear infinite;
}

.elementor-image-gallery .gallery-item {
    flex-shrink: 0;
    margin: 5px !important;
    padding: 0 !important;
}

.elementor-image-gallery .gallery-icon img {
    width: 240px !important;
    height: 240px !important;
    object-fit: cover;
    border-radius: 24px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.22);
    transition: 0.4s ease;
}

.elementor-image-gallery .gallery-item:hover img {
    transform: scale(1.08) translateY(-8px);
    box-shadow: 0 30px 70px rgba(0,0,0,0.35);
}

/* توقف انیمیشن روی هاور */
.elementor-image-gallery .tav-gallery-wrapper:hover {
    animation-play-state: paused !important;
}

/* Keyframes */
@keyframes tav-marquee {
    from { transform: translateX(0); }
    to { transform: translateX(-100%); }
}

/* موبایل */
@media (max-width: 767px) {
    .elementor-image-gallery .gallery-icon img {
        width: 200px !important;
        height: 200px !important;
        border-radius: 18px;
    }
}
</style>

<script>
document.addEventListener("DOMContentLoaded", function () {

    // همه گالری‌های صفحه
    const galleries = document.querySelectorAll(".elementor-image-gallery");

    galleries.forEach(gallery => {

        // اگر قبلاً پردازش شده باشد دوباره انجام نده
        if (gallery.classList.contains("tav-processed")) return;

        const items = gallery.querySelectorAll(".gallery-item");
        if (!items.length) return;

        // ساخت wrapper
        const wrapper = document.createElement("div");
        wrapper.classList.add("tav-gallery-wrapper");

        let originalHTML = "";

        // کلون کردن و دوبل کردن
        items.forEach(item => {
            wrapper.appendChild(item.cloneNode(true));
            originalHTML += item.outerHTML;
            item.remove();
        });

        wrapper.innerHTML += originalHTML;

        gallery.appendChild(wrapper);

        // علامت پردازش شده
        gallery.classList.add("tav-processed");
    });

});
</script>