agent_test/template/javascript/homepage.html

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />
<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>

<script>

    function initHomepageBannerSlider() {
        if (typeof Swiper === "undefined") return
        if (!document.querySelector(".homepage-banner-slider")) return

        new Swiper(".homepage-banner-slider", {
            loop: true,
            autoplay: {
                delay: 3500,
                disableOnInteraction: false,
            },
            pagination: {
                el: ".homepage-banner-pagination",
                clickable: true,
            },
        })
    }

    function initProductCategorySliders() {
        if (typeof Swiper === "undefined") return
        document.querySelectorAll(".product-category-slider").forEach(function (el) {
            new Swiper(el, {
                slidesPerView: 5,
                spaceBetween: 12,
                navigation: {
                    nextEl: el.querySelector(".swiper-button-next"),
                    prevEl: el.querySelector(".swiper-button-prev"),
                },
                breakpoints: {
                    1280: { slidesPerView: 4 },
                    1600: { slidesPerView: 5 },
                },
            })
        })
    }

    document.addEventListener("DOMContentLoaded", () => {
        initHomepageBannerSlider()
        initProductCategorySliders()
    })
</script>