70 lines
2.5 KiB
JavaScript
70 lines
2.5 KiB
JavaScript
|
|
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();
|
|
});
|
|
}); |