https://grupog2i.com.br/js/resultados-carousel.js

1document.addEventListener('DOMContentLoaded', () => {
2    const section = document.querySelector('.resultados');
3    if (!section) return;
4
5    const carousel = section.querySelector('.conteiner-resultados');
6    const controls = section.querySelector('.controles-resultados');
7    const cards = Array.from(section.querySelectorAll('.card-resultados'));
8
9    if (!carousel || !controls || cards.length === 0) return;
10
11    const dots = cards.map((card, index) => {
12        const dot = document.createElement('button');
13        dot.type = 'button';
14        dot.className = 'button-controle-resultados';
15        dot.setAttribute('aria-label', `Ver resultado ${index + 1}`);
16
17        dot.addEventListener('click', () => {
18            card.scrollIntoView({
19                behavior: 'smooth',
20                block: 'nearest',
21                inline: 'center'
22            });
23        });
24
25        controls.appendChild(dot);
26        return dot;
27    });
28
29    function setActiveDot(activeIndex) {
30        dots.forEach((dot, index) => {
31            dot.classList.toggle('active', index === activeIndex);
32            dot.setAttribute('aria-current', index === activeIndex ? 'true' : 'false');
33        });
34    }
35
36    function updateActiveDot() {
37        const carouselCenter = carousel.scrollLeft + carousel.clientWidth / 2;
38        let activeIndex = 0;
39        let closestDistance = Infinity;
40
41        cards.forEach((card, index) => {
42            const cardCenter = card.offsetLeft + card.offsetWidth / 2;
43            const distance = Math.abs(carouselCenter - cardCenter);
44
45            if (distance < closestDistance) {
46                closestDistance = distance;
47                activeIndex = index;
48            }
49        });
50
51        setActiveDot(activeIndex);
52    }
53
54    carousel.addEventListener('scroll', () => {
55        window.requestAnimationFrame(updateActiveDot);
56    }, { passive: true });
57
58    window.addEventListener('resize', updateActiveDot);
59    setActiveDot(0);
60    updateActiveDot();
61});