document.addEventListener('DOMContentLoaded', () => {
    const productContainer = document.querySelector('#list');
    const nxtBtn = document.getElementById('next');
    const preBtn = document.getElementById('prev');

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

    let larguraContainer3 = atualizarDimensoesContainer();

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

    preBtn.addEventListener('click', () => {
        productContainer.scrollLeft -= larguraContainer3;
        // Verificação de limite
        if (productContainer.scrollLeft < 0) {
            productContainer.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();
    });
});



document.addEventListener('DOMContentLoaded', () => {
    const productContainer1 = document.querySelector('#list_1');
    const nxtBtn1 = document.getElementById('next_1');
    const preBtn1 = document.getElementById('prev_1');

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

    let larguraContainer3 = atualizarDimensoesContainer();

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

    preBtn1.addEventListener('click', () => {
        productContainer1.scrollLeft -= larguraContainer3;
        // Verificação de limite
        if (productContainer1.scrollLeft < 0) {
            productContainer1.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();
    });
});