#if($images)
<div class="env-m-bottom--xxx-large" style="text-align:center;"><h2 class="env-text-heading-02">$translateMap.headline</h2></div>
	<div class="customer-images-holder">
  <div class="customer-images js-infinite-logos">
    #foreach($image in $images)
      <div class="customer-image #if($image.link !="") clickable-div linked #end">
        <figure>
          #if($image.link !="")
            <a href="$image.link" title="$translateMap.readmore ">
          #end
          <img loading="lazy" src="$image.uri" alt="$image.alt">
          #if($image.link !="")
            </a>
          #end
        </figure>
      </div>
    #end
     </div>
   </div>
#end


<script>
svDocReady(function() {
  const scroller = document.querySelector('.js-infinite-logos');
  if (!scroller) return;

  // Duplicera logotyper för loop
  scroller.innerHTML += scroller.innerHTML;

  function ensureEnoughWidth() {
    let minWidth = scroller.clientWidth * 2; // minst dubbla bredden av synlig yta
    while (scroller.scrollWidth < minWidth) {
      scroller.innerHTML += scroller.innerHTML;
    }
  }
  ensureEnoughWidth();

  let scrollSpeed = 0.5; // px per frame
  let position = 0;
  let resetPoint = 0;
  let paused = false;

  function updateResetPoint() {
    resetPoint = scroller.scrollWidth / 2;
    if (position >= resetPoint) {
      position = 0;
      scroller.scrollLeft = 0;
    }
  }

  scroller.addEventListener('mouseenter', () => paused = true);
  scroller.addEventListener('mouseleave', () => paused = false);
  scroller.addEventListener('touchstart', () => paused = true);
  scroller.addEventListener('touchend', () => paused = false);

  window.addEventListener('resize', () => {
    ensureEnoughWidth();
    updateResetPoint();
  });

  function animateLogos() {
    if (!paused) {
      position += scrollSpeed;
      if (position >= resetPoint) {
        position = 0;
      }
      scroller.scrollLeft = position;
    }
    requestAnimationFrame(animateLogos);
  }

  updateResetPoint();
  animateLogos();
});

</script>