25 CSS Testimonials & Reviews04 / 25

Light JSMIT licensed

Testimonial Carousel with Snap Scroll & Dots

A carousel with no library, no transform maths and no index state — the browser's own scroll container is the source of truth. Where the new CSS carousel primitives are supported (::scroll-marker and ::scroll-button()) the dots and arrows are generated by CSS itself; everywhere else a 12-line script mirrors the same behaviour from scroll position.

Published

Live Demo
Try it

The code

<section class="tr-04" aria-label="Testimonial carousel with snap scroll and dots demo">
  <div class="tr-04__stage">
    <header class="tr-04__head">
      <p class="tr-04__eyebrow">Customer stories</p>
      <h2 class="tr-04__title">Swipe, drag, or use the arrow keys</h2>
    </header>

    <div class="tr-04__wrap">
      <button class="tr-04__nav" type="button" data-dir="-1" aria-label="Previous testimonial">
        <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M15 5l-7 7 7 7" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
      </button>

      <div class="tr-04__track" tabindex="0" role="group" aria-label="Testimonials, scrollable">
        <figure class="tr-04__slide">
          <span class="tr-04__mark" aria-hidden="true">“</span>
          <blockquote>We moved twelve years of scheduling onto this in one sprint. The part nobody believes is that support answered every question before we finished asking it.</blockquote>
          <figcaption>
            <img src="https://images.unsplash.com/photo-1573497019940-1c28c88b4f3e?q=80&w=120&h=120&fit=crop&auto=format" alt="Portrait of Alessandra Rossi" width="46" height="46" loading="lazy" decoding="async">
            <span><b>Alessandra Rossi</b>CTO · Vaultline Financial</span>
          </figcaption>
        </figure>
        <figure class="tr-04__slide">
          <span class="tr-04__mark" aria-hidden="true">“</span>
          <blockquote>Our churn model finally has data it can trust. Two analysts now do what six were doing, and they leave at five.</blockquote>
          <figcaption>
            <img src="https://images.unsplash.com/photo-1506794778202-cad84cf45f1d?q=80&w=120&h=120&fit=crop&auto=format" alt="Portrait of Marcus Yeung" width="46" height="46" loading="lazy" decoding="async">
            <span><b>Marcus Yeung</b>Director of Risk · Halden Group</span>
          </figcaption>
        </figure>
        <figure class="tr-04__slide">
          <span class="tr-04__mark" aria-hidden="true">“</span>
          <blockquote>I have bought a lot of software that promised to remove a meeting. This is the first one that actually did it, and it did it in week one.</blockquote>
          <figcaption>
            <img src="https://images.unsplash.com/photo-1517841905240-472988babdf9?q=80&w=120&h=120&fit=crop&auto=format" alt="Portrait of Grace Whitlock" width="46" height="46" loading="lazy" decoding="async">
            <span><b>Grace Whitlock</b>Design Systems Lead · Auryn</span>
          </figcaption>
        </figure>
        <figure class="tr-04__slide">
          <span class="tr-04__mark" aria-hidden="true">“</span>
          <blockquote>Procurement asked for three references. We gave them nine, unprompted, from teams who volunteered.</blockquote>
          <figcaption>
            <img src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?q=80&w=120&h=120&fit=crop&auto=format" alt="Portrait of Dan Reyes" width="46" height="46" loading="lazy" decoding="async">
            <span><b>Dan Reyes</b>VP Infrastructure · Portside</span>
          </figcaption>
        </figure>
        <figure class="tr-04__slide">
          <span class="tr-04__mark" aria-hidden="true">“</span>
          <blockquote>The migration guide was so good we used it as an internal training doc. That has never happened here.</blockquote>
          <figcaption>
            <img src="https://images.unsplash.com/photo-1544005313-94ddf0286df2?q=80&w=120&h=120&fit=crop&auto=format" alt="Portrait of Hana Sørensen" width="46" height="46" loading="lazy" decoding="async">
            <span><b>Hana Sørensen</b>Product Manager · Blomst</span>
          </figcaption>
        </figure>
      </div>

      <button class="tr-04__nav" type="button" data-dir="1" aria-label="Next testimonial">
        <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M9 5l7 7-7 7" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
      </button>
    </div>

    <div class="tr-04__dots" role="tablist" aria-label="Choose a testimonial"></div>
    <p class="tr-04__chip" aria-hidden="true">scroll-snap-type:x mandatory · scroll-snap-stop:always · ::scroll-marker · JS fallback dots</p>
  </div>
