https://www.probono.org.br/wp-content/themes/probono/assets/js/page-modules/timeline.js?ver=1

1document.addEventListener("DOMContentLoaded", function () {
2    const prevButton = document.getElementById("prev");
3    const nextButton = document.getElementById("next");
4    const timelinediv = document.querySelector("[data-js='timelinediv']");
5    let slides = document.querySelectorAll("[data-js='slides']");
6    let width = screen.width;
7    let index = 0;
8    let translateAxis = 200;
9    let translateAxisMobile = 30;
10    let slidesNumber = slides.length - 1;
11
12    nextButton.addEventListener("click", () => {
13        if (index === slides.length - 1) {
14            index = 0;
15            if (width < 500) {
16                timelinediv.style.marginLeft = '30px';
17                translateAxisMobile = 30;
18            } else {
19                timelinediv.style.marginLeft = '200px';
20                translateAxis = 200;
21            }
22        } else {
23            index++;
24            if (width < 500) {
25                timelinediv.style.marginLeft = translateAxisMobile-300 + 'px';
26                translateAxisMobile = translateAxisMobile - 300;
27
28            } else {
29                timelinediv.style.marginLeft = translateAxis-500 + 'px';
30                translateAxis = translateAxis - 500;
31            }
32        }

33        slides.forEach(slide => {
34            slide.classList.remove("current");
35        });
36
37        slides[index].classList.add("current");
38    });
39    prevButton.addEventListener("click", () => {
40        if (index === 0) {
41            index = slides.length - 1;
42            if(width < 500) {
43                timelinediv.style.marginLeft = 30 + -(300 * slidesNumber) + 'px'
44                translateAxisMobile = 30 + -(300 * slidesNumber);
45            } else {
46                timelinediv.style.marginLeft = 200 + -(500 * slidesNumber) + 'px'
47                translateAxis = 200 + -(500 * slidesNumber);
48            }
49        } else {
50            index--;
51            if(width < 500) {
52                timelinediv.style.marginLeft = translateAxisMobile+300 + 'px';
53                translateAxisMobile = translateAxisMobile + 300;
54            } else {
55                timelinediv.style.marginLeft = translateAxis+500 + 'px';
56                translateAxis = translateAxis + 500;
57            }
58        }
59
60        slides.forEach(slide => {
61            slide.classList.remove("current");
62        });
63
64        slides[index].classList.add("current");
65    });
66});