testimonials-with-thumbs

Summary

Asymmetric testimonials block: section heading on the left, large quote on the right, paired with a clickable thumbnail strip below the quote that swaps between authors. Built as two Slick carousels wired with asNavFor.

HTML structure (minimal)

<section class="testimonials-layout2 pt-130 pb-40">
  <div class="container">
    <div class="testimonials-wrapper">
      <div class="row">
        <div class="col-lg-5">
          <div class="heading-layout2">
            <h3 class="heading__title">Inspiring Stories!</h3>
          </div>
        </div>
        <div class="col-lg-7">
          <div class="slider-with-navs">
            <div class="testimonial-item">
              <h3 class="testimonial__title">“Their doctors include highly qualified practitioners…”</h3>
            </div>
            <!-- testimonial 2, 3 -->
          </div>
          <div class="slider-nav mb-60">
            <div class="testimonial__meta">
              <div class="testimonial__thmb"><img src="assets/images/testimonials/thumbs/1.png" alt="author thumb"></div>
              <div>
                <h4 class="testimonial__meta-title">Sami Wade</h4>
                <p class="testimonial__meta-desc">7oroof Inc</p>
              </div>
            </div>
            <!-- meta 2, 3 -->
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

Key SCSS tokens

.testimonials-layout2 {
  .testimonial-item .testimonial__title {
    font-size: 24px; font-weight: 500; line-height: 1.5; color: $color-heading;
  }
  .slider-nav {
    display: flex; gap: 30px; margin-top: 40px;
    .testimonial__meta {
      display: flex; align-items: center; cursor: pointer; opacity: .5;
      transition: opacity .3s;
      &.slick-current { opacity: 1; }
      .testimonial__thmb img { width: 60px; height: 60px; border-radius: 50%; margin-right: 12px; }
      .testimonial__meta-title { font-size: 16px; margin-bottom: 0; }
      .testimonial__meta-desc { font-size: 13px; color: $color-body; margin-bottom: 0; }
    }
  }
}

Animation logic

// The plugin bundle pairs the two Slick carousels via asNavFor:
$('.slider-with-navs').slick({
  slidesToShow: 1, arrows: false, dots: false, fade: true,
  asNavFor: '.slider-nav'
});
$('.slider-nav').slick({
  slidesToShow: 3, asNavFor: '.slider-with-navs',
  focusOnSelect: true, arrows: false, dots: false
});

Notable details

• The nav slider intentionally shows only the avatar and name/role tiles, not the quote — visually inverts the typical testimonial layout where the quote is small and the avatar dominates.
• The active thumb gets slick-current, and the SCSS lifts it to full opacity while inactive thumbs sit at 50%, doubling as a "filter" affordance.
• The whole block uses a 5/7 column split so the headline reads as a side-label rather than competing with the quote.

Use when

• Testimonials, expert panels, alumni stories, or client logos where one quote should dominate while a chooser-roster lets readers swap voices.
• Editorial pull-quote layouts where you want a compact author switcher rather than a generic carousel.

Caveats

• Slick.js asNavFor is the linchpin — porting to Swiper means using its thumbs module with similar but not identical API.
• Three thumbs work well; with 6+ authors the row needs scroll arrows (Slick supports this but the demo doesn't enable them).