Webflow testimonial slider (free carousel)

What you receive in Webflow

• 36 native elements and 18 classes.
• Breakpoints: mobile landscape (767px).
• States: hover.
• 2 Embed elements keep the CSS or script that Webflow cannot express. To edit an Embed, you must have a paid Webflow site plan.

How to paste it

1. Click Copy for Webflow.
2. Open your page in the Webflow Designer.
3. Press ⌘V or Ctrl+V.

HTML

<section class="ts">
  <div class="ts-inner">
    <h2 class="ts-title">Loved by teams that ship</h2>
    <div class="ts-viewport">
      <div class="ts-track">
        <figure class="ts-slide">
          <blockquote class="ts-quote">“We moved our whole marketing site in a weekend. The handoff from design to live page went from days to minutes.”</blockquote>
          <figcaption class="ts-person"><span class="ts-avatar">MA</span><span class="ts-meta"><span class="ts-name">Maya Alvarez</span><span class="ts-role">Head of Growth, Northwind</span></span></figcaption>
        </figure>
        <figure class="ts-slide">
          <blockquote class="ts-quote">“Our clients edit their own pages now. Support tickets about typos dropped to zero in the first month.”</blockquote>
          <figcaption class="ts-person"><span class="ts-avatar">JO</span><span class="ts-meta"><span class="ts-name">James Okafor</span><span class="ts-role">Founder, Okafor Studio</span></span></figcaption>
        </figure>
        <figure class="ts-slide">
          <blockquote class="ts-quote">“The best tool we added this year. Designers stay in flow and developers stop rebuilding the same sections.”</blockquote>
          <figcaption class="ts-person"><span class="ts-avatar">LC</span><span class="ts-meta"><span class="ts-name">Lena Chen</span><span class="ts-role">Design Lead, Brightpath</span></span></figcaption>
        </figure>
      </div>
    </div>
    <div class="ts-controls">
      <button class="ts-arrow ts-prev" aria-label="Previous testimonial">←</button>
      <div class="ts-dots"><button class="ts-dot" aria-label="Testimonial 1"></button><button class="ts-dot" aria-label="Testimonial 2"></button><button class="ts-dot" aria-label="Testimonial 3"></button></div>
      <button class="ts-arrow ts-next" aria-label="Next testimonial">→</button>
    </div>
  </div>
</section>
<style>
.ts { font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif; background: #0c0a09; color: #fafaf9; padding: 104px 24px; }
.ts-inner { max-width: 820px; margin: 0 auto; }
.ts-title { font-size: 42px; line-height: 1.1; letter-spacing: -0.02em; text-align: center; margin: 0 0 48px; }
.ts-viewport { overflow: hidden; }
.ts-track { display: flex; transition: transform 0.5s ease; }
.ts-slide { flex: 0 0 100%; margin: 0; padding: 0 8px; box-sizing: border-box; text-align: center; }
.ts-quote { font-size: 26px; line-height: 1.45; margin: 0 0 32px; color: #fafaf9; }
.ts-person { display: inline-flex; align-items: center; gap: 14px; text-align: left; }
.ts-avatar { display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 50%; background: #2563eb; color: #ffffff; font-size: 16px; font-weight: 700; }
.ts-meta { display: flex; flex-direction: column; gap: 2px; }
.ts-name { font-size: 17px; font-weight: 700; }
.ts-role { font-size: 15px; color: #a8a29e; }
.ts-controls { display: flex; align-items: center; justify-content: center; gap: 24px; margin: 48px 0 0; }
.ts-arrow { width: 48px; height: 48px; border-radius: 50%; border: 1px solid #44403c; background: transparent; color: #fafaf9; font-size: 20px; cursor: pointer; transition: background-color 0.2s ease, border-color 0.2s ease; }
.ts-arrow:hover { background: #292524; border-color: #78716c; }
.ts-dots { display: flex; gap: 10px; }
.ts-dot { width: 10px; height: 10px; padding: 0; border-radius: 50%; border: 0; background: #57534e; cursor: pointer; transition: background-color 0.2s ease, width 0.2s ease; }
.ts-dot.is-active { width: 28px; border-radius: 999px; background: #fafaf9; }
@media (max-width: 767px) { .ts { padding: 72px 20px; } .ts-title { font-size: 32px; margin-bottom: 36px; } .ts-quote { font-size: 20px; } .ts-controls { gap: 16px; margin-top: 36px; } }
</style>
<script>
document.querySelectorAll(".ts").forEach(function (root) {
  var track = root.querySelector(".ts-track");
  var slides = root.querySelectorAll(".ts-slide");
  var dots = root.querySelectorAll(".ts-dot");
  var index = 0;
  function go(i) {
    index = (i + slides.length) % slides.length;
    track.style.transform = "translateX(" + (-100 * index) + "%)";
    dots.forEach(function (d, j) { d.classList.toggle("is-active", j === index); d.setAttribute("aria-current", j === index ? "true" : "false"); });
  }
  root.querySelector(".ts-prev").addEventListener("click", function () { go(index - 1); });
  root.querySelector(".ts-next").addEventListener("click", function () { go(index + 1); });
  dots.forEach(function (d, j) { d.addEventListener("click", function () { go(j); }); });
  go(0);
  var timer = setInterval(function () { go(index + 1); }, 6000);
  root.addEventListener("mouseenter", function () { clearInterval(timer); });
});
</script>