Catálogo de Serviços

Serviço 1

Descrição do Serviço 1. Detalhe suas características e benefícios.

R$ 150,00

Serviço 2

Descrição do Serviço 2. Detalhe suas características e benefícios.

R$ 200,00

Serviço 3

Descrição do Serviço 3. Detalhe suas características e benefícios.

R$ 250,00

// Define a variável que guarda o número de serviços por página const servicesPerPage = 3; // Define a função que exibe apenas os serviços da página atual function displayServices(pageNumber, services) { const startIndex = (pageNumber - 1) * servicesPerPage; const endIndex = startIndex + servicesPerPage; const servicesToDisplay = services.slice(startIndex, endIndex); // Esconde todos os serviços const allServices = document.querySelectorAll('.card'); allServices.forEach((service) => { service.style.display = 'none'; }); // Exibe apenas os serviços da página atual servicesToDisplay.forEach((service) => { service.style.display = 'flex'; }); } // Chama a função para exibir os serviços da primeira página displayServices(1, services); // Define a função que atualiza a página atual e exibe os serviços correspondentes function updateCurrentPage() { const activeLink = document.querySelector('.pagination a.active'); const newActiveLink = activeLink.nextElementSibling || activeLink.previousElementSibling; // Verifica se não há mais links para avançar ou voltar if (!newActiveLink || newActiveLink === activeLink) { return; } // Atualiza a página atual e exibe os serviços correspondentes const newPageNumber = parseInt(newActiveLink.textContent); activeLink.classList.remove('active'); newActiveLink.classList.add('active'); displayServices(newPageNumber, services); } // Define as funções de clique nos links de página const pageLinks = document.querySelectorAll('.pagination a'); pageLinks.forEach((link) => { link.addEventListener('click', (event) => { event.preventDefault(); link.classList.add('active'); updateCurrentPage(); }); }); // Remove o link da página atual para evitar que seja clicado novamente const activeLink = document.querySelector('.pagination a.active'); activeLink.classList.remove('active'); // Adiciona os novos links para as páginas adicionais const numberOfPages = Math.ceil(services.length / servicesPerPage); for (let i = 2; i <= numberOfPages; i++) { const newLink = document.createElement('a'); newLink.href = `index${i}.html`; newLink.textContent = i; newLink.addEventListener('click', (event) => { event.preventDefault(); newLink.classList.add('active'); updateCurrentPage(); }); const separator = document.createElement('span'); separator.textContent = ' | '; const lastLink = document.querySelector('.pagination a:last-of-type'); lastLink.insertAdjacentElement('afterend', separator); separator.insertAdjacentElement('afterend', newLink); } // Atualiza a página atual e exibe os serviços correspondentes const currentLink = document.querySelector('.pagination a[href="' + window.location.href + '"]'); currentLink.classList.add('active'); const currentPageNumber = parseInt(currentLink.textContent); displayServices(currentPageNumber, services);