testimonials-swiper

Summary

Swiper-driven testimonials carousel on a porcelain background. Two slides visible on desktop, one on mobile. Each slide is a half-portrait, half-quote card: 4-col image on the left, 8-col white panel with a large amber blockquote glyph, italic quote, and name + designation. Bullet pagination, autoplay every 3s.

HTML structure (minimal)

<div class="overflow-hidden">
  <div class="swiper swiperTestimonials">
    <div class="swiper-wrapper">
      <div class="swiper-slide">
        <div class="testimonial-container">
          <div class="d-flex flex-xl-row flex-column">
            <div class="col col-xl-4">
              <img src="image/client.jpg" class="img-fluid w-100 h-100"
                   style="object-fit: cover;">
            </div>
            <div class="col col-xl-8">
              <div class="d-flex flex-column gap-3 p-4 bg-white">
                <i class="rtmicon rtmicon-blockquote accent-color fs-1"></i>
                <span class="font-2 fst-italic">"I am incredibly grateful for the
                  exceptional legal services offered by Pillar…"</span>
                <div class="d-flex flex-column">
                  <h5 class="accent-color">Brian Abraham</h5>
                  <span class="font-2">Designation</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- ×4 slides -->
    </div>
    <div class="swiper-pagination"></div>
  </div>
</div>

Key SCSS tokens

.testimonial-container {
  background: transparent;
  display: flex; flex-direction: column;
  gap: .5rem;
  height: 100%;
}

Animation logic

// js/swiper-script.js
var swiperTestimonials = new Swiper('.swiper.swiperTestimonials', {
  autoplay: { delay: 3000 },
  speed: 2000,
  slidesPerView: 2,
  slidesPerGroup: 1,
  spaceBetween: 10,
  loop: false,
  hashNavigation: true,
  grabCursor: true,
  breakpoints: {
    360:  { slidesPerView: 1 },
    768:  { slidesPerView: 2 },
    1024: { slidesPerView: 2 }
  },
  pagination: {
    el: '.swiper-pagination',
    type: 'bullets',
    clickable: true
  }
});

Notable details

• The split-card layout (4-col portrait + 8-col quote) gives the testimonial more visual weight than the usual avatar-above-text pattern.
• Big amber rtmicon-blockquote glyph at fs-1 acts as a visual marker — works because the rest of the card is monochrome.
• Speed is 2000ms — slower than the typical Swiper default; aligns with the formal pace of the rest of the site.

Use when

• Two-up testimonial carousels with portrait imagery for any service-firm site.
• When you need the slide to be more than just a quote card — actual face-of-client space.

Caveats

• loop: false means the user hits a hard stop on the last slide; switch to loop: true if you want continuous rotation.
• hashNavigation: true writes # fragments to the URL on slide change — surprising for a testimonial carousel; consider disabling unless you actually link to specific quotes.
• Demo quotes contain literal stray double-quotes (""…"") — clean before publishing.