https://cmsprime.com/wp-content/plugins/timeline/timeline.js

1// timeline.js
2document.addEventListener("DOMContentLoaded", function () {
3  document.querySelectorAll(".timeline-wrapper").forEach((wrap) => {
4    const swiperEl = wrap.querySelector(".swiper.__abTimeline");
5    const tabs = Array.from(wrap.querySelectorAll(".swiper-pagination-switch")); // your custom tabs
6    if (!swiperEl || tabs.length === 0) return;
7
8    // Helper: get correct slide index across Swiper versions / loop settings
9    const getIndex = (swiper) => {
10      if (typeof swiper.realIndex === "number") return swiper.realIndex;   // v4+
11      if (typeof swiper.activeIndex === "number") return swiper.activeIndex; // v3+
12      if (typeof swiper.snapIndex === "number") return swiper.snapIndex;
13      return 0;
14    };
15
16    // Keep .active synced to the current slide
17    const syncActive = (swiper) => {
18      const i = getIndex(swiper);
19      tabs.forEach((t, idx) => t.classList.toggle("active", idx === i));
20    };
21
22    // Build config with cross-version event hooks
23    const common = {
24      autoHeight: true,
25      slidesPerView: 1,
26      autoplay: { delay: 8000, disableOnInteraction: false },
27      speed:3000,
28      pagination: { el: wrap.querySelector(".swiper-pagination"), type: "progressbar" },
29      spaceBetween: 30,
30      loop: false
31    };
32
33    const isV4Plus = !!(Swiper && Swiper.prototype && Swiper.prototype.on);
34    const cfg = isV4Plus
35      ? Object.assign({}, common, {
36          on: {
37            init(swiper) { syncActive(swiper); },
38            // fires for drag, autoplay, arrows, API
39            slideChange(swiper) { syncActive(swiper); },
40            // extra safety so it updates as soon as transition starts
41            slideChangeTransitionStart(swiper) { syncActive(swiper); },
42            transitionEnd(swiper) { syncActive(swiper); },
43            realIndexChange(swiper) { syncActive(swiper); },
44            touchEnd(swiper) { syncActive(swiper); }
45          }
46        })
47      : Object.assign({}, common, {
48          // Swiper v3 style callbacks
49          onInit(swiper) { syncActive(swiper); },
50          onSlideChangeStart(swiper) { syncActive(swiper); },
51          onSlideChangeEnd(swiper) { syncActive(swiper); },
52          onTransitionEnd(swiper) { syncActive(swiper); }
53        });
54
55    const swiper = new Swiper(swiperEl, cfg);
56
57    // Click on a tab -> move to that slide (syncActive will run via events)

58    tabs.forEach((tab, index) => {
59      tab.addEventListener("click", (e) => {
60        e.preventDefault();
61        // v4+/v3 use slideTo; very old v2 used swipeTo (fallback included)
62        if (typeof swiper.slideTo === "function") swiper.slideTo(index);
63        else if (typeof swiper.swipeTo === "function") swiper.swipeTo(index);
64        // instant visual feedback
65        syncActive(swiper);
66      });
67    });
68  });
69});