</section>
.tr-04,
.tr-04 *,
.tr-04 *::before,
.tr-04 *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.tr-04 {
  width: 100%;
  min-height: 100vh;
  min-height: 100svh;
  display: block;
  --tr-04-bg: oklch(0.19 0.03 285);
  --tr-04-card: oklch(0.25 0.035 285);
  --tr-04-ink: oklch(0.97 0.006 280);
  --tr-04-mut: oklch(0.72 0.02 285);
  --tr-04-acc: oklch(0.78 0.15 195);
  background: var(--tr-04-bg);
  color: var(--tr-04-ink);
  font-family: 'Segoe UI',system-ui,-apple-system,sans-serif;
  -webkit-font-smoothing: antialiased;
}

.tr-04__stage {
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  grid-template-columns: minmax(0,1fr);
  place-items: center;
  align-content: center;
  gap: clamp(18px,3vw,30px);
  padding: clamp(20px,4vw,56px) 0;
  background: radial-gradient(90% 60% at 50% 0%,color-mix(in oklch,var(--tr-04-acc) 13%,transparent),transparent 65%);
}

.tr-04__head {
  text-align: center;
  display: grid;
  gap: 10px;
  padding-inline: 20px;
}

.tr-04__eyebrow {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--tr-04-acc);
}

.tr-04__title {
  font-size: clamp(24px,4vw,42px);
  font-weight: 670;
  letter-spacing: -.035em;
  line-height: 1.1;
  text-wrap: balance;
}

.tr-04__wrap {
  position: relative;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
}

.tr-04__nav {
  position: absolute;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid oklch(1 0 0/.16);
  background: color-mix(in oklch,var(--tr-04-card) 82%,transparent);
  color: var(--tr-04-ink);
  cursor: pointer;
  backdrop-filter: blur(10px);
  transition: background .22s,scale .22s cubic-bezier(.16,1,.3,1),opacity .22s;
}

.tr-04__nav[data-dir='-1'] {
  inset-inline-start: clamp(8px,2vw,26px);
}

.tr-04__nav[data-dir='1'] {
  inset-inline-end: clamp(8px,2vw,26px);
}

.tr-04__nav svg {
  width: 22px;
  height: 22px;
}

.tr-04__nav:hover {
  background: var(--tr-04-acc);
  color: oklch(0.2 0.03 200);
  scale: 1.06;
}

.tr-04__nav:focus-visible {
  outline: 3px solid var(--tr-04-acc);
  outline-offset: 3px;
}

.tr-04__nav[disabled] {
  opacity: .32;
  pointer-events: none;
}

.tr-04__track {
  display: flex;
  gap: clamp(14px,2vw,22px);
  width: 100%;
  min-width: 0;
  max-width: 100%;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scroll-padding-inline: clamp(16px,8vw,140px);
  padding: 10px clamp(16px,8vw,140px) 22px;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
}

.tr-04__track::-webkit-scrollbar {
  display: none;
}

.tr-04__track:focus-visible {
  outline: 3px solid var(--tr-04-acc);
  outline-offset: -6px;
  border-radius: 24px;
}

