document.addEventListener('DOMContentLoaded', () => {
    const productContainer3 = document.querySelector('#list');
    const nxtBtn3 = document.getElementById('next');
    const preBtn3 = document.getElementById('prev');

    const atualizarDimensoesContainer = () => {
        const dimensoesContainer3 = productContainer3.getBoundingClientRect();
        return dimensoesContainer3.width;
    };

    let larguraContainer3 = atualizarDimensoesContainer();

    nxtBtn3.addEventListener('click', () => {
        productContainer3.scrollLeft += larguraContainer3;
        // Verificação de limite
        if (productContainer3.scrollLeft + larguraContainer3 >= productContainer3.scrollWidth) {
            productContainer3.scrollLeft = productContainer3.scrollWidth; // Para no final
        }
    });

    preBtn3.addEventListener('click', () => {
        productContainer3.scrollLeft -= larguraContainer3;
        // Verificação de limite
        if (productContainer3.scrollLeft < 0) {
            productContainer3.scrollLeft = 0; // Para no início
        }
    });

    // Recalcula a largura do container se necessário (por exemplo, ao redimensionar a janela)
    window.addEventListener('resize', () => {
        larguraContainer3 = atualizarDimensoesContainer();
    });
});