https://kingtechcare.vn/wp-content/themes/okhub-theme/template-parts/about-us/our-benefits/assets/scripts.js

1export function sectionOurBenefitScripts() {
2  const root = document.querySelector(".our-benefits");
3  if (!root) return;
4
5  const buttons = root.querySelectorAll(".nav__item");
6  const texts = root.querySelectorAll(".text");
7  const images = root.querySelectorAll(".wrapper__image-item");
8  const pagination = root.querySelector(".pagination");
9
10  if (!buttons.length || !texts.length || !images.length) return;
11
12  let currentIndex = 0;
13
14  const format = (n) => String(n).padStart(2, "0");
15
16  const updateUI = (newIndex) => {
17    if (newIndex < 0 || newIndex >= buttons.length) return;
18    if (newIndex === currentIndex) return;
19
20    // remove current
21    buttons[currentIndex]?.classList.remove("nav__item--active");
22    texts[currentIndex]?.classList.remove("active");
23    images[currentIndex]?.classList.remove("active");
24
25    // add new
26    buttons[newIndex]?.classList.add("nav__item--active");
27    texts[newIndex]?.classList.add("active");
28    images[newIndex]?.classList.add("active");
29
30    // update pagination
31    if (pagination) {
32      pagination.textContent = `${format(newIndex + 1)}/${format(buttons.length)}`;
33    }
34
35    currentIndex = newIndex;
36  };
37
38  // click tab
39  buttons.forEach((btn, index) => {
40    btn.addEventListener("click", () => updateUI(index));
41  });
42
43  // swipe mobile
44  let startX = 0;
45  let endX = 0;
46
47  root.addEventListener("touchstart", (e) => {
48    startX = e.touches[0].clientX;
49  });
50
51  root.addEventListener("touchend", (e) => {
52    endX = e.changedTouches[0].clientX;
53
54    const diff = startX - endX;
55
56    // swipe trái
57    if (diff > 50) {
58      updateUI(currentIndex + 1);
59    }
60
61    // swipe phải
62    if (diff < -50) {
63      updateUI(currentIndex - 1);
64    }
65  });
66}