<div class="container py-5" style="max-width:560px">
  <div id="bstestiCarousel" class="carousel slide" data-bs-ride="false">
    <div class="carousel-inner">
      <div class="carousel-item active">
        <div class="card bstesti-card"><div class="card-body text-center">
          <div class="bstesti-stars">★★★★★</div>
          <p class="bstesti-quote">"Cut our onboarding time from two weeks to two days. The whole team adopted it in a single sprint."</p>
          <strong>Dana Reyes</strong><div class="text-muted small">Head of Ops, Fenwick</div>
        </div></div>
      </div>
      <div class="carousel-item">
        <div class="card bstesti-card"><div class="card-body text-center">
          <div class="bstesti-stars">★★★★★</div>
          <p class="bstesti-quote">"Support responded in minutes, not days. That alone justified switching."</p>
          <strong>Priya Nair</strong><div class="text-muted small">CTO, Loomis</div>
        </div></div>
      </div>
      <div class="carousel-item">
        <div class="card bstesti-card"><div class="card-body text-center">
          <div class="bstesti-stars">★★★★☆</div>
          <p class="bstesti-quote">"The API is exactly what you'd hope for — predictable, well documented, no surprises."</p>
          <strong>Marcus Chen</strong><div class="text-muted small">Lead Engineer, Voxel</div>
        </div></div>
      </div>
    </div>
    <button class="carousel-control-prev" type="button" data-bs-target="#bstestiCarousel" data-bs-slide="prev">
      <span class="carousel-control-prev-icon"></span>
    </button>
    <button class="carousel-control-next" type="button" data-bs-target="#bstestiCarousel" data-bs-slide="next">
      <span class="carousel-control-next-icon"></span>
    </button>
    <div class="carousel-indicators bstesti-dots position-relative mt-3">
      <button type="button" data-bs-target="#bstestiCarousel" data-bs-slide-to="0" class="active"></button>
      <button type="button" data-bs-target="#bstestiCarousel" data-bs-slide-to="1"></button>
      <button type="button" data-bs-target="#bstestiCarousel" data-bs-slide-to="2"></button>
    </div>
  </div>
</div>

.bstesti-card { border: 1px solid #eceef1; border-radius: 14px; min-height: 220px; }
.bstesti-stars { color: #f59e0b; font-size: 15px; margin-bottom: 10px; }
.bstesti-quote { font-size: 16px; color: #1f2937; margin-bottom: 16px; }
.carousel-control-prev, .carousel-control-next { width: 5%; filter: invert(1); opacity: .5; }
.bstesti-dots button { background-color: #d1d5db; width: 7px; height: 7px; border-radius: 50%; }
.bstesti-dots button.active { background-color: #6366f1; }

// Bootstrap's own Carousel component handles all sliding and indicator
// sync via data-bs-* attributes — data-bs-ride="false" keeps it from
// auto-advancing, since testimonials should stay until manually browsed.
const carousel = bootstrap.Carousel.getOrCreateInstance(document.getElementById('bstestiCarousel'), { ride: false });