swiper-testimonials

Summary

Centered Swiper carousel of testimonial slides on a dark band. Each slide presents a circular author avatar, an italic quote underneath, and a name + role line; navigation is via a bullet-dot pagination strip at the bottom and grab-cursor drag on the slide itself.

HTML structure (minimal)

<section class="testimonial-section overflow-hidden">
  <div class="container">
    <div class="testi-carousel swiper">
      <div class="swiper-wrapper">
        <div class="swiper-slide">
          <div class="testi-item text-center">
            <div class="testi-thumb"><img src="assets/img/testi/testi-author-1.png" alt="img"></div>
            <div class="testi-content">
              <h3 class="author">Daniel Joseph <span>Writer</span></h3>
              <p>Curabitur accumsan nec aliquam mauris placat primis lacinia egestas congue facilisis ligula leo sociosqu consequat</p>
            </div>
          </div>
        </div>
        <!-- 5 more slides -->
      </div>
      <div class="swiper-pagination"></div>
    </div>
  </div>
</section>

Key SCSS tokens

.testimonial-section { padding: 130px 0; background: var(--rr-color-bg-1); }
.testi-item {
  max-width: 730px; margin: 0 auto;
  .testi-thumb img {
    width: 100px; height: 100px; border-radius: 50%; object-fit: cover;
    margin-bottom: 30px;
  }
  .testi-content {
    .author {
      color: var(--rr-color-common-white); font-size: 24px; font-weight: 700;
      span { color: var(--rr-color-theme-primary); font-weight: 500; margin-left: 8px; }
    }
    p { font-style: italic; max-width: 600px; margin: 20px auto 0; }
  }
}
.swiper-pagination-bullet { background: rgba(255,255,255,.3); opacity: 1; }
.swiper-pagination-bullet-active { background: var(--rr-color-theme-primary); width: 24px; border-radius: 6px; }

Animation logic

var swiperTesti = new Swiper(".testi-carousel", {
  slidesPerView: 1,
  loop: true,
  autoplay: true,
  grabcursor: true,
  speed: 1000,
  pagination: { el: ".swiper-pagination", clickable: true },
});

Notable details

• The active pagination bullet stretches into a 24-px-wide rounded pill (instead of staying a circle), giving a clear progress indicator without writing a custom pagination component.
• Author + role share one line via inline <span> — the role gets the cobalt accent so it reads as metadata rather than name.
• The block uses overflow-hidden on the section, so the loop teleport never visually leaks during seam transitions even with loop: true.

Use when

• Single-quote-at-a-time testimonial sections on dark backgrounds.
• Anywhere the author photo is the visual anchor and the quote needs to feel like a cinematic call-out rather than a card grid.

Caveats

• Swiper's grabcursor option is misspelled in this template (real prop is grabCursor); the intent reads correctly but the cursor style is not actually applied — fix in production by renaming the option.
• autoplay: true shorthand uses defaults (delay 3000); if reading time feels short, pass { delay: 5500, disableOnInteraction: false } instead.