100-project-100-days-website/100_projects/91-rotating-image-gallery/index.js
2023-05-23 17:16:51 +03:00
Ask

27 lines
593 B
JavaScript

{fa1fde453c642692d9fe26aefcb098962311bdd8 true 593 index.js 0xc001dea1c0}

const imageContainerEl = document.querySelector(".image-container");
const prevEl = document.getElementById("prev");
const nextEl = document.getElementById("next");
let x = 0;
let timer;
prevEl.addEventListener("click", () => {
x = x + 45;
clearTimeout(timer);
updateGallery();
});
nextEl.addEventListener("click", () => {
x = x - 45;
clearTimeout(timer);
updateGallery();
});
function updateGallery() {
imageContainerEl.style.transform = `perspective(1000px) rotateY(${x}deg)`;
timer = setTimeout(() => {
x = x - 45;
updateGallery();
}, 3000);
}
updateGallery();