ライブラリなしで横に流して見せる

<!-- 横並びの一覧なので ul にする。見た目のためだけの div ではなく、
     「5件の並び」であることを構造で伝える。 -->
<ul class="rail" style="list-style: none; margin: 0; padding-left: 0;">
  <li class="slide">
    <div class="slide-shot sw-a"></div>
    <div class="slide-body">
      <h3 class="slide-title">スナップは指定するだけ</h3>
      <p class="slide-text">位置の計算も慣性の再現も要りません。ブラウザのスクロールをそのまま使います。</p>
    </div>
  </li>
  <li class="slide">
    <div class="slide-shot sw-b"></div>
    <div class="slide-body">
      <h3 class="slide-title">縮まないようにする</h3>
      <p class="slide-text">flex: 0 0 auto を忘れると全部が1画面に詰め込まれ、スクロールが生まれません。</p>
    </div>
  </li>
  <li class="slide">
    <div class="slide-shot sw-c"></div>
    <div class="slide-body">
      <h3 class="slide-title">スクロールバーは消さない</h3>
      <p class="slide-text">消すと動かせることが伝わりません。細くして目立たせないだけにします。</p>
    </div>
  </li>
  <li class="slide">
    <div class="slide-shot sw-d"></div>
    <div class="slide-body">
      <h3 class="slide-title">端の余白は2つ書く</h3>
      <p class="slide-text">padding だけだと最後の1枚が端まで行けません。scroll-padding も同じ値にします。</p>
    </div>
  </li>
  <li class="slide">
    <div class="slide-shot sw-e"></div>
    <div class="slide-body">
      <h3 class="slide-title">1枚ずつ送る</h3>
      <p class="slide-text">scroll-snap-stop: always を付けると、勢いよく振っても飛ばされません。</p>
    </div>
  </li>
</ul>

.rail {
  display: flex;
  gap: 1rem;
  overflow-x: auto;

  /* これが本体。x 方向にスナップし、mandatory なので
     指を離すと必ずどれかの位置に吸い付く。proximity にすると
     「近ければ吸い付く」になり、中途半端な位置で止まれる。 */
  scroll-snap-type: x mandatory;

  /* 端の余白。padding だけだと最後の1枚が端まで行けないので、
     scroll-padding で「スナップ位置の基準」もずらす。 */
  padding-inline: .25rem;
  scroll-padding-inline: .25rem;

  /* iOS で慣性スクロールの途中に別の要素へ引っかからないようにする。 */
  overscroll-behavior-x: contain;

  /* スクロールバーは残す。消すと「動かせること」が伝わらなくなる。
     細くして目立たせないだけにとどめる。 */
  scrollbar-width: thin;
  padding-bottom: .6rem;
}

.slide {
  /* flex の縮みを止める。これを書かないと全部が1画面に詰め込まれ、
     そもそもスクロールが生まれない。最頻出の書き忘れ。 */
  flex: 0 0 auto;
  width: min(72%, 320px);

  /* 各要素のどこを基準に吸い付くか。start なら左端が揃う。
     center にすると中央寄せのカルーセルになる。 */
  scroll-snap-align: start;

  /* スクロール中にこの要素を飛び越して次へ行かせない。
     1枚ずつ確実に送りたいときに効く。 */
  scroll-snap-stop: always;

  border-radius: 14px;
  border: 1px solid var(--line);
  background: #fff;
  overflow: hidden;
}
.slide-shot { aspect-ratio: 16 / 10; }
.slide-body { padding: .8rem .9rem 1rem; }
.slide-title { margin: 0; font-size: .98rem; line-height: 1.6; }
.slide-text { margin: .3rem 0 0; font-size: .84rem; line-height: 1.85; color: var(--muted); }

/* 1画面に複数枚入るレールでは、最後の要素の「左端揃え」の位置が
   スクロールできる最大値を超える。mandatory は必ずどれかの
   スナップ位置に吸い付くので、そのままだと末尾の数枚に
   到達できなくなる。最後だけ右端揃えにして、
   スクロールの終端を有効なスナップ位置にする。 */
