Web Designer Wall

Snippets Carousel

Bootstrap 5 Testimonial Carousel with Side Previews

A testimonial carousel that centres the active quote card and previews the previous and next ones, with arrows, dots, swipe and keyboard control.

Bootstrap 5 No jQuery May 2020 3.5K views 

<section class="wdw-stage overflow-hidden">
  <div class="container" style="max-width: 1100px;">
    <div class="text-center mb-4">
      <span class="wdw-eyebrow">Testimonials</span>
      <h1 class="wdw-heading h2 mt-1 mb-0">What our clients say</h1>
    </div>
    <div class="tc" id="tc" role="region" aria-roledescription="carousel" aria-label="Client testimonials" tabindex="0">
      <div class="tc-viewport">
        <div class="tc-track" id="tc-track">
      <figure class="tc-slide m-0" role="group" aria-roledescription="slide" aria-label="1 of 5">
        <div class="wdw-card tc-card text-center p-4 p-md-4">
          <img class="tc-avatar" src="https://i.pravatar.cc/160?img=47" width="72" height="72" alt="Marielle Haag">
          <div class="tc-stars" aria-label="5 out of 5 stars">★★★★★</div>
          <blockquote class="mb-3 tc-quote">“Switching took an afternoon and our onboarding time dropped by half. The team genuinely listens to feedback.”</blockquote>
          <figcaption><span class="d-block fw-bold">Marielle Haag</span><span class="small wdw-muted">Product designer, Lumen</span></figcaption>
        </div>
      </figure>
      <figure class="tc-slide m-0" role="group" aria-roledescription="slide" aria-label="2 of 5">
        <div class="wdw-card tc-card text-center p-4 p-md-4">
          <img class="tc-avatar" src="https://i.pravatar.cc/160?img=44" width="72" height="72" alt="Ximena Vegara">
          <div class="tc-stars" aria-label="5 out of 5 stars">★★★★★</div>
          <blockquote class="mb-3 tc-quote">“The cleanest tooling we have used in years. Reporting that used to take a day now takes a coffee break.”</blockquote>
          <figcaption><span class="d-block fw-bold">Ximena Vegara</span><span class="small wdw-muted">Head of Growth, Orbit</span></figcaption>
        </div>
      </figure>
      <figure class="tc-slide m-0" role="group" aria-roledescription="slide" aria-label="3 of 5">
        <div class="wdw-card tc-card text-center p-4 p-md-4">
          <img class="tc-avatar" src="https://i.pravatar.cc/160?img=12" width="72" height="72" alt="John Paul">
          <div class="tc-stars" aria-label="5 out of 5 stars">★★★★★</div>
          <blockquote class="mb-3 tc-quote">“Reliable, fast and thoughtfully designed. Our engineers stopped complaining about the stack, which says a lot.”</blockquote>
          <figcaption><span class="d-block fw-bold">John Paul</span><span class="small wdw-muted">CTO, Fieldnote</span></figcaption>
        </div>
      </figure>
      <figure class="tc-slide m-0" role="group" aria-roledescription="slide" aria-label="4 of 5">
        <div class="wdw-card tc-card text-center p-4 p-md-4">
          <img class="tc-avatar" src="https://i.pravatar.cc/160?img=49" width="72" height="72" alt="Priya Nair">
          <div class="tc-stars" aria-label="5 out of 5 stars">★★★★★</div>
          <blockquote class="mb-3 tc-quote">“Support replied within minutes and shipped the fix the same day. That is rare and we noticed.”</blockquote>
          <figcaption><span class="d-block fw-bold">Priya Nair</span><span class="small wdw-muted">Founder, Kiln Studio</span></figcaption>
        </div>
      </figure>
      <figure class="tc-slide m-0" role="group" aria-roledescription="slide" aria-label="5 of 5">
        <div class="wdw-card tc-card text-center p-4 p-md-4">
          <img class="tc-avatar" src="https://i.pravatar.cc/160?img=33" width="72" height="72" alt="Daniel Okafor">
          <div class="tc-stars" aria-label="5 out of 5 stars">★★★★★</div>
          <blockquote class="mb-3 tc-quote">“We rolled it out to three offices in a week. Everyone just understood how it worked.”</blockquote>
          <figcaption><span class="d-block fw-bold">Daniel Okafor</span><span class="small wdw-muted">Ops lead, Harbor</span></figcaption>
        </div>
      </figure>
        </div>
      </div>
    </div>
    <div class="d-flex justify-content-center align-items-center gap-3 mt-4">
      <button type="button" class="btn btn-outline-secondary rounded-circle tc-btn" id="tc-prev" aria-label="Previous testimonial"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m15 6-6 6 6 6"/></svg></button>
      <div class="d-flex gap-2" id="tc-dots"></div>
      <button type="button" class="btn btn-outline-secondary rounded-circle tc-btn" id="tc-next" aria-label="Next testimonial"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m9 6 6 6-6 6"/></svg></button>
    </div>
  </div>
</section>

Built on Bootstrap 5.3.8 with plain JavaScript — no jQuery. Supports light and dark mode via data-bs-theme.

Related snippets

More Carousel snippets