https://www.ypulse.com/wp-content/themes/ypulse/assets/js/spotlight-banner.js

1document.addEventListener("DOMContentLoaded", function () {
2  const slides = document.querySelectorAll(".spotlight-slide");
3  const prev = document.querySelector(".spotlight-nav.prev");
4  const next = document.querySelector(".spotlight-nav.next");
5
6  if (!slides.length) return;
7
8  let index = 0;
9  let isAnimating = false;
10
11  // Setup inicial (todas apiladas y con transición suave)
12  slides.forEach((s, i) => {
13    s.style.opacity = i === 0 ? "1" : "0";
14    s.style.zIndex = i === 0 ? "2" : "1";
15    s.style.transition = "opacity 0.6s ease-in-out";
16    s.style.position = "absolute";
17    s.style.top = "0";
18    s.style.left = "0";
19    s.style.width = "100%";
20    s.style.height = "100%";
21  });
22
23  function showSlide(newIndex) {
24    if (isAnimating || newIndex === index) return;
25    isAnimating = true;
26
27    const current = slides[index];
28    const nextSlide = slides[newIndex];
29
30    nextSlide.style.zIndex = "3";
31    nextSlide.style.opacity = "1";
32    current.style.opacity = "0";
33
34    // después de la transición, reorganizamos z-index
35    setTimeout(() => {
36      current.style.zIndex = "1";
37      nextSlide.style.zIndex = "2";
38      index = newIndex;
39      isAnimating = false;
40    }, 600); // igual al tiempo del transition
41  }
42
43  prev?.addEventListener("click", () => {
44    const newIndex = (index - 1 + slides.length) % slides.length;
45    showSlide(newIndex);
46  });
47
48  next?.addEventListener("click", () => {
49    const newIndex = (index + 1) % slides.length;
50    showSlide(newIndex);
51  });
52});