https://www.bik.pl/js/vertical-slider.js

1const stickyWrapper = document.querySelector(".custom-sticky-wrapper");
2const sticky = document.querySelector(".custom-sticky");
3const slides = Array.from(document.querySelectorAll(".custom-slide"));
4const navDots = document.querySelector(".custom-nav-dots");
5
6
7// Funkcja obliczająca całkowitą wysokość zawartości slajdów
8const calculateStickyWrapperHeight = () => {
9  const totalHeight = slides.reduce((sum, slide) => {
10    const slideItems = slide.querySelectorAll(".slider-item");
11    const slideHeight = Array.from(slideItems).reduce(
12      (itemSum, item) => itemSum + item.offsetHeight,
13      0
14    );
15    return sum + slideHeight;
16  }, 0);
17  stickyWrapper.style.minHeight = `${totalHeight}px`;
18};
19
20
21
22// Dynamiczne tworzenie kropek nawigacyjnych
23slides.forEach((_, index) => {
24  const dot = document.createElement("div");
25  dot.classList.add("custom-dot");
26  dot.dataset.index = index;
27  if (index === 0) dot.classList.add("active"); // Pierwsza kropka aktywna na start
28  navDots.appendChild(dot);
29});
30
31// Zbierz kropeczki po ich utworzeniu
32const dots = Array.from(document.querySelectorAll(".custom-dot"));
33
34calculateStickyWrapperHeight();
35
36document.addEventListener("scroll", () => {
37  const rect = stickyWrapper.getBoundingClientRect();
38  const totalScroll = stickyWrapper.offsetHeight - window.innerHeight;
39
40  // Sprawdź, czy użytkownik przewija sticky-wrapper
41  const inStickyWrapper = rect.top <= 0 && rect.bottom >= window.innerHeight;
42
43  // Pokaż/ukryj nawigację kropek
44  navDots.classList.toggle("visible", inStickyWrapper);
45
46  if (!inStickyWrapper) return;
47
48  // Oblicz procent przewinięcia w sticky-wrapper
49  const scrollPercentage = Math.min(
50    Math.max(0, rect.top * -1),
51    totalScroll
52  ) / totalScroll;
53
54  // Wyświetl odpowiednie slajdy w zależności od przewijania
55  slides.forEach((slide, index) => {
56    const triggerPoint = index / slides.length;
57    const isActive =
58          scrollPercentage >= triggerPoint &&
59          scrollPercentage < triggerPoint + 1 / slides.length;
60    slide.classList.toggle("active", isActive);
61
62    // Aktywuj odpowiednie kółeczko
63    dots[index].classList.toggle("active", isActive);
64  });
65});
66
67// Kliknięcie w kółeczko przenosi do odpowiedniego slajdu
68dots.forEach((dot, index) => {
69  dot.addEventListener("click", () => {
70    const offset = stickyWrapper.offsetTop + index * (stickyWrapper.offsetHeight / slides.length);
71    window.scrollTo({ top: offset, behavior: "smooth" });
72  });
73});
74
75window.addEventListener("resize", calculateStickyWrapperHeight);
76window.addEventListener("load", calculateStickyWrapperHeight);