.slide:last-child { scroll-snap-align: end; }

/* 動きを減らす設定では、スナップの滑らかな移動を止める。
   スナップ自体は残るので、機能は失われない。 */
@media (prefers-reduced-motion: reduce) {
  .rail { scroll-behavior: auto; }
}

<!-- aria-roledescription で「これはカルーセルだ」と伝える。
     スクリーンリーダーは「カルーセル、4件のリスト」のように読む。 -->
<div class="carousel" role="group" aria-roledescription="カルーセル" aria-label="実績の紹介">
  <!-- スクロールできる領域はキーボードでも操作できる必要がある。
       tabindex="0" で focus を受け取れるようにし、aria-label で名前を付ける。
       Chrome は自動で focusable にするが、他のブラウザでは付けないと
       矢印キーで動かせない。role="region" は当てない。ul の list 役割を
       上書きしてしまい、「4件のリスト」という情報が消えるため。 -->
  <ul class="rail" id="rail" tabindex="0"
      aria-label="実績（横スクロール・左右キーで移動）">
    <li class="slide" aria-label="1/4">
      <div class="slide-shot sw-a"></div>
      <div class="slide-body"><h3 class="slide-title">位置の判定は1か所に集める</h3></div>
    </li>
    <li class="slide" aria-label="2/4">
      <div class="slide-shot sw-b"></div>
      <div class="slide-body"><h3 class="slide-title">スワイプでもボタンでも同じ結果に</h3></div>
    </li>
    <li class="slide" aria-label="3/4">
      <div class="slide-shot sw-c"></div>
      <div class="slide-body"><h3 class="slide-title">端に着いたらボタンを無効にする</h3></div>
    </li>
    <li class="slide" aria-label="4/4">
      <div class="slide-shot sw-d"></div>
      <div class="slide-body"><h3 class="slide-title">現在地は aria-current で持つ</h3></div>
    </li>
  </ul>

  <div class="bar">
    <button class="nav-btn" id="prev" aria-label="前へ">←</button>
    <button class="nav-btn" id="next" aria-label="次へ">→</button>
    <!-- tablist にはしない。tab と tabpanel の対応が無いのに
         role だけ付けると、読み上げが実態と食い違う。 -->
    <div class="dots" id="dots" role="group" aria-label="表示位置"></div>
  </div>
</div>

.carousel { position: relative; }

.rail {
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  list-style: none;
  margin: 0;
  padding: 0 0 .6rem;
  scrollbar-width: thin;
}
.slide {
  /* ドットで現在地を示すなら、1枚ずつ見せる。1画面に複数枚入る
     レールでは「いま何枚目か」が定義できず、さらに末尾の要素の
     左端揃えの位置がスクロール最大値を超えて到達できなくなる。 */
  flex: 0 0 100%;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
  overflow: hidden;
}
.slide-shot { aspect-ratio: 16 / 9; }
.slide-body { padding: .8rem .9rem 1rem; }
.slide-title { margin: 0; font-size: .98rem; line-height: 1.6; }

.bar { display: flex; align-items: center; gap: .6rem; margin-top: .8rem; }

.nav-btn {
  width: 2.1rem; height: 2.1rem; flex: none;
  border: 1px solid var(--line); border-radius: 999px;
  background: #fff; color: var(--muted); cursor: pointer;
  font-family: inherit; font-size: .9rem; line-height: 1;
}
.nav-btn:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
/* 端に着いたら押せなくする。押しても何も起きないボタンは、
   壊れているのか端なのかが利用者に区別できない。 */
.nav-btn:disabled { opacity: .35; cursor: default; }

.dots { display: flex; gap: .4rem; margin-left: auto; }
.dot {
  width: .55rem; height: .55rem; padding: 0;
  border: 0; border-radius: 999px; cursor: pointer;
  background: var(--line);
  transition: background .2s, transform .2s;
}
/* 現在地は aria-current で持つ。見た目のクラスを別に足すと、
   状態が2か所に散って必ずずれる。 */
.dot[aria-current="true"] { background: var(--accent); transform: scale(1.25); }

