How to Make A Creative Team Members Slider Elementor Free

<script>
document.addEventListener('DOMContentLoaded', function () {
  const track = document.querySelector('.carousel-track');
  const cards = Array.from(track.querySelectorAll('.card'));
  const prevArrow = document.querySelector('.nav-arrow.left');
  const nextArrow = document.querySelector('.nav-arrow.right');
  const infoContainer = document.querySelector('.carousel-member-info'); // <- existing Elementor div

  // Create carousel dots
  const dotsContainer = document.createElement('div');
  dotsContainer.className = 'carousel-dots';
  track.parentNode.appendChild(dotsContainer);

  const dots = cards.map((card, idx) => {
    const d = document.createElement('div');
    d.className = 'dot';
    if (idx === 0) d.classList.add('active');
    d.dataset.index = idx;
    dotsContainer.appendChild(d);
    d.addEventListener('click', () => {
      updateCarousel(idx);
    });
    return d;
  });

  let currentIndex = 0;
  const stateClasses = ['center','left-1','left-2','right-1','right-2','hidden'];
  let isAnimating = false;

  function updateCarousel(newIndex) {
    if (isAnimating) return;
    isAnimating = true;

    currentIndex = ((newIndex % cards.length) + cards.length) % cards.length;

    cards.forEach((item, i) => {
      const offset = (i - currentIndex + cards.length) % cards.length;
      stateClasses.forEach(c => item.classList.remove(c));

      if (offset === 0) {
        item.classList.add('center');
      } else if (offset === 1) {
        item.classList.add('right-1');
      } else if (offset === 2) {
        item.classList.add('right-2');
      } else if (offset === cards.length - 1) {
        item.classList.add('left-1');
      } else if (offset === cards.length - 2) {
        item.classList.add('left-2');
      } else {
        item.classList.add('hidden');
      }
    });

    // Update dots
    dots.forEach((d, i) => d.classList.toggle('active', i === currentIndex));

    // Update carousel-member-info by cloning styled elements
    const currentCard = cards[currentIndex];
    const nameEl = currentCard.querySelector('.member-name');
    const roleEl = currentCard.querySelector('.member-role');

    if (infoContainer) {
      infoContainer.style.opacity = '0'; // fade out

      setTimeout(() => {
        infoContainer.innerHTML = ''; // Clear old content

        const clonedName = nameEl ? nameEl.cloneNode(true) : null;
        const clonedRole = roleEl ? roleEl.cloneNode(true) : null;

        if (clonedName) infoContainer.appendChild(clonedName);
        if (clonedRole) infoContainer.appendChild(clonedRole);

        infoContainer.style.opacity = '1'; // fade in
      }, 300);
    }

    const onEnd = () => {
      isAnimating = false;
      cards.forEach(s => s.removeEventListener('transitionend', onEnd));
    };
    cards.forEach(s => s.addEventListener('transitionend', onEnd));
    setTimeout(() => { isAnimating = false; }, 700); // fallback
  }

  prevArrow.addEventListener('click', () => {
    updateCarousel(currentIndex - 1);
  });

  nextArrow.addEventListener('click', () => {
    updateCarousel(currentIndex + 1);
  });

  // Touch support
  let touchStartX = 0;
  track.parentNode.addEventListener('touchstart', (ev) => {
    touchStartX = ev.touches[0].clientX;
  }, { passive: true });

  track.parentNode.addEventListener('touchend', (ev) => {
    const endX = ev.changedTouches[0].clientX;
    const diff = touchStartX - endX;
    if (Math.abs(diff) > 40) {
      if (diff > 0) updateCarousel(currentIndex + 1);
      else updateCarousel(currentIndex - 1);
    }
  }, { passive: true });

  // Init
  updateCarousel(currentIndex);
});
</script>