.logo02-slides { direction: rtl; } .logo01-slide, .logo02-slide { flex-shrink: 0; margin-right: 70px; } document.addEventListener("DOMContentLoaded", function() { function initCarousel(selector, direction) { const carousel = document.querySelector(selector); const slidesContainer = carousel.querySelector(`${selector}-slides`); const slides = slidesContainer.querySelectorAll(`${selector}-slide`); const gap = 70; const transitionDuration = 0.5; function calculateTotalWidth() { let totalWidth = 0; slides.forEach(slide => { totalWidth += slide.getBoundingClientRect().width + gap; }); return totalWidth; } let totalWidth = calculateTotalWidth(); // Clone slides to make the loop slides.forEach(slide => { const clone = slide.cloneNode(true); slidesContainer.appendChild(clone); }); let currentPosition = 0; function moveSlides() { currentPosition += 1; // Increase the step to make the movement smoother if (currentPosition >= totalWidth) { currentPosition = 0; slidesContainer.style.transition = "none"; slidesContainer.style.transform = `translateX(${direction === 'rtl' ? '' : '-'}${currentPosition}px)`; setTimeout(() => { slidesContainer.style.transition = `transform ${transitionDuration}s linear`; }, 50); // Small delay to ensure the transition property is reset } else { slidesContainer.style.transform = `translateX(${direction === 'rtl' ? '' : '-'}${currentPosition}px)`; } requestAnimationFrame(moveSlides); } slidesContainer.style.transition = `transform ${transitionDuration}s linear`; moveSlides(); } // Ensure images are fully loaded before calculating widths window.addEventListener('load', function() { initCarousel(".logo01", "ltr"); initCarousel(".logo02", "rtl"); }); });