.tr-04__slide {
  flex: 0 0 min(84%,460px);
  scroll-snap-align: center;
  scroll-snap-stop: always;
  position: relative;
  display: grid;
  align-content: space-between;
  gap: 22px;
  padding: clamp(24px,3vw,34px);
  border-radius: 22px;
  background: linear-gradient(165deg,color-mix(in oklch,var(--tr-04-acc) 9%,var(--tr-04-card)),var(--tr-04-card) 62%);
  border: 1px solid oklch(1 0 0/.1);
  box-shadow: 0 30px 60px -36px oklch(0 0 0/.9);
  transition: scale .45s cubic-bezier(.16,1,.3,1),border-color .45s;
}

.tr-04__slide:hover {
  border-color: color-mix(in oklch,var(--tr-04-acc) 42%,transparent);
}

.tr-04__mark {
  position: absolute;
  inset-block-start: 6px;
  inset-inline-end: 20px;
  font-family: Georgia,'Times New Roman',serif;
  font-size: 110px;
  line-height: 1;
  color: color-mix(in oklch,var(--tr-04-acc) 22%,transparent);
  pointer-events: none;
}

.tr-04__slide blockquote {
  font-size: clamp(16px,2vw,20px);
  line-height: 1.5;
  letter-spacing: -.02em;
  text-wrap: pretty;
}

.tr-04__slide figcaption {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-top: 18px;
  border-top: 1px solid oklch(1 0 0/.11);
}

.tr-04__slide figcaption img {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  object-fit: cover;
  flex: none;
  background: oklch(0.4 0.05 285);
}

.tr-04__slide figcaption span {
  display: grid;
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--tr-04-mut);
}

.tr-04__slide figcaption b {
  font-size: 14.5px;
  font-weight: 640;
  color: var(--tr-04-ink);
  letter-spacing: -.012em;
}

.tr-04__dots {
  display: flex;
  gap: 9px;
  align-items: center;
  justify-content: center;
  min-height: 44px;
}

.tr-04__dot {
  width: 9px;
  height: 9px;
  padding: 0;
  border: 0;
  border-radius: 99px;
  background: oklch(1 0 0/.26);
  cursor: pointer;
  transition: inline-size .3s cubic-bezier(.16,1,.3,1),background .3s;
}

.tr-04__dot[aria-selected='true'] {
  inline-size: 30px;
  background: var(--tr-04-acc);
}

.tr-04__dot:focus-visible {
  outline: 3px solid var(--tr-04-acc);
  outline-offset: 4px;
}

.tr-04__dotbtn {
  position: relative;
  display: grid;
  place-items: center;
  width: 26px;
  height: 44px;
  background: none;
  border: 0;
  cursor: pointer;
}

.tr-04__chip {
  font-family: ui-monospace,Menlo,Consolas,monospace;
  font-size: 11.5px;
  color: var(--tr-04-mut);
  padding: 8px 15px;
  border: 1px solid oklch(1 0 0/.13);
  border-radius: 99px;
  text-align: center;
  margin-inline: 16px;
}

@supports (selector(::scroll-marker)) {
  .tr-04__dots {
    display: none;
  }

  .tr-04__track {
    scroll-marker-group: after;
    anchor-name: --tr-04-track;
  }

  .tr-04__track::scroll-marker-group {
    display: flex;
    gap: 9px;
    justify-content: center;
    padding-block: 14px;
  }

  .tr-04__slide::scroll-marker {
    content: '';
    width: 9px;
    height: 9px;
    border-radius: 99px;
    background: oklch(1 0 0/.26);
    cursor: pointer;
    transition: inline-size .3s cubic-bezier(.16,1,.3,1),background .3s;
  }

  .tr-04__slide::scroll-marker:target-current {
    inline-size: 30px;
    background: var(--tr-04-acc);
  }
}

