How to Make Clickable Image Banner Slider in Elementor

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js"></script>

<script>
  const heroTwoAnimation = () => {
    const galleryContainer = document.querySelector(".hero-two__gallery");
    const headerSection = document.querySelector(".hero-two__content");
    const thumbnails = document.querySelectorAll(".hero-two__gallery > .thumbnail");
    const backgroundImages = document.querySelectorAll(".background-img");
    
    if (!galleryContainer || !thumbnails.length) return;
    
    thumbnails.forEach((thumbnail, index) => {
      thumbnail.setAttribute('data-index', index);
    });
    
    if (window.innerWidth < 1200) {
      const track = document.createElement('div');
      track.className = 'marquee-track';
      
      const originalThumbs = Array.from(thumbnails);
      originalThumbs.forEach(thumb => track.appendChild(thumb));
      
      for (let i = 0; i < 3; i++) {
        originalThumbs.forEach(thumb => {
          const clone = thumb.cloneNode(true);
          clone.setAttribute('data-index', thumb.getAttribute('data-index'));
          track.appendChild(clone);
        });
      }
      
      galleryContainer.appendChild(track);
      
      const allThumbs = track.querySelectorAll('.thumbnail');
      
      let setWidth = 0;
      originalThumbs.forEach(thumb => {
        setWidth += thumb.offsetWidth + 16;
      });
      
      let currentX = 0;
      const speed = 1;
      
      const animate = () => {
        currentX -= speed;
        if (Math.abs(currentX) >= setWidth) {
          currentX = 0;
        }
        gsap.set(track, { x: currentX });
        requestAnimationFrame(animate);
      };
      
      animate();
      
      let isPaused = false;
      
      allThumbs.forEach((thumbnail) => {
        thumbnail.addEventListener("click", (e) => {
          const clickedIndex = parseInt(e.currentTarget.getAttribute('data-index'), 10);
          if (isNaN(clickedIndex)) return;
          
          isPaused = true;
          
          if (headerSection) {
            gsap.to(headerSection, { 
              opacity: 0, 
              duration: 0.4,
              ease: "power1.inOut"
            });
          }
          
          if (backgroundImages.length) {
            backgroundImages.forEach((bg, index) => {
              gsap.to(bg, {
                opacity: index === clickedIndex ? 1 : 0,
                duration: 0.4,
                ease: "power1.inOut"
              });
            });
          }
          
          allThumbs.forEach((thumb) => thumb.classList.remove("active"));
          e.currentTarget.classList.add("active");
        });
      });
      
      document.addEventListener("click", (e) => {
        if (!e.target.closest(".hero-two__gallery") && !e.target.closest(".background-img")) {
          isPaused = false;
          
          if (headerSection) {
            gsap.to(headerSection, { 
              opacity: 1, 
              duration: 0.4,
              ease: "power1.inOut"
            });
          }
          
          if (backgroundImages.length) {
            gsap.to(backgroundImages, { 
              opacity: 0, 
              duration: 0.4,
              ease: "power1.inOut"
            });
          }
          
          allThumbs.forEach((thumb) => thumb.classList.remove("active"));
        }
      });
      
      const animateWithPause = () => {
        if (!isPaused) {
          currentX -= speed;
          if (Math.abs(currentX) >= setWidth) {
            currentX = 0;
          }
        }
        gsap.set(track, { x: currentX });
        requestAnimationFrame(animateWithPause);
      };
      
      requestAnimationFrame(animateWithPause);
    }
    
    if (window.innerWidth >= 1200) {
      let initialSize;
      let currentSizeMap = [];
      
      if (headerSection && backgroundImages.length) {
        const baseSizeMap = [
          [220, 200, 180, 160, 140, 120, 100, 90, 80, 75],
          [180, 220, 180, 160, 140, 120, 110, 100, 90, 80],
          [160, 180, 220, 180, 160, 140, 120, 110, 100, 80],
          [140, 160, 180, 220, 180, 160, 140, 120, 100, 100],
          [120, 140, 160, 180, 220, 180, 160, 140, 120, 100],
          [100, 120, 140, 160, 180, 220, 180, 160, 140, 120],
          [100, 100, 110, 120, 140, 180, 220, 180, 160, 140],
          [80, 90, 100, 120, 140, 160, 180, 220, 180, 160],
          [60, 70, 80, 100, 120, 140, 160, 180, 220, 180],
          [75, 80, 90, 100, 110, 120, 140, 160, 180, 220],
        ];

        const setupSizes = () => {
          const screenWidth = window.innerWidth;
          if (screenWidth >= 1800) {
            const galleryContainerWidth = galleryContainer.offsetWidth;
            initialSize = galleryContainerWidth / thumbnails.length;
          } else if (screenWidth >= 1200) {
            initialSize = 110;
          }
          
          const scale = initialSize / 140;
          currentSizeMap = baseSizeMap.map((row) =>
            row.map((size) => size * scale)
          );
          
          gsap.set(thumbnails, { width: initialSize, height: initialSize });
        };
        
        setupSizes();
        window.addEventListener("resize", setupSizes);

        const handleMouseOver = (e) => {
          const hoveredIndex = parseInt(e.currentTarget.dataset.index, 10);
          
          gsap.to(headerSection, { 
            opacity: 0, 
            duration: 0.4,
            ease: "power1.inOut"
          });
          
          backgroundImages.forEach((bg, index) => {
            gsap.to(bg, {
              opacity: index === hoveredIndex ? 1 : 0,
              duration: 0.4,
              ease: "power1.inOut"
            });
          });
          
          thumbnails.forEach((thumb) => thumb.classList.remove("hovered"));
          e.currentTarget.classList.add("hovered");
          
          const currentHoverMap = currentSizeMap[hoveredIndex];
          if (!currentHoverMap) return;
          
          thumbnails.forEach((thumb, index) => {
            const size = currentHoverMap[index] || initialSize;
            gsap.to(thumb, { 
              width: size, 
              height: size, 
              duration: 0.3,
              ease: "power2.out"
            });
          });
        };

        const handleMouseLeave = () => {
          gsap.to(headerSection, { 
            opacity: 1, 
            duration: 0.4,
            ease: "power1.inOut"
          });
          
          gsap.to(backgroundImages, { 
            opacity: 0, 
            duration: 0.4,
            ease: "power1.inOut"
          });
          
          gsap.to(thumbnails, {
            width: initialSize,
            height: initialSize,
            duration: 0.3,
            ease: "power2.out"
          });
          
          thumbnails.forEach((thumb) => thumb.classList.remove("hovered"));
        };

        thumbnails.forEach((thumbnail) => {
          thumbnail.addEventListener("mouseover", handleMouseOver);
        });
        
        galleryContainer.addEventListener("mouseleave", handleMouseLeave);
      }
    }
  };
  
  if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', heroTwoAnimation);
  } else {
    heroTwoAnimation();
  }
</script>