testimonials-carousel

Summary

A nested Swiper carousel of customer testimonials. Each slide is a centered block with a circular avatar at the top, a multi-line quote in body type, and a name + company line beneath. Dot pagination underneath. Drag / swipe to advance.

HTML structure (minimal)

<section class="quotes">
  <header class="quotes__head">
    <p class="eyebrow">What clients say</p>
    <h2 class="quotes__title">Quiet operators, loud results.</h2>
  </header>
  <div class="swiper quotes__swiper">
    <div class="swiper-wrapper">
      <article class="swiper-slide quote">
        <img class="quote__avatar" src="/img/people/anna.jpg" alt="">
        <blockquote class="quote__body">
          “They didn't sell us a vision. They shipped, three Mondays in a row.”
        </blockquote>
        <p class="quote__by">
          <strong>Anna Petersen</strong> — Head of Ops, Acme
        </p>
      </article>
      <!-- repeat slides -->
    </div>
    <div class="swiper-pagination"></div>
  </div>
</section>

Key SCSS tokens

.quotes {
  padding: 96px 32px;
  text-align: center;
  font-family: "Instrument Sans", system-ui, sans-serif;
}
.quotes__title {
  font-size: 60px;
  font-weight: 500;
  letter-spacing: -1px;
  line-height: 1.1;
  margin-bottom: 64px;
}
.quote {
  max-width: 720px;
  margin: 0 auto;
}
.quote__avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  object-fit: cover;
  margin-bottom: 24px;
}
.quote__body {
  font-size: 24px;
  font-weight: 500;
  letter-spacing: -0.3px;
  line-height: 1.35;
  margin: 0 0 24px;
  quotes: "“" "”";
}
.quote__by {
  font-size: 14px;
}
.quote__by strong {
  font-weight: 500;
}

Animation logic

import Swiper from 'swiper';
import { Pagination } from 'swiper/modules';

new Swiper('.quotes__swiper', {
  modules: [Pagination],
  slidesPerView: 1,
  loop: true,
  pagination: { el: '.swiper-pagination', clickable: true },
});

Notable details

• Quote uses real curly quotes (“ ”) rendered via CSS quotes rather than baked-in glyphs.
• Single quote per slide (not a carousel of multiple quotes simultaneously) — keeps the reader on one voice at a time.
• 24px quote / 14px attribution preserves the type-ladder-only design language; no italic, no decorative quote-mark icon.
• Avatar at the TOP of each card (not next to the quote) is unusual — it makes the face equal in importance to the words.

Use when

• You have a small set (3–6) of strong testimonials with real headshots.
• The brand voice supports oversized text quotes (otherwise 24px on a single sentence reads as bombastic).
• Page already has carousels — testimonials carousel reuses the kinetic vocabulary the user has learned.

Caveats

• Without a real headshot the avatar circle becomes a placeholder — drop the avatar entirely if you only have logos.
• Single-slide-at-a-time means a quote-per-second pacing if user uses arrow keys; consider pause-on-hover for long quotes.
• Loop mode masks the "end" of the carousel — fine here, but if testimonials count is precious to display, disable loop.