Dinape Academy: weil sich Payments nicht von selbst erklären.

document.addEventListener('DOMContentLoaded', function () { const sliders = Array.from(document.querySelectorAll('.impact-slider')); const navs = Array.from(document.querySelectorAll('.impact-slider-nav')); sliders.forEach(function (slider, sliderIndex) { const wrapper = slider.closest('.impact-slider-wrap'); /* * Preferred: nav inside the same .impact-slider-wrap * Fallback: nav by same page order */ const nav = wrapper ? wrapper.querySelector('.impact-slider-nav') : navs[sliderIndex]; if (!nav) { return; } const cards = Array.from(slider.children); if (!cards.length) { nav.style.display = 'none'; return; } /* * Slider base behavior */ slider.style.overflowX = 'auto'; slider.style.overflowY = 'hidden'; slider.style.scrollbarWidth = 'none'; slider.style.msOverflowStyle = 'none'; /* * Desktop mouse dragging */ let isDragging = false; let startX = 0; let startScrollLeft = 0; let hasDragged = false; slider.addEventListener('mousedown', function (event) { if (event.button !== 0) { return; } isDragging = true; hasDragged = false; startX = event.pageX; startScrollLeft = slider.scrollLeft; slider.classList.add('is-dragging'); }); window.addEventListener('mousemove', function (event) { if (!isDragging) { return; } const distance = event.pageX - startX; if (Math.abs(distance) > 3) { hasDragged = true; } slider.scrollLeft = startScrollLeft - distance; }); window.addEventListener('mouseup', function () { if (!isDragging) { return; } isDragging = false; setTimeout(function () { hasDragged = false; }, 0); slider.classList.remove('is-dragging'); }); slider.addEventListener( 'click', function (event) { if (hasDragged) { event.preventDefault(); event.stopPropagation(); } }, true ); /* * Build nav dots as regular divs */ nav.innerHTML = ''; cards.forEach(function (_, index) { const dot = document.createElement('div'); dot.className = 'impact-slider-nav-dot'; dot.setAttribute('role', 'button'); dot.setAttribute('tabindex', '0'); dot.setAttribute('aria-label', 'Go to card ' + (index + 1)); dot.setAttribute('data-state', 'hidden'); function scrollToCard() { const styles = window.getComputedStyle(slider); const paddingLeft = parseFloat(styles.paddingLeft) || 0; const targetCard = cards[index]; slider.scrollTo({ left: targetCard.offsetLeft - paddingLeft, behavior: 'smooth' }); } dot.addEventListener('click', scrollToCard); dot.addEventListener('keydown', function (event) { if (event.key === 'Enter' || event.key === ' ') { event.preventDefault(); scrollToCard(); } }); nav.appendChild(dot); }); const dots = Array.from(nav.querySelectorAll('.impact-slider-nav-dot')); /* * Helpers */ function sliderIsOverflowing() { return slider.scrollWidth > slider.clientWidth + 1; } function getVisibleBounds() { const sliderRect = slider.getBoundingClientRect(); return { left: sliderRect.left, right: sliderRect.left + slider.clientWidth }; } /* * Update nav state: * full = card fully visible * partial = card partially visible * hidden = card not visible */ function updateNav() { if (!sliderIsOverflowing()) { nav.style.display = 'none'; return; } nav.style.display = 'flex'; const bounds = getVisibleBounds(); const tolerance = 3; cards.forEach(function (card, index) { const cardRect = card.getBoundingClientRect(); const dot = dots[index]; if (!dot) { return; } const fullyVisible = cardRect.left >= bounds.left - tolerance && cardRect.right bounds.left + tolerance && cardRect.left < bounds.right - tolerance; if (fullyVisible) { dot.setAttribute('data-state', 'full'); } else if (partiallyVisible) { dot.setAttribute('data-state', 'partial'); } else { dot.setAttribute('data-state', 'hidden'); } }); } /* * Efficient scroll updates */ let ticking = false; slider.addEventListener('scroll', function () { if (!ticking) { window.requestAnimationFrame(function () { updateNav(); ticking = false; }); ticking = true; } }); window.addEventListener('resize', updateNav); /* * Watch layout/content changes */ if ('ResizeObserver' in window) { const resizeObserver = new ResizeObserver(function () { updateNav(); }); resizeObserver.observe(slider); cards.forEach(function (card) { resizeObserver.observe(card); }); } /* * Initial updates */ updateNav(); setTimeout(updateNav, 300); setTimeout(updateNav, 1000); }); /* * Hide scrollbar in WebKit browsers */ if (!document.getElementById('impact-slider-scrollbar-style')) { const style = document.createElement('style'); style.id = 'impact-slider-scrollbar-style'; style.textContent = ` .impact-slider::-webkit-scrollbar { display: none; } `; document.head.appendChild(style); } });