22-07-2025 (3)

<script>
const initInfiniteScroll = () => {
  const carousel = document.querySelector('section[data-section-id="68694ca909d67902087bb006"]');
  if (!carousel) return;

  const originalWrapper = carousel.querySelector('.user-items-list-carousel__slides');
  if (!originalWrapper || originalWrapper.dataset.cloned) return;

  // Disable Squarespace carousel controller
  const controller = carousel.querySelector('[data-controller="UserItemsListCarousel"]');
  if (controller) {
    controller.removeAttribute('data-controller');
    controller.removeAttribute('data-controllers-bound');
  }

  // Get all original slides
  const slides = Array.from(originalWrapper.querySelectorAll('.user-items-list-carousel__slide'));
  if (slides.length === 0) return;

  // Create new wrapper for infinite scroll
  const scrollWrapper = document.createElement('div');
  scrollWrapper.className = 'infinite-scroll-wrapper';
  
  const scrollContent = document.createElement('div');
  scrollContent.className = 'infinite-scroll-content';
  
  // Function to properly load images
  const loadImage = (img) => {
    if (img.dataset.src && !img.src) {
      // Get the appropriate resolution
      const resolution = img.dataset.imageResolution || '750w';
      const src = img.dataset.src + '?format=' + resolution;
      img.src = src;
      img.setAttribute('data-loaded', 'true');
      
      // Add necessary styles
      img.style.width = '100%';
      img.style.height = '100%';
      img.style.objectFit = 'cover';
    }
  };

  // Clone slides - we need at least 2 full sets for seamless loop
  const totalSets = 3; // 3 sets total
  for (let i = 0; i < totalSets; i++) {
    slides.forEach(slide => {
      const clone = slide.cloneNode(true);
      // Remove all inline styles
      clone.removeAttribute('style');
      clone.removeAttribute('aria-hidden');
      
      // Remove animation classes
      clone.querySelectorAll('.preFade, .fadeIn').forEach(el => {
        el.classList.remove('preFade', 'fadeIn');
        el.removeAttribute('style');
      });
      
      // Load images in cloned slides
      const img = clone.querySelector('.user-items-list-carousel__media');
      if (img) {
        loadImage(img);
      }
      
      scrollContent.appendChild(clone);
    });
  }

  // Replace original wrapper
  const revealer = originalWrapper.closest('.user-items-list-carousel__slides-revealer');
  revealer.innerHTML = '';
  scrollWrapper.appendChild(scrollContent);
  revealer.appendChild(scrollWrapper);
  
  // Hide navigation arrows
  const arrows = carousel.querySelectorAll('.user-items-list-carousel__arrow-wrapper, .mobile-arrows');
  arrows.forEach(arrow => arrow.style.display = 'none');
  
  // Calculate animation distance based on number of original slides
  const slideCount = slides.length;
  scrollContent.style.setProperty('--slide-count', slideCount);
  
  // Mark as initialized
  originalWrapper.dataset.cloned = 'true';
};

// Pause animation when tab is not visible
document.addEventListener('visibilitychange', () => {
  const scrollContent = document.querySelector('.infinite-scroll-content');
  if (scrollContent) {
    scrollContent.style.animationPlayState = document.hidden ? 'paused' : 'running';
  }
});

// Initialize with delay
if (document.readyState === 'loading') {
  document.addEventListener('DOMContentLoaded', () => {
    setTimeout(initInfiniteScroll, 2000);
  });
} else {
  setTimeout(initInfiniteScroll, 2000);
}
</script>

<style>
.infinite-scroll-wrapper {
  overflow: hidden;
  width: 100%;
  position: relative;
}

.infinite-scroll-content {
  display: flex;
  gap: 20px;
  animation: infiniteScroll 30s linear infinite;
  will-change: transform;
  --slide-width: 470px;
  --slide-gap: 20px;
}

.infinite-scroll-content .user-items-list-carousel__slide {
  flex: 0 0 var(--slide-width);
  width: var(--slide-width);
  position: relative !important;
  transform: none !important;
}

.infinite-scroll-content .user-items-list-carousel__media-container {
  width: 100% !important;
  margin-bottom: 10px !important;
}

.infinite-scroll-content .user-items-list-carousel__media-inner {
  position: relative;
  padding-bottom: 66.67%; /* 3:2 aspect ratio */
  overflow: hidden;
}

.infinite-scroll-content .user-items-list-carousel__media {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.infinite-scroll-content .list-item-content__text-wrapper {
  text-align: center;
}

/* Animation moves exactly one set of slides */
@keyframes infiniteScroll {
  0% {
    transform: translateX(0);
  }
  100% {
    /* Move exactly the width of one complete set of slides */
    transform: translateX(calc((var(--slide-width) + var(--slide-gap)) * var(--slide-count) * -1));
  }
}

/* Hide arrows */
.user-items-list-carousel__arrow-wrapper,
.mobile-arrows {
  display: none !important;
}

/* Mobile responsive */
@media (max-width: 768px) {
  .infinite-scroll-content {
    --slide-width: 280px;
    animation-duration: 20s;
  }
}

/* Tablet responsive */
@media (min-width: 769px) and (max-width: 1024px) {
  .infinite-scroll-content {
    --slide-width: 350px;
    animation-duration: 25s;
  }
}

/* Wider screens */
@media (min-width: 1400px) {
  .infinite-scroll-content {
    --slide-width: 470px;
    animation-duration: 35s;
  }
}
</style>