@media (prefers-reduced-motion: reduce) {
  .rail { scroll-behavior: auto; }
  .dot { transition: none; }
}

const rail = document.getElementById("rail");
const slides = [...rail.children];
const dots = document.getElementById("dots");
const prev = document.getElementById("prev");
const next = document.getElementById("next");
let current = 0;

// ドットは枚数から作る。HTMLに手で並べると、枚数を変えたときに
// 必ず片方だけ直し忘れる。
slides.forEach((_, i) => {
  const b = document.createElement("button");
  b.className = "dot";
  b.type = "button";
  b.setAttribute("aria-label", `${i + 1}枚目へ`);
  b.addEventListener("click", () => go(i));
  dots.append(b);
});

function go(i) {
  // scrollIntoView に任せる。座標の計算をしないので、
  // 余白やレイアウトが変わっても壊れない。
  slides[i].scrollIntoView({ behavior: "smooth", block: "nearest", inline: "start" });
}

// 現在地の更新はここだけ。スワイプ・ボタン・ドットのどれで動かしても、
// 最後は必ずスクロールが起きるので、この1か所に集約できる。
function render() {
  [...dots.children].forEach((d, i) =>
    d.setAttribute("aria-current", String(i === current)),
  );
  prev.disabled = current === 0;
  next.disabled = current === slides.length - 1;
}

// scrollLeft を幅で割る実装は、余白や端末ごとの丸めでずれる。
// 「実際に見えているか」はブラウザが知っているので、それを聞く。
// 見えている面積がいちばん大きいものを現在地とする。
// 「最初に交差した要素」を採ると、2枚が同時に見えている瞬間に
// 右側の要素を拾ってしまい、表示が1つ先へずれる。
const ratios = new Map(slides.map((s) => [s, 0]));
const io = new IntersectionObserver(
  (entries) => {
    for (const e of entries) ratios.set(e.target, e.intersectionRatio);
    let best = 0;
    for (let i = 1; i < slides.length; i++) {
      // 同率のときは先頭側を採るため、わずかに上回った場合だけ入れ替える。
      if (ratios.get(slides[i]) > ratios.get(slides[best]) + 0.01) best = i;
    }
    if (best === current) return;
    current = best;
    render();
  },
  // レール自身を基準にする。段階的な閾値を渡すと、
  // 少し動くたびに面積が更新されて追随が滑らかになる。
  { root: rail, threshold: [0, 0.25, 0.5, 0.75, 1] },
);
slides.forEach((s) => io.observe(s));

prev.addEventListener("click", () => go(Math.max(0, current - 1)));
next.addEventListener("click", () => go(Math.min(slides.length - 1, current + 1)));

// 矢印キーでも動かせるようにする。マウスもタッチも使わない利用者が
// カルーセルから抜け出せなくなるのを防ぐ。
rail.addEventListener("keydown", (e) => {
  if (e.key === "ArrowRight") { e.preventDefault(); next.click(); }
  if (e.key === "ArrowLeft") { e.preventDefault(); prev.click(); }
});

render();

<div role="group" aria-roledescription="ギャラリー" aria-label="商品写真">
  <ul class="stage" id="stage" tabindex="0" aria-label="商品写真（横スクロール・左右キーで移動）">
    <li class="shot sw-a" data-caption="正面。素材の質感が分かる標準的な角度です。"></li>
    <li class="shot sw-b" data-caption="斜め上から。厚みと縁の処理が見えます。"></li>
    <li class="shot sw-c" data-caption="背面。端子の位置と刻印を確認できます。"></li>
    <li class="shot sw-d" data-caption="使用時。手に持ったときの大きさの目安です。"></li>
    <li class="shot sw-e" data-caption="同梱物。付属品を並べた状態です。"></li>
  </ul>

  <!-- サムネイルは button。div に click を付けるとキーボードで押せない。 -->
  <ul class="thumbs" id="thumbs"></ul>

  <!-- 説明文の差し替えは aria-live で伝える。見えている人には
       文字が変わって分かるが、そうでない人には何も起きていない。 -->
  <p class="caption" id="caption" aria-live="polite"></p>
