103 lines
3.6 KiB
JavaScript
103 lines
3.6 KiB
JavaScript
document.addEventListener("DOMContentLoaded", () => {
|
|
|
|
const nextButtons = document.querySelectorAll("button.next");
|
|
const nextProjectButtons = document.querySelectorAll("button.next-project");
|
|
|
|
const projects = document.querySelectorAll(".projects-index .project");
|
|
const firstProject = projects[0];
|
|
const lastProject = projects[projects.length - 1];
|
|
|
|
const firstSlide = (project) =>
|
|
project.querySelector(".project-slideshow > .slide");
|
|
const lastSlide = (project) => {
|
|
const slides = project.querySelectorAll(".project-slideshow > .slide");
|
|
return slides[slides.length - 1];
|
|
};
|
|
|
|
const firstSlideFirstProject = firstSlide(firstProject);
|
|
const firstSlideLastProject = firstSlide(lastProject);
|
|
const lastSlideLastProject = lastSlide(lastProject);
|
|
|
|
function goToNextPicture() {
|
|
const selectedProject = document.querySelector(".project.selected");
|
|
const activeSlide = selectedProject.querySelector(
|
|
".project-slideshow > .slide.active",
|
|
);
|
|
const lastSlideSelected = lastSlide(selectedProject);
|
|
const nextProject = selectedProject.nextElementSibling;
|
|
|
|
activeSlide.classList.remove("active");
|
|
if (activeSlide !== lastSlideSelected) {
|
|
activeSlide.nextElementSibling.classList.add("active");
|
|
} else {
|
|
firstSlide(selectedProject).classList.add("active");
|
|
}
|
|
}
|
|
|
|
function goToPrevPicture() {
|
|
const selectedProject = document.querySelector(".project.selected");
|
|
const activeSlide = selectedProject.querySelector(
|
|
".project-slideshow > .slide.active",
|
|
);
|
|
const firstSlideSelected = firstSlide(selectedProject);
|
|
const prevProject = selectedProject.previousElementSibling;
|
|
|
|
activeSlide.classList.remove("active");
|
|
if (activeSlide !== firstSlideSelected) {
|
|
activeSlide.previousElementSibling.classList.add("active");
|
|
} else {
|
|
lastSlide(selectedProject).classList.add("active");
|
|
}
|
|
}
|
|
|
|
function goToPrevProject() {
|
|
const selectedProject = document.querySelector(".project.selected");
|
|
const activeSlide = selectedProject.querySelector(
|
|
".project-slideshow > .slide.active",
|
|
);
|
|
const prevProject = selectedProject.previousElementSibling;
|
|
|
|
activeSlide.classList.remove("active");
|
|
selectedProject.classList.remove("selected");
|
|
if (selectedProject !== firstProject) {
|
|
prevProject.classList.add("selected");
|
|
firstSlide(prevProject).classList.add("active");
|
|
} else {
|
|
lastProject.classList.add("selected");
|
|
firstSlideLastProject.classList.add("active");
|
|
}
|
|
}
|
|
|
|
function goToNextProject() {
|
|
const selectedProject = document.querySelector(".project.selected");
|
|
const activeSlide = selectedProject.querySelector(
|
|
".project-slideshow > .slide.active",
|
|
);
|
|
const nextProject = selectedProject.nextElementSibling;
|
|
|
|
activeSlide.classList.remove("active");
|
|
selectedProject.classList.remove("selected");
|
|
if (selectedProject !== lastProject) {
|
|
nextProject.classList.add("selected");
|
|
firstSlide(nextProject).classList.add("active");
|
|
} else {
|
|
firstProject.classList.add("selected");
|
|
firstSlideFirstProject.classList.add("active");
|
|
}
|
|
}
|
|
|
|
nextButtons.forEach((nextButton) => {
|
|
nextButton.addEventListener("click", goToNextPicture);
|
|
});
|
|
|
|
nextProjectButtons.forEach((nextProjectButton) => {
|
|
nextProjectButton.addEventListener("click", goToNextProject);
|
|
});
|
|
|
|
document.addEventListener("keyup", (event) => {
|
|
if (event.key === "ArrowRight") goToNextPicture();
|
|
if (event.key === "ArrowLeft") goToPrevPicture();
|
|
if (event.key === "ArrowUp") goToPrevProject();
|
|
if (event.key === "ArrowDown") goToNextProject();
|
|
});
|
|
});
|