personal-website/script.js at main · mako3577/personal-website · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
const projectImgs = document.querySelectorAll(".project-img");
const rightBtn = document.querySelector(".gallery-button-right");
const leftBtn = document.querySelector(".gallery-button-left");
const galleryIntervals = [];
let currZIndex = 1;

const rightBtnFunct = function () {
  currZIndex++;
  let currentImg = document.querySelector(".project-img.active");
  let nextImg;
  if (currentImg.nextElementSibling) {
    nextImg = currentImg.nextElementSibling;
  } else {
    nextImg = projectImgs[0];
  }

  currentImg.classList.remove("active");
  currentImg.style.animation = "imgAnimationRightOld 1s";

  nextImg.classList.add("active");
  nextImg.style.animation = "imgAnimationRight 1s";
  nextImg.style.zIndex = `${currZIndex}`;

  // stop interval to avoid changing gallery photo
  // just after clicking button manually
  for (interval of galleryIntervals) {
    clearInterval(interval);
  }
  // create one new interval
  galleryIntervals.push(setInterval(rightBtnFunct, 3500));
};

const leftBtnFunct = function () {
  currZIndex++;
  let currentImg = document.querySelector(".project-img.active");
  let nextImg;
  if (currentImg.previousElementSibling) {
    nextImg = currentImg.previousElementSibling;
  } else {
    nextImg = projectImgs[projectImgs.length - 1];
  }

  currentImg.classList.remove("active");
  currentImg.style.animation = "imgAnimationLeftOld 1s";

  nextImg.classList.add("active");
  nextImg.style.animation = "imgAnimationLeft 1s";
  nextImg.style.zIndex = `${currZIndex}`;

  // stop interval to avoid changing gallery photo
  // just after clicking button manually
  for (interval of galleryIntervals) {
    clearInterval(interval);
  }
  // create one new interval
  galleryIntervals.push(setInterval(rightBtnFunct, 3500));
};

// listeners
rightBtn.addEventListener("click", rightBtnFunct);
leftBtn.addEventListener("click", leftBtnFunct);

// Set interval to make gallery alive
// hold intervals in array to make it eeasy
// to make clearing them easy
galleryIntervals.push(setInterval(rightBtnFunct, 3500));