https://mediciconlafrica.org/wp-content/themes/cuamm/js/modules/mod-image-slider.js

1document.addEventListener("DOMContentLoaded", function () {
2
3  document.querySelectorAll(".image-slider-module").forEach((module) => {
4    const swiperEl = module.querySelector(".image-slider-module__swiper");
5    if (!swiperEl) return;
6
7    const navItems = module.querySelectorAll(".slider-nav-item");
8
9    const swiper = new Swiper(swiperEl, {
10      slidesPerView: 1,
11      speed: 600,
12      effect: "fade",
13      fadeEffect: { crossFade: true },
14    });
15
16    // 👉 FRECCE CLICK
17    module.querySelectorAll(".image-slider-next-arrow").forEach((btn) => {
18      btn.addEventListener("click", () => swiper.slideNext());
19    });
20
21    module.querySelectorAll(".image-slider-prev-arrow").forEach((btn) => {
22      btn.addEventListener("click", () => swiper.slidePrev());
23    });
24
25    // 👉 NAV NUMERI
26    navItems.forEach((item) => {
27      item.addEventListener("click", () => {
28        swiper.slideTo(parseInt(item.getAttribute("data-index")));
29      });
30    });
31
32    // =========================
33    // FUNZIONE FUORI (GIUSTO)
34    // =========================
35    function updateArrows(swiper, module) {
36      const prevBtns = module.querySelectorAll(".image-slider-prev-arrow");
37      const nextBtns = module.querySelectorAll(".image-slider-next-arrow");
38
39      const isFirst = swiper.isBeginning;
40      const isLast = swiper.isEnd;
41
42      prevBtns.forEach(btn => {
43        btn.classList.toggle("is-disabled", isFirst);
44      });
45
46      nextBtns.forEach(btn => {
47        btn.classList.toggle("is-disabled", isLast);
48      });
49    }
50
51    // init stato iniziale
52    updateArrows(swiper, module);
53
54    // 👉 SLIDE CHANGE
55    swiper.on("slideChange", function () {
56
57      // NAV ACTIVE
58      navItems.forEach((item) => {
59        const itemIndex = parseInt(item.getAttribute("data-index"));
60        const isActive = itemIndex === this.activeIndex;
61
62        item.classList.toggle("is-active", isActive);
63
64        const navBar = item.querySelector(".nav-bar-number");
65        if (navBar) {
66          navBar.classList.toggle("bg-primary", isActive);
67          navBar.classList.toggle("bg-neutral-beige-medium-dark", !isActive);
68        }
69      });
70
71      // ARROWS STATE
72      updateArrows(this, module);
73    });
74
75  });
76
77});