.mwwm-logo-slider { --visible-logos: 6; --logo-gap: 20px; position: relative; width: 100%; overflow: hidden; background: transparent; cursor: grab; touch-action: pan-y; user-select: none; -webkit-user-select: none; } .mwwm-logo-slider.is-dragging { cursor: grabbing; } .mwwm-logo-track { display: flex; align-items: stretch; gap: var(--logo-gap); will-change: transform; } .mwwm-logo-card { flex: 0 0 calc( (100% - (var(--visible-logos) - 1) * var(--logo-gap)) / var(--visible-logos) ); min-width: 0; overflow: hidden; border-radius: 16px; background: #ffffff; } .mwwm-logo-link, .mwwm-logo-static { display: block; width: 100%; height: 100%; border-radius: inherit; } .mwwm-logo-link { cursor: pointer; text-decoration: none; outline-offset: -3px; } .mwwm-logo-link:focus-visible { outline: 3px solid #9ad800; } .mwwm-logo-slider.is-dragging .mwwm-logo-link { cursor: grabbing; } .mwwm-logo-card img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: contain; border-radius: inherit; filter: grayscale(100%); pointer-events: none; transition: filter 0.35s ease, transform 0.35s ease; } .mwwm-logo-card:hover img, .mwwm-logo-link:focus-visible img { filter: grayscale(0%); transform: scale(1.025); } /* Tablet */ @media (max-width: 1024px) { .mwwm-logo-slider { --visible-logos: 3; --logo-gap: 16px; } } /* Smartphone */ @media (max-width: 767px) { .mwwm-logo-slider { --visible-logos: 2; --logo-gap: 12px; } .mwwm-logo-card { border-radius: 12px; } } /* Reduzierte Bewegung bei entsprechender Geräteeinstellung */ @media (prefers-reduced-motion: reduce) { .mwwm-logo-card img { transition-duration: 0.01ms; } } (function () { const slider = document.getElementById("mwwmLogoSlider"); if (!slider || slider.dataset.initialized === "true") { return; } slider.dataset.initialized = "true"; const track = slider.querySelector(".mwwm-logo-track"); const originalCards = Array.from( track.querySelectorAll(".mwwm-logo-card") ); const originalCount = originalCards.length; const cloneCount = 6; const intervalTime = 2500; const transitionTime = 600; const dragThreshold = 12; let currentIndex = cloneCount; let intervalId = null; let resizeTimer = null; let isDragging = false; let hasPointerCapture = false; let startX = 0; let dragDistance = 0; let startTranslate = 0; let activePointerId = null; let pointerType = "mouse"; let suppressClick = false; /* * Technische Kopien am Anfang. */ const beginningClones = document.createDocumentFragment(); originalCards .slice(-cloneCount) .forEach(function (card) { beginningClones.appendChild(createClone(card)); }); track.insertBefore(beginningClones, track.firstChild); /* * Technische Kopien am Ende. */ originalCards .slice(0, cloneCount) .forEach(function (card) { track.appendChild(createClone(card)); }); function createClone(card) { const clone = card.cloneNode(true); const image = clone.querySelector("img"); const link = clone.querySelector("a"); clone.setAttribute("aria-hidden", "true"); if (image) { image.alt = ""; image.loading = "lazy"; image.draggable = false; } if (link) { link.tabIndex = -1; } return clone; } function getStepWidth() { const card = track.querySelector(".mwwm-logo-card"); if (!card) { return 0; } const styles = window.getComputedStyle(track); const gap = parseFloat(styles.columnGap) || 0; return card.getBoundingClientRect().width + gap; } function getCurrentTranslate() { return -(currentIndex * getStepWidth()); } function setTrackPosition(translate, animate) { track.style.transition = animate ? "transform " + transitionTime + "ms ease-in-out" : "none"; track.style.transform = "translate3d(" + translate + "px, 0, 0)"; } function moveToCurrentIndex(animate) { setTrackPosition( getCurrentTranslate(), animate ); } function normalizePosition() { if (currentIndex >= cloneCount + originalCount) { currentIndex -= originalCount; moveToCurrentIndex(false); } if (currentIndex = dragThreshold) { suppressClick = true; slider.classList.add("is-dragging"); if (!hasPointerCapture) { try { slider.setPointerCapture(event.pointerId); hasPointerCapture = true; } catch (error) { /* Pointer Capture nicht verfügbar. */ } } } setTrackPosition( startTranslate + dragDistance, false ); }); function endDrag(event) { if ( !isDragging || event.pointerId !== activePointerId ) { return; } const stepWidth = getStepWidth(); const absoluteDistance = Math.abs(dragDistance); isDragging = false; slider.classList.remove("is-dragging"); /* * Ab 12 Pixel wird zur nächsten Karte gewechselt. * Bei längeren Bewegungen werden mehrere Logos bewegt. */ if (absoluteDistance >= dragThreshold) { const movedCards = Math.max( 1, Math.round(absoluteDistance / stepWidth) ); if (dragDistance < 0) { currentIndex += movedCards; } else { currentIndex -= movedCards; } } /* * An der neu erreichten Logoposition einrasten. */ moveToCurrentIndex(true); if (hasPointerCapture) { try { slider.releasePointerCapture(activePointerId); } catch (error) { /* Pointer wurde bereits freigegeben. */ } } activePointerId = null; hasPointerCapture = false; /* * Auf Touch-Geräten beginnt die automatische Bewegung * nach 2,5 Sekunden wieder. Am Desktop bleibt der Slider * während des Hover-Zustands pausiert. */ if ( pointerType === "touch" || pointerType === "pen" || !slider.matches(":hover") ) { startSlider(); } /* * Klicksperre nach einer Ziehbewegung wieder aufheben. */ window.setTimeout(function () { suppressClick = false; }, 100); } slider.addEventListener("pointerup", endDrag); slider.addEventListener("pointercancel", endDrag); /* * Nur einen Klick nach einer Ziehbewegung blockieren. * Ein normaler Klick öffnet die verlinkte Website. */ slider.addEventListener( "click", function (event) { if (!suppressClick) { return; } event.preventDefault(); event.stopPropagation(); suppressClick = false; }, true ); slider.addEventListener("mouseenter", function () { if (!isDragging) { stopSlider(); } }); slider.addEventListener("mouseleave", function () { if (!isDragging) { startSlider(); } }); slider.addEventListener("focusin", stopSlider); slider.addEventListener("focusout", function () { if (!slider.matches(":hover")) { startSlider(); } }); slider.addEventListener("dragstart", function (event) { event.preventDefault(); }); window.addEventListener("resize", function () { window.clearTimeout(resizeTimer); resizeTimer = window.setTimeout(function () { moveToCurrentIndex(false); }, 150); }); moveToCurrentIndex(false); startSlider(); })();