Testimonial Carousel — Free HTML CSS JS Slider Snippet

<div class="tc-carousel" id="tcCarousel" aria-roledescription="carousel" aria-label="Customer testimonials">
  <div class="tc-viewport">
    <div class="tc-track" id="tcTrack"></div>
  </div>

  <div class="tc-controls">
    <button class="tc-arrow" id="tcPrev" type="button" aria-label="Previous testimonial">
      <svg viewBox="0 0 24 24" aria-hidden="true"><polyline points="15 18 9 12 15 6"/></svg>
    </button>
    <div class="tc-dots" id="tcDots" role="tablist" aria-label="Choose testimonial"></div>
    <button class="tc-arrow" id="tcNext" type="button" aria-label="Next testimonial">
      <svg viewBox="0 0 24 24" aria-hidden="true"><polyline points="9 18 15 12 9 6"/></svg>
    </button>
  </div>
</div>

* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: system-ui, -apple-system, sans-serif; background: #f8fafc; min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 32px; }

.tc-carousel { width: 100%; max-width: 460px; }

.tc-viewport { overflow: hidden; border-radius: 18px; }

.tc-track {
  display: flex;
  transition: transform 0.5s cubic-bezier(0.4, 0.2, 0.2, 1);
  will-change: transform;
}

.tc-slide {
  flex: 0 0 100%;
  padding: 34px 32px 30px;
  background: #fff;
  border: 1px solid #e8edf3;
}

.tc-stars { display: flex; gap: 3px; margin-bottom: 16px; }
.tc-stars svg { width: 17px; height: 17px; fill: #f59e0b; }

.tc-text {
  font-size: 17px;
  line-height: 1.6;
  color: #1e293b;
  font-weight: 500;
  letter-spacing: -0.01em;
  min-height: 110px;
}

.tc-author { display: flex; align-items: center; gap: 12px; margin-top: 22px; }
.tc-avatar {
  width: 44px; height: 44px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 15px; font-weight: 700;
  border-radius: 50%;
}
.tc-meta { display: flex; flex-direction: column; }
.tc-name { font-size: 14.5px; font-weight: 700; color: #0f172a; }
.tc-role { font-size: 12.5px; color: #94a3b8; }

.tc-controls { display: flex; align-items: center; justify-content: center; gap: 18px; margin-top: 22px; }

.tc-arrow {
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  background: #fff; border: 1px solid #e2e8f0; border-radius: 50%;
  cursor: pointer; color: #475569;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.tc-arrow svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.tc-arrow:hover { border-color: #6366f1; color: #6366f1; }

.tc-dots { display: flex; gap: 8px; }
.tc-dot {
  width: 8px; height: 8px; padding: 0;
  background: #cbd5e1; border: none; border-radius: 999px;
  cursor: pointer;
  transition: width 0.3s, background 0.3s;
}
.tc-dot.active { width: 24px; background: #6366f1; }

const DATA = [
  { text: 'We shipped our redesign three weeks early. The component library alone saved us a month of work — everything just dropped in and worked.', name: 'Maya Chen', role: 'Head of Product, Linework', rating: 5, color: 'linear-gradient(135deg,#6366f1,#8b5cf6)' },
  { text: 'Support actually reads your messages. I reported an edge case at 11pm and had a fix in the next release. That never happens.', name: 'Devon Park', role: 'CTO, Halcyon', rating: 5, color: 'linear-gradient(135deg,#0ea5e9,#22d3ee)' },
  { text: 'Onboarding took ten minutes. Our whole team was productive on day one without a single training call.', name: 'Priya Nair', role: 'Eng Manager, Foundry', rating: 4, color: 'linear-gradient(135deg,#16a34a,#84cc16)' },
  { text: 'The pricing is honest and the value is obvious. We compared four tools and this was the only one that did not nickel-and-dime us.', name: 'Tom Alvarez', role: 'Founder, Skiff', rating: 5, color: 'linear-gradient(135deg,#f97316,#ec4899)' },
];

const track = document.getElementById('tcTrack');
const dotsWrap = document.getElementById('tcDots');
const carousel = document.getElementById('tcCarousel');
let index = 0;
let timer = null;

function starSvg() {
  return '<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg>';
}

DATA.forEach((t, i) => {
  const slide = document.createElement('div');
  slide.className = 'tc-slide';
  const initials = t.name.split(' ').map(w => w[0]).join('').slice(0, 2);
  const stars = Array.from({ length: 5 }, (_, s) => s < t.rating ? starSvg() : '').join('');
  slide.innerHTML =
    '<div class="tc-stars">' + stars + '</div>' +
    '<p class="tc-text">' + t.text + '</p>' +
    '<div class="tc-author">' +
      '<span class="tc-avatar" style="background:' + t.color + '">' + initials + '</span>' +
      '<span class="tc-meta"><span class="tc-name">' + t.name + '</span><span class="tc-role">' + t.role + '</span></span>' +
    '</div>';
  track.appendChild(slide);

  const dot = document.createElement('button');
  dot.className = 'tc-dot' + (i === 0 ? ' active' : '');
  dot.type = 'button';
  dot.setAttribute('role', 'tab');
  dot.setAttribute('aria-label', 'Testimonial ' + (i + 1));
  dot.addEventListener('click', () => { goTo(i); restart(); });
  dotsWrap.appendChild(dot);
});

function goTo(i) {
  index = (i + DATA.length) % DATA.length;
  track.style.transform = 'translateX(-' + (index * 100) + '%)';
  [...dotsWrap.children].forEach((d, di) => d.classList.toggle('active', di === index));
}

function restart() {
  clearInterval(timer);
  timer = setInterval(() => goTo(index + 1), 5000);
}

document.getElementById('tcPrev').addEventListener('click', () => { goTo(index - 1); restart(); });
document.getElementById('tcNext').addEventListener('click', () => { goTo(index + 1); restart(); });

// Pause autoplay on hover / focus
carousel.addEventListener('mouseenter', () => clearInterval(timer));
carousel.addEventListener('mouseleave', restart);
carousel.addEventListener('focusin', () => clearInterval(timer));
carousel.addEventListener('focusout', restart);

restart();