testimonial-text-slider

Summary

Centred single-quote testimonial Swiper. Just text — large quote paragraph, italic name with designation in muted small caps — flanked by two custom prev/next icon buttons that hide on small screens.

HTML structure (minimal)

<div class="tp-testimonial-area pb-120">
  <div class="container">
    <div class="row justify-content-center">
      <div class="col-xl-10">
        <div class="tp-testimonial-slider-wrapper p-relative">
          <div class="tp-testimonial-arrow-box d-none d-lg-block">
            <button class="tp-testimonial-prev"><span><svg /* prev icon */ /></span></button>
            <button class="tp-testimonial-next"><span><svg /* next icon */ /></span></button>
          </div>
          <div class="swiper-container tp-testimonial-slider-active fix">
            <div class="swiper-wrapper">
              <div class="swiper-slide">
                <div class="tp-testimonial-item text-center">
                  <p>"Nulla ut enim non magna placerat scelerisque sed eu dolor…"</p>
                  <span><em>Louis Fantun</em> - Designer</span>
                </div>
              </div>
              <!-- more -->
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Key SCSS tokens

.tp-testimonial-item p {
  font-size: 36px;
  line-height: 1.3;
  font-family: var(--tp-ff-gallery);
  color: var(--tp-common-black);
  max-width: 900px;
  margin-inline: auto;
}
.tp-testimonial-item span { color: var(--tp-text-body); font-size: 14px; letter-spacing: .04em; text-transform: uppercase; }
.tp-testimonial-arrow-box { position: absolute; inset: auto 0 50% 0; display: flex; justify-content: space-between; pointer-events: none; }
.tp-testimonial-arrow-box button { pointer-events: auto; }

Animation logic

new Swiper('.tp-testimonial-slider-active', {
  modules: [Navigation],
  slidesPerView: 1,
  loop: true,
  autoplay: true,
  speed: 1000,
  navigation: { prevEl: '.tp-testimonial-prev', nextEl: '.tp-testimonial-next' },
});

Notable details

• No avatars, no stars — confidence move that says "the words are the proof".
• Arrows are absolutely positioned outside the column boundary so the slide content stays centred.
• 1000ms transition + autoplay gives a calm, editorial pace rather than a marketing-bullhorn flick.

Use when

• Studios or premium services where quotes are the social proof.
• When you want testimonials to read like blockquotes in a magazine.

Caveats

• Hides arrows below lg; pair with swipe affordance text or pagination dots if mobile users need a hint.