</div>

.stage {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  list-style: none;
  margin: 0;
  padding: 0;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: #fff;
  /* 主役側のスクロールバーは隠す。サムネイルが位置を示すので、
     ここに二重の手がかりは要らない。ただし操作は殺さない。 */
  scrollbar-width: none;
}
.stage::-webkit-scrollbar { display: none; }

.shot {
  flex: 0 0 100%;
  scroll-snap-align: center;
  scroll-snap-stop: always;
  aspect-ratio: 16 / 10;
}

.thumbs {
  display: flex;
  gap: .5rem;
  overflow-x: auto;
  list-style: none;
  margin: .7rem 0 0;
  padding: 0 0 .4rem;
  scrollbar-width: thin;
}
.thumb {
  flex: 0 0 auto;
  width: 68px;
  aspect-ratio: 16 / 10;
  padding: 0;
  border: 2px solid transparent;
  border-radius: 8px;
  cursor: pointer;
  overflow: hidden;
  /* 選択中でない側は少し落とす。色だけで示すと、
     色覚特性によっては区別が付かない。枠線と明度の両方で示す。 */
  opacity: .55;
  transition: opacity .2s, border-color .2s;
}
.thumb[aria-current="true"] {
  opacity: 1;
  border-color: var(--accent);
}
.thumb:hover { opacity: 1; }
.thumb > span { display: block; width: 100%; height: 100%; }

.caption {
  margin: .6rem 0 0;
  font-size: .86rem;
  line-height: 1.85;
  color: var(--muted);
  /* 切り替えで高さが変わると下の要素が跳ねる。2行ぶん確保しておく。 */
  min-height: 3.2em;
}

@media (prefers-reduced-motion: reduce) {
  .stage { scroll-behavior: auto; }
  .thumb { transition: none; }
}

const stage = document.getElementById("stage");
const thumbs = document.getElementById("thumbs");
const caption = document.getElementById("caption");
const shots = [...stage.children];
let current = 0;

// サムネイルは主役の枚数から作る。HTMLに二重で並べると、
// 写真を増やしたときに必ず片方だけ直し忘れる。
shots.forEach((shot, i) => {
  const li = document.createElement("li");
  const b = document.createElement("button");
  b.type = "button";
  b.className = "thumb";
  b.setAttribute("aria-label", `${i + 1}枚目：${shot.dataset.caption}`);
  const inner = document.createElement("span");
  // 主役と同じ見た目を使い回す。クラス名を二重管理しない。
  inner.className = shot.className.replace("shot", "").trim();
  b.append(inner);
  b.addEventListener("click", () => {
    shot.scrollIntoView({ behavior: "smooth", block: "nearest", inline: "center" });
  });
  li.append(b);
  thumbs.append(li);
});

function render() {
  [...thumbs.querySelectorAll(".thumb")].forEach((t, i) =>
    t.setAttribute("aria-current", String(i === current)),
  );
  caption.textContent = shots[current].dataset.caption;

  // 選択中のサムネイルが画面外にあると、どれが選ばれているか分からない。
  // 主役に追従してサムネイル側もスクロールさせる。
  thumbs.querySelectorAll(".thumb")[current]
    ?.scrollIntoView({ behavior: "smooth", block: "nearest", inline: "nearest" });
}

// 見えている面積がいちばん大きいものを現在地とする。「最初に交差した
// 要素」を採ると、切り替わりの途中で次の写真を先に拾ってしまう。
const ratios = new Map(shots.map((s) => [s, 0]));
const io = new IntersectionObserver(
  (entries) => {
    for (const e of entries) ratios.set(e.target, e.intersectionRatio);
    let best = 0;
    for (let i = 1; i < shots.length; i++) {
      if (ratios.get(shots[i]) > ratios.get(shots[best]) + 0.01) best = i;
    }
    if (best === current) return;
    current = best;
    render();
  },
  { root: stage, threshold: [0, 0.25, 0.5, 0.75, 1] },
);
shots.forEach((s) => io.observe(s));

