Cable & Pipeline Detection Team

/* Carousel Container */ .team-carousel { position: relative; /* For arrows positioning */ overflow: hidden; /* Hide overflowing members */ width: 100%; margin: 0 auto; } /* Track for sliding members */ .team-track { display: flex; align-items: stretch; transition: transform 0.5s ease-in-out; will-change: transform; } /* Team Member Card */ .team-member { flex: 0 0 auto; /* JS sets width dynamically */ padding: 10px; box-sizing: border-box; display: flex; justify-content: center; } /* Team Member Card */ .team-card { background: rgba(59, 154, 228, 0.15); /* same tint as ue-info */ border: 2px solid #3B9AE4; border-radius: 20px; padding: 20px; text-align: center; display: flex; flex-direction: column; align-items: center; width: 75%; max-width: 100%; box-sizing: border-box; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); transition: transform 0.3s ease, box-shadow 0.3s ease; /* hover animation */ } .team-card:hover { transform: translateY(-5px); box-shadow: 0 12px 24px rgba(59, 154, 228, 0.2); } /* Uniform Circle Image */ .team-img { width: 160px; height: 160px; border-radius: 50%; overflow: hidden; flex-shrink: 0; } .team-img img { width: 100%; height: 100%; object-fit: cover; } /* Name + Role */ .team-name { margin-top: 10px; font-size: 1.0em; font-weight: 600; color: var(--e-global-color-primary, #333); } .team-role { font-size: 0.9em; color: var(--e-global-color-text, #666); text-align: center; padding: 6px 8px; line-height: 1.3em; min-height: 2.6em; white-space: normal; word-break: break-word; } /* Arrows */ .carousel-arrow { position: absolute; top: 45%; transform: translateY(-50%); background: #1678C5; color: #fff; border: none; padding: 8px 12px; cursor: pointer; font-size: 20px; border-radius: 50%; opacity: 0.65; transition: 0.3s; z-index: 10; } .carousel-arrow:hover { opacity: 0.65; } .carousel-arrow.left { left: 10px; } .carousel-arrow.right { right: 10px; } (function () { const carousel = document.querySelector('.team-carousel'); const track = carousel.querySelector('.team-track'); const prevBtn = document.querySelector('.carousel-arrow.left'); const nextBtn = document.querySelector('.carousel-arrow.right'); const originalSlides = Array.from(track.querySelectorAll('.team-member')); const total = originalSlides.length; let visibleCount = getVisibleCount(); let slideWidth = 0; let currentIndex = 0; let autoTimer = null; const ANIM_DUR = 500; // ms function getVisibleCount() { if (window.innerWidth <= 600) return 1; if (window.innerWidth <= 1024) return 2; return 4; } function buildCarousel() { visibleCount = getVisibleCount(); track.innerHTML = ''; const frag = document.createDocumentFragment(); // prepend clones for (let i = total - visibleCount; i < total; i++) { frag.appendChild(originalSlides[i].cloneNode(true)); } // main slides for (let i = 0; i < total; i++) { frag.appendChild(originalSlides[i].cloneNode(true)); } // append clones for (let i = 0; i { s.style.width = `${slideWidth}px`; }); currentIndex = visibleCount; track.style.transition = 'none'; track.style.transform = `translateX(${-currentIndex * slideWidth}px)`; track.offsetHeight; track.style.transition = ''; } function moveToIndex(index, animate = true) { if (!animate) track.style.transition = 'none'; else track.style.transition = ''; track.style.transform = `translateX(${-index * slideWidth}px)`; if (!animate) { setTimeout(() => { track.style.transition = ''; }, 20); } } function nextSlide() { currentIndex++; moveToIndex(currentIndex, true); if (currentIndex >= total + visibleCount) { setTimeout(() => { track.style.transition = 'none'; currentIndex = visibleCount; moveToIndex(currentIndex, false); }, ANIM_DUR); } } function prevSlide() { currentIndex--; moveToIndex(currentIndex, true); if (currentIndex { track.style.transition = 'none'; currentIndex = total; moveToIndex(currentIndex, false); }, ANIM_DUR); } } function startAuto() { stopAuto(); autoTimer = setInterval(nextSlide, 3000); } function stopAuto() { if (autoTimer) { clearInterval(autoTimer); autoTimer = null; } } let startX = 0; track.addEventListener('touchstart', (e) => { startX = e.touches[0].clientX; stopAuto(); }); track.addEventListener('touchend', (e) => { const diff = e.changedTouches[0].clientX - startX; if (diff > 50) prevSlide(); if (diff { nextSlide(); startAuto(); }); prevBtn.addEventListener('click', () => { prevSlide(); startAuto(); }); let resizeTimer = null; window.addEventListener('resize', () => { clearTimeout(resizeTimer); resizeTimer = setTimeout(buildCarousel, 120); }); buildCarousel(); startAuto(); })();