testimonial-slider

Summary

Single-quote testimonial carousel. Each slide shows a circular portrait with a small quote-mark badge, an author name with role, and a large-type quote. Floating shape graphics parallax with the cursor in the background.

HTML structure (minimal)

<section class="testimonial-section">
  <div class="pattern-layer" style="background-image: url(shape-17.png);"></div>
  <div class="shape parallax-scene parallax-scene-1 anim-icons">
    <div class="shape-1" style="background-image: url(shape-18.png);"></div>
    <div data-depth="0.40" class="shape-2" style="background-image: url(shape-19.png);"></div>
  </div>
  <div class="large-container">
    <div class="single-item-carousel owl-carousel owl-theme dots-style-one nav-style-one">
      <div class="testimonial-block">
        <div class="image-box">
          <figure class="image"><img src="testimonial-1.jpg"></figure>
          <div class="icon-box"><i class="icon-2"></i></div>
        </div>
        <div class="content-box">
          <div class="author-box">
            <h3>Shamol Cina</h3>
            <span class="designation">CEO &amp; Head of Sky Tech Inc.</span>
          </div>
          <h2>"Extraordinary Performance Quick solutions. Highly recommended."</h2>
        </div>
      </div>
      <!-- repeat -->
    </div>
  </div>
</section>

Key SCSS tokens

.testimonial-section { position: relative; padding: 140px 0; }
.testimonial-block { display: grid; grid-template-columns: 380px 1fr; gap: 80px; align-items: center; }
.testimonial-block .image { width: 380px; aspect-ratio: 1/1; border-radius: 50%; overflow: hidden; }
.testimonial-block .icon-box {
  position: absolute; right: 30px; bottom: 30px;
  width: 80px; height: 80px; border-radius: 50%;
  background: var(--theme-color); color: #fff;
  display: grid; place-items: center;
}
.testimonial-block h2 { font-size: 36px; line-height: 1.3; font-weight: 500; }

Animation logic

$('.single-item-carousel').owlCarousel({
  loop: true, items: 1, dots: true, nav: true,
  autoplay: true, autoplayTimeout: 6000
});
new Parallax(document.querySelector('.parallax-scene-1'));

Notable details

• The quote-mark icon is a positioned circle on the portrait, not part of the photograph — makes it easy to swap photos without losing the badge.
• Two parallax shape layers add depth without distracting from the quote (low contrast vs background).
• dots-style-one plus nav-style-one is a recurring theme — the template defines its own Owl skin in style.css.

Use when

• Quote-led testimonial sections where one quote at a time should be the focal point.
• Pages where authority/credibility matters more than density.

Caveats

• Owl Carousel is jQuery-only; for a new build prefer Swiper.
• All three demo slides use the same name and quote in the source — author content needs replacing wholesale.