Bootstrap 5 Testimonial Slider for Vanilla JS

<!-- Requires Bootstrap 5.3 CSS + theme.css:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="theme.css"> -->
<section class="px-4 py-5" aria-roledescription="carousel" aria-label="Customer testimonials">
  <div class="mw-2xl mx-auto text-center">
    <span class="badge rounded-pill bg-brand-subtle text-brand">Loved by teams</span>
    <div class="mt-4 p-5 bg-body border shadow-sm rounded-3">
      <figure data-when="slide:1">
        <blockquote class="fs-5 fw-medium lh-lg text-body-emphasis">“We shipped our new checkout in a single afternoon. Conversion went up 18% the same week.”</blockquote>
        <figcaption class="mt-4 small text-body-secondary"><strong>Priya Sharma</strong> · Head of Growth, Kartly</figcaption>
      </figure>
      <figure data-when="slide:2" hidden>
        <blockquote class="fs-5 fw-medium lh-lg text-body-emphasis">“The components are clean, accessible and they just work with our design tokens.”</blockquote>
        <figcaption class="mt-4 small text-body-secondary"><strong>Daniel Okafor</strong> · Staff Engineer, Lumen</figcaption>
      </figure>
      <figure data-when="slide:3" hidden>
        <blockquote class="fs-5 fw-medium lh-lg text-body-emphasis">“Dark mode and theming out of the box saved us weeks of design back-and-forth.”</blockquote>
        <figcaption class="mt-4 small text-body-secondary"><strong>Mia Fischer</strong> · Product Designer, Northwind</figcaption>
      </figure>
    </div>
    <div class="mt-4 d-flex justify-content-center gap-2" role="group" aria-label="Choose testimonial">
      <button type="button" class="btn btn-outline-secondary choice fw-semibold rounded-2" data-set="slide:1" data-pressed="slide:1" aria-pressed="true" aria-label="Show testimonial 1">1</button>
      <button type="button" class="btn btn-outline-secondary choice fw-semibold rounded-2" data-set="slide:2" data-pressed="slide:2" aria-pressed="false" aria-label="Show testimonial 2">2</button>
      <button type="button" class="btn btn-outline-secondary choice fw-semibold rounded-2" data-set="slide:3" data-pressed="slide:3" aria-pressed="false" aria-label="Show testimonial 3">3</button>
    </div>
  </div>
</section>

<script>
  (() => {
    const state = { slide: "1" };
    const actions = {  };
    const pair = (s) => s.split(':');
    const sync = () => {
      document.querySelectorAll('[data-show]').forEach((el) => (el.hidden = !state[el.dataset.show]));
      document.querySelectorAll('[data-hide]').forEach((el) => (el.hidden = !!state[el.dataset.hide]));
      document.querySelectorAll('[data-when]').forEach((el) => { const [k, v] = pair(el.dataset.when); el.hidden = state[k] !== v; });
      document.querySelectorAll('[data-pressed]').forEach((el) => { const [k, v] = pair(el.dataset.pressed); el.setAttribute('aria-pressed', String(state[k] === v)); });
      document.querySelectorAll('[data-expanded]').forEach((el) => el.setAttribute('aria-expanded', String(!!state[el.dataset.expanded])));
    };
    document.addEventListener('click', (e) => {
      const t = e.target.closest('[data-toggle],[data-open],[data-close],[data-set],[data-call]');
      if (!t) return;
      const { toggle, open, close, set, call } = t.dataset;
      if (call) actions[call]?.(e);
      if (toggle) state[toggle] = !state[toggle];
      if (open) state[open] = true;
      if (close) state[close] = false;
      if (set) { const [k, v] = pair(set); state[k] = v; }
      sync();
    });
    sync();
  })();
</script>

/* theme.css — brand color #4f46e5 for Bootstrap 5.3 */
:root { --brand: #4f46e5; --brand-hover: #433cc3; --brand-rgb: 79, 70, 229; --brand-contrast: #ffffff; }
.btn-brand {
  --bs-btn-color: var(--brand-contrast); --bs-btn-bg: var(--brand); --bs-btn-border-color: var(--brand);
  --bs-btn-hover-color: var(--brand-contrast); --bs-btn-hover-bg: var(--brand-hover); --bs-btn-hover-border-color: var(--brand-hover);
  --bs-btn-active-color: var(--brand-contrast); --bs-btn-active-bg: var(--brand-hover); --bs-btn-active-border-color: var(--brand-hover);
  --bs-btn-focus-shadow-rgb: var(--brand-rgb);
}
.text-brand { color: var(--brand) !important; }
.border-brand { border: 2px solid var(--brand) !important; }
.bg-brand-subtle { background-color: rgba(var(--brand-rgb), .12) !important; }
.form-control:focus, .form-check-input:focus { border-color: var(--brand); box-shadow: 0 0 0 .25rem rgba(var(--brand-rgb), .25); }
.form-check-input:checked { background-color: var(--brand); border-color: var(--brand); }
.overlay { background: rgba(15, 23, 42, .5); backdrop-filter: blur(4px); z-index: 1050; }
.choice[aria-pressed="true"] { border-color: var(--brand) !important; color: var(--brand) !important; box-shadow: 0 0 0 .2rem rgba(var(--brand-rgb), .2); }
.mw-sm { max-width: 24rem; } .mw-md { max-width: 28rem; } .mw-lg { max-width: 32rem; } .mw-xl { max-width: 36rem; }
.mw-2xl { max-width: 42rem; } .mw-4xl { max-width: 56rem; } .mw-6xl { max-width: 72rem; }