Driving digital transformation with Siemens and Mendix

tag) function initDynamicMarquee() { const track = document.querySelector('.companies-logo__track.w-dyn-items'); const wrapper = document.querySelector('.companies-logo__wrapper'); if (!track || !wrapper) { console.log('Marquee elements not found'); return; } // Get all original logo items const originalItems = Array.from(track.querySelectorAll('.companies-logo__track-item')); if (originalItems.length === 0) { console.log('No logo items found'); return; } // Only duplicate if there are less than 10 logos if (originalItems.length >= 10) { console.log('10 or more logos found, skipping duplication'); return; } // Calculate how many repetitions we need function calculateRepetitions() { const wrapperWidth = wrapper.offsetWidth; const trackWidth = track.scrollWidth; // We need at least 2x the wrapper width for seamless loop const minRequiredWidth = wrapperWidth * 2; const repetitions = Math.max(2, Math.ceil(minRequiredWidth / trackWidth)); return repetitions; } // Clone and append logos function duplicateLogos() { // Remove any existing duplicates (keep only originals) const allItems = track.querySelectorAll('.companies-logo__track-item'); allItems.forEach((item, index) => { if (index >= originalItems.length) { item.remove(); } }); const repetitions = calculateRepetitions(); // Clone original items (repetitions - 1) times for (let i = 1; i < repetitions; i++) { originalItems.forEach(item => { const clone = item.cloneNode(true); // Update IDs to avoid conflicts const clonedElements = clone.querySelectorAll('[data-w-id]'); clonedElements.forEach(el => { const currentId = el.getAttribute('data-w-id'); if (currentId) { el.setAttribute('data-w-id', currentId + '_clone_' + i); } }); track.appendChild(clone); }); } console.log(`Created ${repetitions} sets of ${originalItems.length} logos`); } // Handle window resize function handleResize() { setTimeout(duplicateLogos, 100); } // Initialize duplicateLogos(); // Listen for window resize window.addEventListener('resize', handleResize); // Optional: Re-initialize if new items are added dynamically // (useful if you're adding logos via Webflow CMS) const observer = new MutationObserver(() => { setTimeout(duplicateLogos, 100); }); observer.observe(track, { childList: true, subtree: true }); } // Wait for DOM to be ready if (document.readyState === 'loading') { document.addEventListener('DOMContentLoaded', initDynamicMarquee); } else { initDynamicMarquee(); } // Also run after a short delay to ensure Webflow dynamic content is loaded setTimeout(initDynamicMarquee, 1000);