https://recallhq.com/assets/js/slider.js?12341

1slider("slider1")
2    slider("slider2")
3    function slider(elem) {
4
5        let slider_container = document.getElementById(elem)
6
7        const imgs = slider_container.querySelectorAll('[data-img-url]');
8
9        imgs.forEach((div) => {
10        div.style.backgroundImage = `url(./${div.getAttribute('data-img-url')})`;
11        });
12
13        const slider = slider_container.querySelector('.slider');
14        const indexButtons = slider_container.querySelectorAll('.index-container > button');
15        const arrowButtons = slider_container.querySelectorAll('[data-index-change]');
16        let currIndex = 0;
17
18        function slide(nextIndex) {
19        if (nextIndex < 0) nextIndex = imgs.length - 1;
20        if (nextIndex >= imgs.length) nextIndex = 0;
21        indexButtons[currIndex].style.backgroundColor = '';
22        indexButtons[nextIndex].style.backgroundColor = 'white';
23        slider.style.transform = `translateX(-${(nextIndex / imgs.length) * 100}%)`
24        currIndex = nextIndex;
25        }
26
27        indexButtons[0].style.backgroundColor = 'white';
28
29        indexButtons.forEach((button, index) => {
30        button.addEventListener('click', () => {
31            slide(index);
32        });
33        });
34
35        arrowButtons.forEach((button) => {
36        button.addEventListener('click', () => {
37            const indexChange = +button.getAttribute('data-index-change');
38            slide(currIndex + indexChange);
39        });
40        });
41
42        const navContainer = slider_container.querySelector('.nav-container');
43        let id;
44        let isSliding = false;
45        function startAutoSlide() {
46        if (!isSliding) {
47            id = setInterval(() => slide(currIndex + 1), 5000);
48            isSliding = true;
49        }
50        };
51        function stopAutoSlide() {
52        clearInterval(id);
53        isSliding = false;
54        };
55        startAutoSlide();
56
57        navContainer.addEventListener('mouseover', () => stopAutoSlide());
58        navContainer.addEventListener('mouseout', () => startAutoSlide());
59
60        document.addEventListener('touchstart', (e) => {
61        if (e.target !== navContainer && !navContainer.contains(e.target))
62            startAutoSlide();
63        });
64
65    }