@media (prefers-reduced-motion: reduce) {
  .tr-04__track {
    scroll-behavior: auto;
  }

  .tr-04__nav,
    .tr-04__slide {
    transition: none;
  }
}
(() => {
  document.querySelectorAll('.tr-04').forEach((root) => {
    if (root.dataset.wired) return;
    root.dataset.wired = '1';
    const track = root.querySelector('.tr-04__track');
    const slides = [...root.querySelectorAll('.tr-04__slide')];
    const dots = root.querySelector('.tr-04__dots');
    const native = CSS.supports('selector(::scroll-marker)');
    const step = () => (slides[1] ? slides[1].offsetLeft - slides[0].offsetLeft : track.clientWidth);

    root.querySelectorAll('.tr-04__nav').forEach((b) =>
      b.addEventListener('click', () => track.scrollBy({ left: step() * Number(b.dataset.dir), behavior: 'smooth' })));

    if (!native) {
      slides.forEach((s, i) => {
        const wrap = document.createElement('button');
        wrap.type = 'button'; wrap.className = 'tr-04__dotbtn'; wrap.role = 'tab';
        wrap.setAttribute('aria-label', 'Testimonial ' + (i + 1) + ' of ' + slides.length);
        wrap.setAttribute('aria-selected', i === 0 ? 'true' : 'false');
        const dot = document.createElement('span'); dot.className = 'tr-04__dot';
        if (i === 0) dot.setAttribute('aria-selected', 'true');
        wrap.append(dot);
        wrap.addEventListener('click', () => track.scrollTo({ left: s.offsetLeft - (track.clientWidth - s.clientWidth) / 2, behavior: 'smooth' }));
        dots.append(wrap);
      });
    }

    const sync = () => {
      const mid = track.scrollLeft + track.clientWidth / 2;
      let best = 0, d = Infinity;
      slides.forEach((s, i) => {
        const c = Math.abs(s.offsetLeft + s.clientWidth / 2 - mid);
        if (c < d) { d = c; best = i; }
      });
      [...dots.children].forEach((b, i) => {
        b.setAttribute('aria-selected', String(i === best));
        b.firstChild.toggleAttribute('data-on', i === best);
        b.firstChild.setAttribute('aria-selected', String(i === best));
      });
      root.querySelector('[data-dir="-1"]').disabled = track.scrollLeft < 8;
      root.querySelector('[data-dir="1"]').disabled = track.scrollLeft > track.scrollWidth - track.clientWidth - 8;
    };
    track.addEventListener('scroll', () => { cancelAnimationFrame(track._r); track._r = requestAnimationFrame(sync); }, { passive: true });
    sync();
  });
})();
Paste this into ChatGPT, Claude, Cursor, or any coding assistant. The block below is pre-framed with everything the AI needs to integrate this demo into your project — markup, styles, scoping notes, and the source URL. Hit Copy and paste straight into your chat.
Here's a working CSS Testimonials & Review from CodeFronts. Use it as-is or adapt to your framework. All classes are scoped under a unique prefix so the code won't collide with your existing styles. MIT licensed.
Demo: Testimonial Carousel with Snap Scroll & Dots
Source: https://codefronts.com/components/css-testimonials-reviews/testimonial-carousel-with-snap-scroll-and-dots/

