https://loja.correios.com.br/public-resources/js/lojaweb/carrosselProduto.js

1const slide = document.querySelector('.slide');
2const imagens = Array.from(slide.querySelectorAll('.img-produto'));
3const nav = document.querySelector('.nav');
4const btnAnterior = document.querySelector('button[title="anterior"]');
5const btnProximo = document.querySelector('button[title="próximo"]');
6
7let indexAtual = 0;
8
9// Cria bolinhas dinamicamente
10const pontosContainer = nav.querySelector('.pontos');
11pontosContainer.innerHTML = '';
12const pontos = imagens.map((_, i) => {
13  const pontoBtn = document.createElement('div');
14  const botao = document.createElement('span');
15  pontoBtn.appendChild(botao);
16  pontoBtn.classList.add('ponto');
17  pontosContainer.appendChild(pontoBtn);
18  pontoBtn.addEventListener('click', () => trocarSlide(i));
19  return pontoBtn;
20});
21
22// Atualiza bolinhas
23function atualizarBolinhas() {
24  pontos.forEach((ponto, i) => {
25    ponto.classList.toggle('ativo', i === indexAtual);
26  });
27}
28
29// Centraliza bolinhas
30function centralizarBolinhas() {
31  const pontoAtivo = pontos[indexAtual];
32  const container = pontosContainer;
33
34  const containerWidth = container.offsetWidth;
35  const containerCenter = container.scrollLeft + containerWidth / 2;
36  const pontoCenter = pontoAtivo.offsetLeft + (pontoAtivo.offsetWidth / 2);
37
38  const limite = containerWidth / 2; // limite pra considerar como "fora do centro"
39
40  const distancia = pontoCenter - containerCenter;
41
42  // Só scrolla se a bolinha estiver fora do centro
43  if (Math.abs(distancia) > limite || Math.abs(distancia) < limite / 2) {
44    const scrollLeft = pontoCenter - (containerWidth / 2);
45    container.scrollTo({
46      left: scrollLeft,
47      behavior: 'smooth'
48    });
49  }
50}
51
52// Faz o slide andar
53function atualizarSlide() {
54  const offset = indexAtual * -100;
55  slide.style.transform = `translateX(${offset}%)`;
56  atualizarBolinhas();
57  centralizarBolinhas();
58}
59
60function trocarSlide(novoIndex) {
61  indexAtual = (novoIndex + imagens.length) % imagens.length;
62  atualizarSlide();
63}
64
65// Botões
66btnAnterior.addEventListener('click', () => {
67  trocarSlide(indexAtual - 1);
68});
69
70btnProximo.addEventListener('click', () => {
71  trocarSlide(indexAtual + 1);
72});
73
74// Swipe touch
75let startX = 0;
76slide.addEventListener('touchstart', (e) => {
77  startX = e.touches[0].clientX;
78});
79
80slide.addEventListener('touchend', (e) => {
81  const endX = e.changedTouches[0].clientX;
82  const diff = endX - startX;
83  if (Math.abs(diff) > 50) {
84    if (diff < 0) {
85      trocarSlide(indexAtual + 1);
86    } else {
87      trocarSlide(indexAtual - 1);
88    }
89  }
90});
91
92// Zoom
93function ativarZoom() {
94  imagens.forEach((img) => {
95    img.onclick = () => {
96      const overlay = document.createElement('div');
97      overlay.className = 'overlay-zoom';
98      const imgZoom = document.createElement('img');
99      imgZoom.src = img.src;
100      overlay.appendChild(imgZoom);
101      document.body.appendChild(overlay);
102      overlay.onclick = () => overlay.remove();
103    };
104  });
105}
106
107ativarZoom();
108atualizarSlide();