https://www.accuenergy.com/wp-content/themes/stratusx-child/page-a…/js/coming-soon-slider.js?ver=1773937434

1// Initialize video pop-up overlay
2document.addEventListener('DOMContentLoaded', function () {
3
4    // initial each swipers
5    const swipers = document.querySelectorAll(".coming-soon-slider");
6    swipers.forEach(function (swiper) {
7
8        let breakpoints = {};
9
10        const params = {
11            slidesPerView: 1,
12            centeredSlides: false,
13            spaceBetween: 15,
14            roundLengths: true,
15            breakpoints,
16        }
17
18        createCustomSlider(swiper, params);
19    });
20
21
22});
23
24function createCustomSlider(swiperContainer, params) {
25
26    if (!swiperContainer) return null;
27    if (typeof Swiper === 'undefined') {
28        console.error('Swiper library not loaded');
29        return null;
30    }
31
32    const swiper = swiperContainer.querySelector(".swiper");
33    if (!swiper) return null;
34    const swiperWrapper = swiper.querySelector(".swiper-wrapper");
35    if (!swiperWrapper) return null;
36
37    const nextButton = swiperContainer.querySelector(".custom-swiper-button-next");
38    const prevButton = swiperContainer.querySelector(".custom-swiper-button-prev");
39
40    // assign the pagination elements
41    const paginationEl = swiperContainer.querySelector(".custom-swiper-pagination");
42    let pagination = {};
43    if (paginationEl) {
44        pagination = {
45            el: paginationEl,
46            type: "bullets",
47        }
48    }
49
50    // assign the slide elements
51    const slideEl = swiperContainer.querySelectorAll(".custom-swiper-slide");
52    let slideClass = 'swiper-slide';
53    if (slideEl.length > 0) {
54        slideClass = 'custom-swiper-slide';
55    }
56
57    let swiperObject = new Swiper(swiper, {
58        ...params,
59        slideClass,
60        pagination,
61        watchOverflow: true,
62        navigation: {
63            nextEl: nextButton,
64            prevEl: prevButton,
65        },
66    });
67
68    // function to toggle UI
69    function toggleSwiperUI(swiperInstance) {
70        const totalPages = swiperInstance.pagination?.bullets?.length || 0;
71        const paginationEl = swiperInstance.pagination?.el;
72        const nextBtn = swiperInstance.navigation?.nextEl;
73        const prevBtn = swiperInstance.navigation?.prevEl;
74
75        if (paginationEl) {
76            if (totalPages <= 1) {
77                paginationEl.style.display = "none";
78                if (nextBtn) nextBtn.style.display = "none";
79                if (prevBtn) prevBtn.style.display = "none";
80            } else {
81                paginationEl.style.display = "";
82                if (nextBtn) nextBtn.style.display = "";
83                if (prevBtn) prevBtn.style.display = "";
84            }
85        }
86
87        // adjust alignment
88        if (swiperInstance.isLocked) {
89            swiperWrapper.classList.add('justify-content');
90            swiperWrapper.classList.add('swiper-locked');
91        } else {
92            swiperWrapper.classList.remove('justify-content');
93            swiperWrapper.classList.remove('swiper-locked');
94        }
95
96    }
97
98    // run once after init
99    toggleSwiperUI(swiperObject);
100
101
102    // when slides change or resize
103    swiperObject.on("resize", () => toggleSwiperUI(swiperObject));
104    swiperObject.on("slideChange", () => {
105        toggleSwiperUI(swiperObject);
106    });
107    swiperObject.on("update", () => toggleSwiperUI(swiperObject));
108
109    // window resize handler with throttling
110    let resizeTimeout;
111    let lastResizeTime = 0;
112    const throttleDelay = 150; // ms
113    const handleResize = () => {
114        const now = Date.now();
115        const timeSinceLastResize = now - lastResizeTime;
116
117        if (timeSinceLastResize >= throttleDelay) {
118            lastResizeTime = now;
119            swiperObject.update();
120        } else {
121            clearTimeout(resizeTimeout);
122            resizeTimeout = setTimeout(() => {
123                lastResizeTime = Date.now();
124                swiperObject.update();
125            }, throttleDelay - timeSinceLastResize);
126        }
127    };
128    window.addEventListener("resize", handleResize);
129
130    // Store cleanup function on swiper instance
131    swiperObject._cleanup = () => {
132        window.removeEventListener("resize", handleResize);
133        if (resizeTimeout) clearTimeout(resizeTimeout);
134    };
135
136    return swiperObject;
137
138}