A carousel with no library, no transform maths and no index state — the browser's own scroll container is the source of truth. Where the new CSS carousel primitives are supported (::scroll-marker and ::scroll-button()) the dots and arrows are generated by CSS itself; everywhere else a 12-line script mirrors the same behaviour from scroll position.
## HTML
```html
<section class="tr-04" aria-label="Testimonial carousel with snap scroll and dots demo">
  <div class="tr-04__stage">
    <header class="tr-04__head">
      <p class="tr-04__eyebrow">Customer stories</p>
      <h2 class="tr-04__title">Swipe, drag, or use the arrow keys</h2>
    </header>

    <div class="tr-04__wrap">
      <button class="tr-04__nav" type="button" data-dir="-1" aria-label="Previous testimonial">
        <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M15 5l-7 7 7 7" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
      </button>

      <div class="tr-04__track" tabindex="0" role="group" aria-label="Testimonials, scrollable">
        <figure class="tr-04__slide">
          <span class="tr-04__mark" aria-hidden="true">“</span>
          <blockquote>We moved twelve years of scheduling onto this in one sprint. The part nobody believes is that support answered every question before we finished asking it.</blockquote>
          <figcaption>
            <img src="https://images.unsplash.com/photo-1573497019940-1c28c88b4f3e?q=80&w=120&h=120&fit=crop&auto=format" alt="Portrait of Alessandra Rossi" width="46" height="46" loading="lazy" decoding="async">
            <span><b>Alessandra Rossi</b>CTO · Vaultline Financial</span>
          </figcaption>
        </figure>
        <figure class="tr-04__slide">
          <span class="tr-04__mark" aria-hidden="true">“</span>
          <blockquote>Our churn model finally has data it can trust. Two analysts now do what six were doing, and they leave at five.</blockquote>
          <figcaption>
            <img src="https://images.unsplash.com/photo-1506794778202-cad84cf45f1d?q=80&w=120&h=120&fit=crop&auto=format" alt="Portrait of Marcus Yeung" width="46" height="46" loading="lazy" decoding="async">
            <span><b>Marcus Yeung</b>Director of Risk · Halden Group</span>
          </figcaption>
        </figure>
        <figure class="tr-04__slide">
          <span class="tr-04__mark" aria-hidden="true">“</span>
          <blockquote>I have bought a lot of software that promised to remove a meeting. This is the first one that actually did it, and it did it in week one.</blockquote>
          <figcaption>
            <img src="https://images.unsplash.com/photo-1517841905240-472988babdf9?q=80&w=120&h=120&fit=crop&auto=format" alt="Portrait of Grace Whitlock" width="46" height="46" loading="lazy" decoding="async">
            <span><b>Grace Whitlock</b>Design Systems Lead · Auryn</span>
          </figcaption>
        </figure>
        <figure class="tr-04__slide">
          <span class="tr-04__mark" aria-hidden="true">“</span>
          <blockquote>Procurement asked for three references. We gave them nine, unprompted, from teams who volunteered.</blockquote>
          <figcaption>
            <img src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?q=80&w=120&h=120&fit=crop&auto=format" alt="Portrait of Dan Reyes" width="46" height="46" loading="lazy" decoding="async">
            <span><b>Dan Reyes</b>VP Infrastructure · Portside</span>
          </figcaption>
        </figure>
        <figure class="tr-04__slide">
          <span class="tr-04__mark" aria-hidden="true">“</span>
          <blockquote>The migration guide was so good we used it as an internal training doc. That has never happened here.</blockquote>
          <figcaption>
            <img src="https://images.unsplash.com/photo-1544005313-94ddf0286df2?q=80&w=120&h=120&fit=crop&auto=format" alt="Portrait of Hana Sørensen" width="46" height="46" loading="lazy" decoding="async">
            <span><b>Hana Sørensen</b>Product Manager · Blomst</span>
          </figcaption>
        </figure>
      </div>

      <button class="tr-04__nav" type="button" data-dir="1" aria-label="Next testimonial">
        <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M9 5l7 7-7 7" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
      </button>
    </div>

    <div class="tr-04__dots" role="tablist" aria-label="Choose a testimonial"></div>
    <p class="tr-04__chip" aria-hidden="true">scroll-snap-type:x mandatory · scroll-snap-stop:always · ::scroll-marker · JS fallback dots</p>
  </div>
</section>
```
## CSS
```css
.tr-04,
.tr-04 *,
.tr-04 *::before,
.tr-04 *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.tr-04 {
  width: 100%;
  min-height: 100vh;
  min-height: 100svh;
  display: block;
  --tr-04-bg: oklch(0.19 0.03 285);
  --tr-04-card: oklch(0.25 0.035 285);
  --tr-04-ink: oklch(0.97 0.006 280);
  --tr-04-mut: oklch(0.72 0.02 285);
  --tr-04-acc: oklch(0.78 0.15 195);
  background: var(--tr-04-bg);
  color: var(--tr-04-ink);
  font-family: 'Segoe UI',system-ui,-apple-system,sans-serif;
  -webkit-font-smoothing: antialiased;
}

.tr-04__stage {
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  grid-template-columns: minmax(0,1fr);
  place-items: center;
  align-content: center;
  gap: clamp(18px,3vw,30px);
  padding: clamp(20px,4vw,56px) 0;
  background: radial-gradient(90% 60% at 50% 0%,color-mix(in oklch,var(--tr-04-acc) 13%,transparent),transparent 65%);
}

.tr-04__head {
  text-align: center;
  display: grid;
  gap: 10px;
  padding-inline: 20px;
}

.tr-04__eyebrow {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--tr-04-acc);
}

.tr-04__title {
  font-size: clamp(24px,4vw,42px);
  font-weight: 670;
  letter-spacing: -.035em;
  line-height: 1.1;
  text-wrap: balance;
}

.tr-04__wrap {
  position: relative;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
}

.tr-04__nav {
  position: absolute;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid oklch(1 0 0/.16);
  background: color-mix(in oklch,var(--tr-04-card) 82%,transparent);
  color: var(--tr-04-ink);
  cursor: pointer;
  backdrop-filter: blur(10px);
  transition: background .22s,scale .22s cubic-bezier(.16,1,.3,1),opacity .22s;
}

.tr-04__nav[data-dir='-1'] {
  inset-inline-start: clamp(8px,2vw,26px);
}

.tr-04__nav[data-dir='1'] {
  inset-inline-end: clamp(8px,2vw,26px);
}

.tr-04__nav svg {
  width: 22px;
  height: 22px;
}

.tr-04__nav:hover {
  background: var(--tr-04-acc);
  color: oklch(0.2 0.03 200);
  scale: 1.06;
}

.tr-04__nav:focus-visible {
  outline: 3px solid var(--tr-04-acc);
  outline-offset: 3px;
}

.tr-04__nav[disabled] {
  opacity: .32;
  pointer-events: none;
}

.tr-04__track {
  display: flex;
  gap: clamp(14px,2vw,22px);
  width: 100%;
  min-width: 0;
  max-width: 100%;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scroll-padding-inline: clamp(16px,8vw,140px);
  padding: 10px clamp(16px,8vw,140px) 22px;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
}

.tr-04__track::-webkit-scrollbar {
  display: none;
}

.tr-04__track:focus-visible {
  outline: 3px solid var(--tr-04-acc);
  outline-offset: -6px;
  border-radius: 24px;
}

.tr-04__slide {
  flex: 0 0 min(84%,460px);
  scroll-snap-align: center;
  scroll-snap-stop: always;
  position: relative;
  display: grid;
  align-content: space-between;
  gap: 22px;
  padding: clamp(24px,3vw,34px);
  border-radius: 22px;
  background: linear-gradient(165deg,color-mix(in oklch,var(--tr-04-acc) 9%,var(--tr-04-card)),var(--tr-04-card) 62%);
  border: 1px solid oklch(1 0 0/.1);
  box-shadow: 0 30px 60px -36px oklch(0 0 0/.9);
  transition: scale .45s cubic-bezier(.16,1,.3,1),border-color .45s;
}

.tr-04__slide:hover {
  border-color: color-mix(in oklch,var(--tr-04-acc) 42%,transparent);
}

.tr-04__mark {
  position: absolute;
  inset-block-start: 6px;
  inset-inline-end: 20px;
  font-family: Georgia,'Times New Roman',serif;
  font-size: 110px;
  line-height: 1;
  color: color-mix(in oklch,var(--tr-04-acc) 22%,transparent);
  pointer-events: none;
}

.tr-04__slide blockquote {
  font-size: clamp(16px,2vw,20px);
  line-height: 1.5;
  letter-spacing: -.02em;
  text-wrap: pretty;
}

.tr-04__slide figcaption {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-top: 18px;
  border-top: 1px solid oklch(1 0 0/.11);
}

.tr-04__slide figcaption img {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  object-fit: cover;
  flex: none;
  background: oklch(0.4 0.05 285);
}

.tr-04__slide figcaption span {
  display: grid;
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--tr-04-mut);
}

.tr-04__slide figcaption b {
  font-size: 14.5px;
  font-weight: 640;
  color: var(--tr-04-ink);
  letter-spacing: -.012em;
}

.tr-04__dots {
  display: flex;
  gap: 9px;
  align-items: center;
  justify-content: center;
  min-height: 44px;
}

.tr-04__dot {
  width: 9px;
  height: 9px;
  padding: 0;
  border: 0;
  border-radius: 99px;
  background: oklch(1 0 0/.26);
  cursor: pointer;
  transition: inline-size .3s cubic-bezier(.16,1,.3,1),background .3s;
}

.tr-04__dot[aria-selected='true'] {
  inline-size: 30px;
  background: var(--tr-04-acc);
}

.tr-04__dot:focus-visible {
  outline: 3px solid var(--tr-04-acc);
  outline-offset: 4px;
}

.tr-04__dotbtn {
  position: relative;
  display: grid;
  place-items: center;
  width: 26px;
  height: 44px;
  background: none;
  border: 0;
  cursor: pointer;
}

.tr-04__chip {
  font-family: ui-monospace,Menlo,Consolas,monospace;
  font-size: 11.5px;
  color: var(--tr-04-mut);
  padding: 8px 15px;
  border: 1px solid oklch(1 0 0/.13);
  border-radius: 99px;
  text-align: center;
  margin-inline: 16px;
}

@supports (selector(::scroll-marker)) {
  .tr-04__dots {
    display: none;
  }

  .tr-04__track {
    scroll-marker-group: after;
    anchor-name: --tr-04-track;
  }

  .tr-04__track::scroll-marker-group {
    display: flex;
    gap: 9px;
    justify-content: center;
    padding-block: 14px;
  }

  .tr-04__slide::scroll-marker {
    content: '';
    width: 9px;
    height: 9px;
    border-radius: 99px;
    background: oklch(1 0 0/.26);
    cursor: pointer;
    transition: inline-size .3s cubic-bezier(.16,1,.3,1),background .3s;
  }

  .tr-04__slide::scroll-marker:target-current {
    inline-size: 30px;
    background: var(--tr-04-acc);
  }
}

@media (prefers-reduced-motion: reduce) {
  .tr-04__track {
    scroll-behavior: auto;
  }

  .tr-04__nav,
    .tr-04__slide {
    transition: none;
  }
}
```

