https://doctorswithafrica.org/wp-content/themes/cuamm/js/modules/mod-history.js

1document.addEventListener("DOMContentLoaded", () => {
2
3    const historySections = document.querySelectorAll(".mod-14-history");
4
5    historySections.forEach(section => {
6
7        const id = section.dataset.historyId;
8
9        const navSlider = section.querySelector(`#${id}-nav`);
10        const mainSlider = section.querySelector(`#${id}-main`);
11
12        if (!navSlider || !mainSlider) return;
13
14        const historyNav = new Swiper(navSlider, {
15            spaceBetween: 120,
16            slidesPerView: 3,
17            centeredSlides: true,
18            slideToClickedSlide: true,
19            loop: false,
20
21            navigation: {
22                nextEl: section.querySelector(".nav-next"),
23                prevEl: section.querySelector(".nav-prev")
24            },
25
26            breakpoints: {
27				0: { slidesPerView: 3,
28					 spaceBetween: 120,
29				   },
30                768: { slidesPerView: 3 },
31                1024: { slidesPerView: 3 }
32            }
33        });
34
35        new Swiper(mainSlider, {
36            spaceBetween: 50,
37            slidesPerView: 1,
38            effect: 'fade',
39            fadeEffect: { crossFade: true },
40            autoHeight: true,
41
42            thumbs: {
43                swiper: historyNav
44            },
45
46            navigation: {
47                nextEl: section.querySelector(".nav-next"),
48                prevEl: section.querySelector(".nav-prev")
49            }
50        });
51
52    });
53
54});