Image-Slider/script.js at main · Vyom1912/Image-Slider · 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
let scrollContainer = document.querySelector(".gallery");
let backBtn = document.getElementById("backBtn");
let nextBtn = document.getElementById("nextBtn");

const scrollAmount = scrollContainer.clientWidth;

scrollContainer.addEventListener("wheel", (evt) => {
  evt.preventDefault();
  scrollContainer.style.scrollBehavior = "auto";

  scrollContainer.scrollLeft += evt.deltaY;
});
nextBtn.addEventListener("click", () => {
  scrollContainer.style.scrollBehavior = "smooth";

  if (
    Math.ceil(scrollContainer.scrollLeft + scrollContainer.clientWidth) >=
    scrollContainer.scrollWidth
  ) {
    scrollContainer.scrollLeft = 0;
  } else {
    scrollContainer.scrollLeft += scrollContainer.clientWidth;
  }
});

backBtn.addEventListener("click", () => {
  scrollContainer.style.scrollBehavior = "smooth";

  // If reached the start, go to end
  if (scrollContainer.scrollLeft === 0) {
    scrollContainer.scrollLeft = scrollContainer.scrollWidth;
  } else {
    scrollContainer.scrollLeft -= 900;
  }
});