https://revolverwarholgallery.com/wp-content/themes/rev24/hero-slider.js?ver=1748888575

1document.addEventListener("DOMContentLoaded", function() {
2    const sliderContainer = document.querySelector(".elementor-element-f262023");
3
4	if (sliderContainer) {
5		const allSlides = document.querySelectorAll(".slide-container");
6		const firstLazySlide = allSlides[0];
7		
8		if (firstLazySlide) {
9			firstLazySlide.classList.remove("lazy-slide");
10		}
11
12        let slides = document.querySelectorAll(".slide-container:not(.lazy-slide)");
13        let currentSlideIndex = 0;
14        let circleAnimation;
15			
16        gsap.set(slides, {x: "100%", autoAlpha: 0});
17        gsap.set(slides[0], {x: "0%", autoAlpha: 1, zIndex: 2});
18		gsap.to(slides[0], {autoAlpha: 1, duration: 2, delay: 2, ease: "power2.out"});
19		
20		setTimeout(() => {
21		  const wrapper = document.querySelector(".slider-wrapper");
22		  if (wrapper) {
23			wrapper.classList.add("slider-visible");
24		  }
25		}, 2000);
26
27        function startCircleAnimation() {
28            if (circleAnimation) {
29                circleAnimation.restart();
30            } else {
31                circleAnimation = gsap.fromTo(document.querySelector(".progressCircle circle"), {strokeDashoffset: 283}, {
32                    strokeDashoffset: 0,
33                    duration: 10,
34                    ease: "linear",
35                    onComplete: advanceSlide,
36                });
37            }
38        }
39
40        function advanceSlide() {
41            let nextSlideIndex = (currentSlideIndex + 1) % slides.length;
42
43            gsap.to(slides[currentSlideIndex], {
44                autoAlpha: 0,
45                duration: 0.75,
46                ease: "linear",
47            });
48
49            gsap.set(slides[nextSlideIndex], {x: "100%", autoAlpha: 1, zIndex: 3});
50
51            gsap.to(slides[nextSlideIndex], {
52                duration: 0.75,
53                x: "0%",
54                ease: "linear",
55                onComplete: () => {
56                    currentSlideIndex = nextSlideIndex;
57                    gsap.set(slides, {x: "100%", autoAlpha: 0, zIndex: 1});
58                    gsap.set(slides[currentSlideIndex], {x: "0%", autoAlpha: 1, zIndex: 2});
59                    startCircleAnimation();
60                }
61            });
62        }
63		
64        function lazyLoadSlides() {
65            document.querySelectorAll(".lazy-slide").forEach((el) => {
66                el.classList.remove("lazy-slide");
67            });
68            slides = document.querySelectorAll(".slide-container");
69			
70			gsap.set(slides, { x: "100%", autoAlpha: 0, zIndex: 1 });
71			gsap.set(slides[currentSlideIndex], { x: "0%", autoAlpha: 1, zIndex: 2 });
72        }
73
74        setTimeout(() => {
75            const progressCircle = document.createElement('div');
76            progressCircle.className = 'progressCircle';
77            progressCircle.innerHTML = `
78                <svg viewBox="0 0 100 100">
79                    <circle cx="50" cy="50" r="45" stroke="white" stroke-width="4" fill="none" stroke-dasharray="283" stroke-dashoffset="283" />
80                </svg>
81                <div class="nextSlide" role="button"><i class="fa fa-chevron-right"></i></div>
82            `;
83            sliderContainer.appendChild(progressCircle);
84
85            document.querySelector(".progressCircle .nextSlide").addEventListener("click", advanceSlide);
86            startCircleAnimation();
87			setTimeout(() => {
88                lazyLoadSlides();	
89            }, 2000); 
90        }, 2000);
91    }
92});