(Squarespace) How to make Banner Slideshow autoscroll with Fade effect

Pro Tips Other Tips
1

We can use this code to Code Injection > Footer. This code will work with List Section Banner Slideshow Only.

<script>
(function() {
  let playInBackend = true,
      timing = 3,
      section = '',
      direction = 1;
  
  function FadeSlideshow(sectionSelector) {
    const section = sectionSelector === '' 
      ? document.querySelector('.user-items-list-section') 
      : document.querySelector(sectionSelector);
    
    if (!section) return;
    
    const slides = section.querySelectorAll('.slide');
    const arrowButtons = section.querySelectorAll('button[class*="__arrow-button"]');
    
    let timer;
    let interval = timing * 1000;
    let isPaused = false;
    let isVisible = true;
    let isEditMode = false;
    let isModalOpen = false;
    
    setupFadeEffect();
    initEventListeners();
    startTimer();
    setupIntersectionObserver();
    
    function setupFadeEffect() {
      const style = document.createElement('style');
      style.textContent = `
        .fade-slide {
          opacity: 0;
          transition: opacity 0.8s ease-in-out !important;
          transform: none !important;
        }
        
        .fade-slide.active {
          opacity: 1;
          z-index: 1;
        }
        
        .slides {
          position: relative;
        }
        
        .slide {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
        }
        
        .slide:first-child {
          position: relative;
        }
      `;
      document.head.appendChild(style);
      
      slides.forEach((slide, index) => {
        slide.classList.add('fade-slide');
        if (index === 0) {
          slide.classList.add('active');
        }
        
        if (slide.style.transform) {
          slide.style.transform = 'none';
        }
      });
    }
    
    function initEventListeners() {
      document.addEventListener('visibilitychange', function() {
        isPaused = document.hidden;
      });
      
      ['mousedown', 'touchstart'].forEach(event => {
        section.addEventListener(event, function() {
          isPaused = true;
        });
      });
      
      ['mouseup', 'touchend'].forEach(event => {
        section.addEventListener(event, function() {
          isPaused = false;
          clearInterval(timer);
          startTimer();
        });
      });
      
      if (arrowButtons.length >= 2) {
        arrowButtons[0].addEventListener('click', function(e) {
          e.preventDefault();
          e.stopPropagation();
          goToSlide(getCurrentSlideIndex() - 1);
        });
        
        arrowButtons[1].addEventListener('click', function(e) {
          e.preventDefault();
          e.stopPropagation();
          goToSlide(getCurrentSlideIndex() + 1);
        });
      }
    }
    
    function startTimer() {
      timer = setInterval(autoAdvance, interval);
    }
    
    function autoAdvance() {
      isEditMode = document.querySelector('body.sqs-edit-mode-active');
      isModalOpen = document.querySelector('.sqs-modal-lightbox-open, .wm-mega-menu--open');
      
      if (!isPaused && !isEditMode && !isModalOpen && isVisible) {
        const nextIndex = direction === 1 
          ? (getCurrentSlideIndex() + 1) % slides.length 
          : (getCurrentSlideIndex() - 1 + slides.length) % slides.length;
        
        goToSlide(nextIndex);
      }
    }
    
    function getCurrentSlideIndex() {
      let currentIndex = 0;
      slides.forEach((slide, index) => {
        if (slide.classList.contains('active')) {
          currentIndex = index;
        }
      });
      return currentIndex;
    }
    
    function goToSlide(index) {
      const normalizedIndex = (index + slides.length) % slides.length;
      
      slides.forEach(slide => {
        slide.classList.remove('active');
      });
      
      slides[normalizedIndex].classList.add('active');
      
      const liveRegion = section.querySelector('[aria-live="polite"]');
      if (liveRegion) {
        liveRegion.textContent = `Item ${normalizedIndex + 1} of ${slides.length}`;
      }
    }
    
    function setupIntersectionObserver() {
      if (window.IntersectionObserver) {
        const observer = new IntersectionObserver((entries, observer) => {
          entries.forEach(entry => {
            isVisible = !!entry.isIntersecting;
          });
        }, {
          rootMargin: '-75px 0px -75px 0px'
        });
        
        observer.observe(section);
      }
    }
  }
  
  window.addEventListener('load', function() {
    let sections = new Array();
    sections.push(section);
    
    if (section.includes(',')) {
      sections = section.split(',');
    }
    
    sections.forEach(sectionSelector => {
      if (window.top == window.self || (window.top !== window.self && playInBackend)) {
        new FadeSlideshow(sectionSelector);
      }
    });
  });
})();
</script>
1 Like