## JavaScript
```js
(() => {
  document.querySelectorAll('.tr-04').forEach((root) => {
    if (root.dataset.wired) return;
    root.dataset.wired = '1';
    const track = root.querySelector('.tr-04__track');
    const slides = [...root.querySelectorAll('.tr-04__slide')];
    const dots = root.querySelector('.tr-04__dots');
    const native = CSS.supports('selector(::scroll-marker)');
    const step = () => (slides[1] ? slides[1].offsetLeft - slides[0].offsetLeft : track.clientWidth);

    root.querySelectorAll('.tr-04__nav').forEach((b) =>
      b.addEventListener('click', () => track.scrollBy({ left: step() * Number(b.dataset.dir), behavior: 'smooth' })));

    if (!native) {
      slides.forEach((s, i) => {
        const wrap = document.createElement('button');
        wrap.type = 'button'; wrap.className = 'tr-04__dotbtn'; wrap.role = 'tab';
        wrap.setAttribute('aria-label', 'Testimonial ' + (i + 1) + ' of ' + slides.length);
        wrap.setAttribute('aria-selected', i === 0 ? 'true' : 'false');
        const dot = document.createElement('span'); dot.className = 'tr-04__dot';
        if (i === 0) dot.setAttribute('aria-selected', 'true');
        wrap.append(dot);
        wrap.addEventListener('click', () => track.scrollTo({ left: s.offsetLeft - (track.clientWidth - s.clientWidth) / 2, behavior: 'smooth' }));
        dots.append(wrap);
      });
    }

    const sync = () => {
      const mid = track.scrollLeft + track.clientWidth / 2;
      let best = 0, d = Infinity;
      slides.forEach((s, i) => {
        const c = Math.abs(s.offsetLeft + s.clientWidth / 2 - mid);
        if (c < d) { d = c; best = i; }
      });
      [...dots.children].forEach((b, i) => {
        b.setAttribute('aria-selected', String(i === best));
        b.firstChild.toggleAttribute('data-on', i === best);
        b.firstChild.setAttribute('aria-selected', String(i === best));
      });
      root.querySelector('[data-dir="-1"]').disabled = track.scrollLeft < 8;
      root.querySelector('[data-dir="1"]').disabled = track.scrollLeft > track.scrollWidth - track.clientWidth - 8;
    };
    track.addEventListener('scroll', () => { cancelAnimationFrame(track._r); track._r = requestAnimationFrame(sync); }, { passive: true });
    sync();
  });
})();
```