stage.addEventListener("keydown", (e) => {
  const d = e.key === "ArrowRight" ? 1 : e.key === "ArrowLeft" ? -1 : 0;
  if (!d) return;
  e.preventDefault();
  const i = Math.min(shots.length - 1, Math.max(0, current + d));
  shots[i].scrollIntoView({ behavior: "smooth", block: "nearest", inline: "center" });
});

render();

<div role="group" aria-roledescription="カルーセル" aria-label="お客様の声">
  <ul class="rail" id="rail" tabindex="0" aria-label="お客様の声（横スクロール・左右キーで移動）">
    <li class="slide">
      <p class="slide-eyebrow">制作会社</p>
      <h3 class="slide-title">止められない自動送りは、読ませない</h3>
      <p class="slide-text">読んでいる途中で流れると、利用者は最初から読み直すか、諦めます。</p>
    </li>
    <li class="slide">
      <p class="slide-eyebrow">事業会社</p>
      <h3 class="slide-title">止める条件は4つある</h3>
      <p class="slide-text">ポインタ、フォーカス、タブの表示状態、そして本人の操作。どれも「読んでいる」合図です。</p>
    </li>
    <li class="slide">
      <p class="slide-eyebrow">個人開発</p>
      <h3 class="slide-title">一度自分で動かしたら、もう戻さない</h3>
      <p class="slide-text">操作した人には意思があります。そのあと勝手に動き出すのは邪魔にしかなりません。</p>
    </li>
  </ul>

  <div class="progress" id="progress" data-paused="false" style="--dwell: 4s"><i></i></div>

  <div class="bar">
    <!-- 停止ボタンは必須。WCAG 2.2.2 は「5秒以上続く自動的な動きには
         停止手段を用意すること」を求めている。 -->
    <button class="toggle" id="toggle" aria-pressed="false">自動送りを止める</button>
    <div class="dots" id="dots" role="group" aria-label="表示位置"></div>
  </div>
</div>

.rail {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  list-style: none;
  margin: 0;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
  scrollbar-width: none;
}
.rail::-webkit-scrollbar { display: none; }

.slide {
  flex: 0 0 100%;
  scroll-snap-align: center;
  scroll-snap-stop: always;
  padding: clamp(1.2rem, 4vw, 2rem);
  min-height: 8.5rem;
}
.slide-eyebrow { margin: 0 0 .3rem; font-size: .74rem; line-height: 1.8; color: var(--accent); }
.slide-title { margin: 0; font-size: 1.05rem; line-height: 1.6; }
.slide-text { margin: .4rem 0 0; font-size: .88rem; line-height: 1.85; color: var(--muted); }

.bar { display: flex; align-items: center; gap: .6rem; margin-top: .7rem; }

.toggle {
  padding: .35rem .9rem;
  border: 1px solid var(--line); border-radius: 999px;
  background: #fff; color: var(--muted); cursor: pointer;
  font-family: inherit; font-size: .82rem; line-height: 1.8;
}
.toggle:hover { border-color: var(--accent); color: var(--accent); }

.dots { display: flex; gap: .4rem; margin-left: auto; }
.dot {
  width: .5rem; height: .5rem; padding: 0; border: 0; border-radius: 999px;
  background: var(--line); cursor: pointer;
}
.dot[aria-current="true"] { background: var(--accent); }

/* 進み具合の帯。止まっているときは animation-play-state で
   その場に留める。幅を0に戻すと「最初からやり直し」に見えてしまう。 */
.progress { height: 2px; background: var(--line); border-radius: 2px; overflow: hidden; }
.progress > i {
  display: block; height: 100%; width: 100%;
  background: var(--accent);
  transform-origin: left;
  animation: fill var(--dwell) linear infinite;
}
.progress[data-paused="true"] > i { animation-play-state: paused; }
@keyframes fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* 動きを減らす設定では帯自体を出さない。自動送りもJS側で止める。 */
@media (prefers-reduced-motion: reduce) {
  .rail { scroll-behavior: auto; }
  .progress { display: none; }
}

const DWELL = 4000;

