34 lines
1.3 KiB
JavaScript
34 lines
1.3 KiB
JavaScript
|
|
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();
|
|
});
|
|
}); |