JS

document.addEventListener(‘DOMContentLoaded’, () => {

    const prevButton = document.querySelector(‘.prev’);

    const nextButton = document.querySelector(‘.next’);

    const catalog = document.querySelector(‘.catalog’);

    const itemWidth = document.querySelector(‘.catalog-item’).offsetWidth + 20; // Agrega el margen en el cálculo

    const visibleItems = 3;

    let scrollAmount = 0;

    prevButton.addEventListener(‘click’, () => {

        scrollAmount -= itemWidth * visibleItems;

        scrollAmount = Math.max(scrollAmount, 0); // Asegura que no se desplace antes del inicio

        catalog.style.transform = `translateX(-${scrollAmount}px)`;

    });

    nextButton.addEventListener(‘click’, () => {

        const maxScrollAmount = catalog.scrollWidth – catalog.clientWidth;

        scrollAmount += itemWidth * visibleItems;

        scrollAmount = Math.min(scrollAmount, maxScrollAmount); // Asegura que no se desplace después del final

        catalog.style.transform = `translateX(-${scrollAmount}px)`;

    });

});