testimonial-carousel

Summary

A centered Swiper of client testimonials with slidesPerView: 2.59 so the active slide is full-size and neighbours peek in at reduced opacity. Each slide pairs a 4:3 portrait, name and role, a divider line, and a single-paragraph quote. Below: a chevron prev/next with dot pagination.

HTML structure (minimal)

<section class="section-testimonial flat-spacing tf-btn-swiper-main">
  <h6 class="mini-title text-caption text-white-64 text-center">TRUSTED BY FOUNDED</h6>
  <div dir="ltr" class="swiper tf-swiper swiper-testimonial"
       data-preview="2.59" data-tablet="2.2" data-mobile-sm="1.5" data-mobile="1.2"
       data-loop="true" data-center="true" data-space-lg="40" data-space-md="30" data-space="15">
    <div class="swiper-wrapper">
      <div class="swiper-slide">
        <div class="testimonial-v01">
          <div class="tes-author">
            <div class="author_image"><img src="assets/images/section/tes-1.jpg" alt=""></div>
            <div class="author_info">
              <h6 class="info__name">Ethan Morales</h6>
              <p class="info__duty">Marketing Director, Horizon Apparel</p>
            </div>
          </div>
          <div class="br-line"></div>
          <p class="tes-text text-body-1">"Davies reimagined our digital presence…"</p>
        </div>
      </div>
      <!-- … -->
    </div>
    <div class="group-btn-slider">
      <div class="nav-prev-swiper"><i class="icon icon-arrow-caret-left fs-8"></i></div>
      <div class="sw-dot-default tf-sw-pagination"></div>
      <div class="nav-next-swiper"><i class="icon icon-arrow-caret-right fs-8"></i></div>
    </div>
  </div>
</section>

Key SCSS tokens

.section-testimonial {
  .swiper-slide {
    transition: opacity 0.4s ease;
    opacity: 0.4;
    &.swiper-slide-active { opacity: 1; }
  }

  .testimonial-v01 {
    .tes-author {
      display: grid;
      grid-template-columns: 200px 1fr;
      gap: 24px;
      align-items: end;
    }
    .br-line { margin: 24px 0; height: 1px; background: var(--white-16); }
    .tes-text { max-width: 540px; }
  }
}

Animation logic

// assets/js/carousel.js initialises every .swiper.tf-swiper from data-* attributes;
// data-center="true" sets centeredSlides, data-loop="true" enables loop mode.

Notable details

• Half-step slidesPerView (2.59) is unusual — it forces the active slide to be wider while leaving fractional peek on each side, telegraphing the carousel without dedicated nav arrows.
• Inactive slides drop to 0.4 opacity, drawing attention to the active card without dimming the page.
• The author image is fixed at 200px square in the grid track — keeps portraits anchored regardless of body length.

Use when

• Testimonial carousels where you want the active quote to dominate visually.
• When portraits should anchor the layout instead of free-floating in the slide.

Caveats

• data-loop requires a slide count ≥ slidesPerView * 2; when content is short, Swiper logs warnings.
• Manual portrait sizes; faces close to image edges may crop under different ratios.