const rail = document.getElementById("rail");
const slides = [...rail.children];
const dots = document.getElementById("dots");
const toggle = document.getElementById("toggle");
const progress = document.getElementById("progress");
let current = 0;
let timer = null;

// 「止まっている理由」を集合で持つ。真偽値1つで管理すると、
// ポインタを外した瞬間にフォーカス中でも再開してしまう。
const holds = new Set();

// 動きを減らす設定の人には、そもそも自動送りをしない。
const reduced = matchMedia("(prefers-reduced-motion: reduce)");
if (reduced.matches) holds.add("reduced-motion");

slides.forEach((_, i) => {
  const b = document.createElement("button");
  b.type = "button";
  b.className = "dot";
  b.setAttribute("aria-label", `${i + 1}枚目へ`);
  b.addEventListener("click", () => {
    hold("user");          // 自分で選んだ人には、もう自動で動かさない
    go(i);
  });
  dots.append(b);
});

function go(i) {
  slides[i].scrollIntoView({ behavior: "smooth", block: "nearest", inline: "center" });
}

function render() {
  [...dots.children].forEach((d, i) =>
    d.setAttribute("aria-current", String(i === current)),
  );
  const paused = holds.size > 0;
  progress.dataset.paused = String(paused);
  toggle.setAttribute("aria-pressed", String(holds.has("user")));
  toggle.textContent = holds.has("user") ? "自動送りを再開する" : "自動送りを止める";
  document.getElementById("state").textContent =
    paused ? `停止中（理由: ${[...holds].join(", ")}）` : "自動送り中";
}

function tick() {
  if (holds.size) return;
  go((current + 1) % slides.length);
}

function hold(reason) {
  holds.add(reason);
  clearInterval(timer);
  timer = null;
  render();
}

function release(reason) {
  holds.delete(reason);
  if (holds.size === 0 && timer === null) timer = setInterval(tick, DWELL);
  render();
}

// 1. ポインタが乗っている間
rail.addEventListener("pointerenter", () => hold("hover"));
rail.addEventListener("pointerleave", () => release("hover"));

// 2. 中の要素にフォーカスがある間（キーボード利用者が読んでいる）
rail.addEventListener("focusin", () => hold("focus"));
rail.addEventListener("focusout", () => release("focus"));

// 3. タブが裏に回っている間。見えていないものを送っても意味が無く、
//    戻ってきたときに何枚も飛んでいるのは混乱のもとになる。
document.addEventListener("visibilitychange", () =>
  document.hidden ? hold("hidden") : release("hidden"),
);

// 4. 停止ボタン。押したら明示的な意思なので、こちらから再開はしない。
toggle.addEventListener("click", () =>
  holds.has("user") ? release("user") : hold("user"),
);

// 見えている面積がいちばん大きいものを現在地とする。
const ratios = new Map(slides.map((s) => [s, 0]));
const io = new IntersectionObserver(
  (entries) => {
    for (const e of entries) ratios.set(e.target, e.intersectionRatio);
    let best = 0;
    for (let i = 1; i < slides.length; i++) {
      if (ratios.get(slides[i]) > ratios.get(slides[best]) + 0.01) best = i;
    }
    if (best === current) return;
    current = best;
    // 送るたびに帯を頭から流し直す。アニメーションを一度 none に
    // 戻して強制的に再計算させるのが、いちばん短く確実。
    const bar = progress.firstElementChild;
    bar.style.animation = "none";
    void bar.offsetWidth;
    bar.style.animation = "";
    render();
  },
  { root: rail, threshold: [0, 0.25, 0.5, 0.75, 1] },
);
slides.forEach((s) => io.observe(s));

rail.addEventListener("keydown", (e) => {
  const d = e.key === "ArrowRight" ? 1 : e.key === "ArrowLeft" ? -1 : 0;
  if (!d) return;
  e.preventDefault();
  hold("user");
  go(Math.min(slides.length - 1, Math.max(0, current + d)));
});

progress.style.setProperty("--dwell", DWELL + "ms");
if (!holds.size) timer = setInterval(tick, DWELL);
render();