https://www.toppanleefunglabel.com/wp-content/uploads/custom-swiper.js

1/**
2 * custom-banner Swiper
3 * First dwell after init: 2s, then every slide dwell: 4s.
4 */
5(function () {
6  var attempts = 0;
7  var MAX_ATTEMPTS = 30;
8  var FIRST_DELAY_MS = 2000;
9  var NORMAL_DELAY_MS = 4000;
10  var SPEED_MS = 800;
11
12  function swiperOptions() {
13    return {
14      loop: true,
15      speed: SPEED_MS,
16      autoplay: {
17        delay: NORMAL_DELAY_MS,
18        pauseOnMouseEnter: true,
19        disableOnInteraction: false,
20      },
21      pagination: { el: ".swiper-pagination", clickable: true },
22      keyboard: { enabled: true },
23      simulateTouch: true,
24    };
25  }
26
27  /** After init: wait 2s on first slide, then run normal 4s autoplay. */
28  function startWithShortFirstDwell(swiper) {
29    if (!swiper) return;
30    if (swiper.autoplay && typeof swiper.autoplay.stop === "function") {
31      swiper.autoplay.stop();
32    }
33    setTimeout(function () {
34      if (typeof swiper.slideNext === "function") {
35        swiper.slideNext();
36      }
37      if (swiper.autoplay && typeof swiper.autoplay.start === "function") {
38        swiper.autoplay.start();
39      }
40    }, FIRST_DELAY_MS);
41  }
42
43  function tryInit() {
44    var el = document.querySelector(".custom-banner-slider");
45    if (!el) {
46      if (++attempts < MAX_ATTEMPTS) setTimeout(tryInit, 200);
47      return;
48    }
49
50    var SwiperConstructor = null;
51
52    if (typeof Swiper !== "undefined" && typeof Swiper === "function") {
53      SwiperConstructor = Swiper;
54    } else if (window.elementorFrontend && window.elementorFrontend.utils) {
55      if (typeof window.elementorFrontend.utils.swiper === "function") {
56        SwiperConstructor = window.elementorFrontend.utils.swiper;
57      }
58    } else if (window.elementorFrontend && window.elementorFrontend.elements) {
59      var elements = window.elementorFrontend.elements;
60      for (var key in elements) {
61        if (elements[key] && elements[key].swiper && elements[key].swiper.constructor) {
62          SwiperConstructor = elements[key].swiper.constructor;
63          break;
64        }
65      }
66    } else if (typeof jQuery !== "undefined" && jQuery.fn.swiper) {
67      var jqInstance = jQuery(el).swiper(swiperOptions());
68      startWithShortFirstDwell(jqInstance && jqInstance[0] ? jqInstance[0].swiper : jqInstance);
69      return;
70    }
71
72    if (SwiperConstructor) {
73      try {
74        var swiper = new SwiperConstructor(el, swiperOptions());
75        startWithShortFirstDwell(swiper);
76        return;
77      } catch (e) {
78        console.warn("Swiper constructor failed, using CSS fallback", e);
79      }
80    }
81
82    initCssFallback(el);
83  }
84
85  function initCssFallback(el) {
86    var slides = el.querySelectorAll(".swiper-slide");
87    var pagination = el.querySelector(".swiper-pagination");
88    var current = 0;
89    var total = slides.length;
90    var timer = null;
91
92    el.style.position = "relative";
93    el.style.overflow = "hidden";
94
95    slides.forEach(function (slide, i) {
96      slide.style.position = "absolute";
97      slide.style.top = "0";
98      slide.style.left = "0";
99      slide.style.width = "100%";
100      slide.style.height = "100%";
101      slide.style.transition =
102        "opacity 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94)";
103      slide.style.opacity = i === 0 ? "1" : "0";
104      slide.style.display = "flex";
105    });
106
107    if (pagination) {
108      pagination.innerHTML = "";
109      for (var i = 0; i < total; i++) {
110        var bullet = document.createElement("span");
111        bullet.className =
112          "swiper-pagination-bullet" +
113          (i === 0 ? " swiper-pagination-bullet-active" : "");
114        bullet.setAttribute("data-index", i);
115        bullet.addEventListener("click", function () {
116          goTo(parseInt(this.getAttribute("data-index"), 10));
117          restartNormalTimer();
118        });
119        pagination.appendChild(bullet);
120      }
121    }
122
123    function goTo(index) {
124      slides.forEach(function (s, i) {
125        s.style.opacity = i === index ? "1" : "0";
126      });
127      if (pagination) {
128        pagination.querySelectorAll(".swiper-pagination-bullet").forEach(function (b, i) {
129          b.className =
130            "swiper-pagination-bullet" +
131            (i === index ? " swiper-pagination-bullet-active" : "");
132        });
133      }
134      current = index;
135    }
136
137    function tick() {
138      goTo((current + 1) % total);
139    }
140
141    function restartNormalTimer() {
142      if (timer) clearInterval(timer);
143      timer = setInterval(tick, NORMAL_DELAY_MS);
144    }
145
146    // First advance after 2s, then every 4s
147    setTimeout(function () {
148      tick();
149      restartNormalTimer();
150    }, FIRST_DELAY_MS);
151  }
152
153  if (document.readyState === "loading") {
154    document.addEventListener("DOMContentLoaded", tryInit);
155  } else {
156    tryInit();
157  }
158})();
159
160/* lazy-load non-first banner backgrounds */
161document.querySelectorAll(".custom-banner-slider .swiper-slide[data-bg]").forEach(function (slide) {
162  var loadBg = function () {
163    if (!slide.dataset.bg) return;
164    slide.style.backgroundImage = "url('" + slide.dataset.bg + "')";
165    delete slide.dataset.bg;
166  };
167  if ("IntersectionObserver" in window) {
168    var io = new IntersectionObserver(
169      function (entries) {

170        entries.forEach(function (e) {
171          if (e.isIntersecting) {
172            loadBg();
173            io.unobserve(slide);
174          }
175        });
176      },
177      { rootMargin: "200px" }
178    );
179    io.observe(slide);
180  } else {
181    loadBg();
182  }
183});