(function(){ const carousel = document.getElementById('special_carousel_693755a3e45c4'); if (!carousel) return; const wrapper = carousel.querySelector('.carousel-wrapper'); const track = carousel.querySelector('.carousel-track'); const prevBtn = carousel.querySelector('.carousel-prev'); const nextBtn = carousel.querySelector('.carousel-next'); const autoPlay = carousel.dataset.autoplay === 'true'; const interval = parseInt(carousel.dataset.interval || '3000'); const step = 1; // geser 1 kartu let index = 0, isTransitioning = false, timer, isPaused = false; // Gandakan item untuk loop tak terbatas const originalCount = 8; const clones = Array.from(track.children).slice(0, Math.min(originalCount, 6)).map(n => n.cloneNode(true)); clones.forEach(cl => track.appendChild(cl)); function itemWidth() { const el = track.querySelector('.carousel-item'); return el ? el.offsetWidth : 0; } let cachedWidth = itemWidth(); window.addEventListener('resize', () => { cachedWidth = itemWidth(); }); function goBy(delta){ if (isTransitioning) return; isTransitioning = true; index += delta; // arah kanan -> kiri (translateX negatif) wrapper.style.transform = 'translate3d(' + (-index * cachedWidth) + 'px,0,0)'; setTimeout(()=> { // reset posisi saat melewati batas originalCount if (index >= originalCount) { index = index % originalCount; wrapper.style.transition = 'none'; wrapper.style.transform = 'translate3d(' + (-index * cachedWidth) + 'px,0,0)'; void wrapper.offsetWidth; // reflow wrapper.style.transition = 'transform 500ms ease-in-out'; } else if (index < 0) { index = (index + originalCount) % originalCount; wrapper.style.transition = 'none'; wrapper.style.transform = 'translate3d(' + (-index * cachedWidth) + 'px,0,0)'; void wrapper.offsetWidth; wrapper.style.transition = 'transform 500ms ease-in-out'; } isTransitioning = false; }, 500); } function start(){ if (!autoPlay || isPaused) return; stop(); timer = setInterval(()=> goBy(step), interval); } function stop(){ if (timer) clearInterval(timer); } prevBtn?.addEventListener('click', ()=> { stop(); goBy(-step); start(); }); nextBtn?.addEventListener('click', ()=> { stop(); goBy(step); start(); }); carousel.addEventListener('mouseenter', ()=> { isPaused = true; stop(); }); carousel.addEventListener('mouseleave', ()=> { isPaused = false; start(); }); // mulai autoplay RTL document.addEventListener('visibilitychange', () => { if (document.hidden) { stop(); } else { start(); } }); start(); })();