How this works

The track is an overflow container with mandatory snapping, and each slide declares where it should come to rest:

.track {
  display: flex; gap: 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: 24px;   /* respects the peek */
}
.slide { flex: 0 0 min(88%, 460px); scroll-snap-align: center; }

That is the entire slider. Momentum, touch, trackpad, keyboard arrows and scroll-behavior: smooth all come free because it is a real scroller, not a simulated one.

The 2026-era upgrade turns the dots into CSS:

.track { scroll-marker-group: after; }
.slide::scroll-marker { content: ''; width: 10px; height: 10px;
  border-radius: 50%; background: var(--mut); }
.slide::scroll-marker:target-current { background: var(--acc); }
.track::scroll-button(right) { content: '→'; }

These pseudo-elements are focusable, keyboard-navigable and announced as a tab list by the browser — the accessibility work that carousel libraries spend hundreds of lines on. The JS fallback (used only when CSS.supports('selector(::scroll-marker)') is false) sets aria-current on real <button> dots from a scroll listener and calls scrollIntoView({inline:'center'}) on click.

Slides keep scroll-snap-stop: always so a fast flick advances exactly one testimonial instead of skidding past three — the single most-missed property in hand-rolled sliders.

Make it yours

  • One-up on mobile, three-up on desktop: change nothing but the slide basis — flex: 0 0 min(88%, 460px) → calc(33.333% - 14px) inside a media query.
  • Add a peek of the next card by giving the track scroll-padding-inline and the slides a smaller basis; the snap point stays centred.
  • Auto-advance responsibly: a setInterval that calls scrollBy, cancelled on pointerdown, focusin and when matchMedia('(prefers-reduced-motion: reduce)') matches.
  • Vertical testimonials? Swap to scroll-snap-type: y mandatory and flex-direction: column — everything else, including the markers, works unchanged.

Gotchas — read before shipping

  • scroll-snap-type: x mandatory can trap users if a slide is taller than the scrollport. Use proximity when slide heights are unpredictable.
  • Hiding the scrollbar with scrollbar-width: none removes the only visible affordance — always ship dots or arrows alongside it.
  • Without scroll-snap-stop: always, a hard swipe skips slides; users then think content is missing.
  • Do not put aria-live on the track. A carousel that announces every slide during a scroll is unusable; mark the dots with aria-current instead.
  • scroll-behavior: smooth should be gated behind prefers-reduced-motion; vestibular-sensitive users experience long smooth scrolls as motion sickness.

Browser support

ChromeSafariFirefoxEdge
135+26+144+135+

CSS scroll snap itself is universal (Chrome 69, Safari 11, Firefox 68). ::scroll-marker / ::scroll-button() carousel pseudo-elements ship in Chrome 135+ and are rolling out elsewhere; the feature-detected JS fallback keeps identical behaviour in every other browser.

Search CodeFronts

Loading…

↑↓ navigate↵ selectesc closeOpen full search page →