Web BENTO JS
カテゴリ一覧
スライダー・ギャラリー

15 / SLIDER 12 パーツ

スライダー・ギャラリーJS実装 12選

Q: スマホのスワイプ操作に対応できますか？

対応できます。ドラッグ・スワイプスライダーは Pointer Events（pointerdown / pointermove / pointerup）で実装しているため、マウス・タッチ・ペンを同じコードで扱えます。タッチ専用の処理を別に書き分ける必要はありません。

Q: デモの色付きスライドを画像に差し替えるには？

スライドのdiv（CSSグラデーション）の中に img タグを入れるか、divごと img に置き換えるだけです。CSSで width: 100%、height: 100%、object-fit: cover を指定すると、枠にぴったり収まります。

Q: このページのパーツはAIコーディングツールでも使えますか？

はい。Claude CodeやCursorのようにWebページを読めるAIには、このページのURLとパーツ名（例:「自動再生スライダー」）を伝えるだけで実装を指示できます。AIがWebを読めない場合は、「全部コピー」で取得した自己完結ブロックをチャットに貼り付けて調整を頼むのが確実です。改変後のコードは、公開前に動作確認することをおすすめします。

コピペで動くスライダー・カルーセル・ギャラリー系パーツのサンプル集です。プレビューは実際に動いています（ドラッグやホバーで操作できるものは、ぜひ触ってみてください）。HTML / CSS / JS タブでコードを確認し、全部コピーを押せば1回の貼り付けで完成します。すべて依存ライブラリなしのバニラJSで、data-bnto-* 属性による自動初期化式です。デモのスライドは権利フリーのCSSグラデーションで描いているので、お手元の画像に差し替えるだけで使えます。

該当するパーツが見つかりませんでした。

ベーシックカルーセル

<!-- .slide を増やすとドットも自動で増えます（実画像なら中身を img に） -->
<div class="bnto-sldr" data-bnto-slider>
  <div class="view">
    <div class="track">
      <div class="slide s1">1</div>
      <div class="slide s2">2</div>
      <div class="slide s3">3</div>
    </div>
  </div>
  <button type="button" class="nav prev" aria-label="前のスライドへ">‹</button>
  <button type="button" class="nav next" aria-label="次のスライドへ">›</button>
  <div class="dots"></div>
</div>

.bnto-sldr {
  --c1: hsl(160 52% 40%);  /* 矢印・ドットの色 */
  position: relative; max-width: 290px;  /* 幅はお好みで */
}
.bnto-sldr .view { overflow: hidden; border-radius: 14px; }
/* スライドを横一列に並べ、track ごと transform で動かす */
.bnto-sldr .track { display: flex; transition: transform .45s cubic-bezier(.25, .8, .3, 1); }
.bnto-sldr .slide {
  flex: 0 0 100%; height: 150px;
  display: grid; place-items: center;
  font-size: 36px; font-weight: 900; color: #fff;
}
/* デモ用スライド（実画像に差し替えOK） */
.bnto-sldr .s1 { background: linear-gradient(135deg, #2BB3A3, #3D6FB0); }
.bnto-sldr .s2 { background: linear-gradient(135deg, #8E6FD8, #D8598C); }
.bnto-sldr .s3 { background: linear-gradient(135deg, #E8874C, #D84C5B); }
.bnto-sldr .nav {
  position: absolute; top: 59px;
  width: 32px; height: 32px; border-radius: 50%;
  border: 0; background: rgba(255,255,255,.92); color: var(--c1);
  font-size: 18px; font-weight: 900; line-height: 1;
  cursor: pointer; display: grid; place-items: center;
  box-shadow: 0 2px 8px rgba(29,42,54,.25);
}
.bnto-sldr .prev { left: 8px; }
.bnto-sldr .next { right: 8px; }
.bnto-sldr .dots { display: flex; gap: 7px; justify-content: center; margin-top: 10px; }
.bnto-sldr .dot {
  width: 9px; height: 9px; border-radius: 50%;
  border: 0; padding: 0; background: #C6D4DF; cursor: pointer;
}
.bnto-sldr .dot.is-on { background: var(--c1); }

// 前後ボタンとドットでスライドを切り替える基本形（複数設置OK）
(function () {
  document.querySelectorAll('[data-bnto-slider]').forEach(function (box) {
    if (box.dataset.bntoInit) return;
    box.dataset.bntoInit = '1';
    var track = box.querySelector('.track');
    var total = track.children.length;
    var dotsBox = box.querySelector('.dots');
    var cur = 0, dots = [];
    for (var i = 0; i < total; i++) {
      var d = document.createElement('button');
      d.type = 'button';
      d.className = 'dot';
      d.setAttribute('aria-label', (i + 1) + '枚目を表示');
      (function (n) { d.addEventListener('click', function () { go(n); }); })(i);
      dotsBox.appendChild(d);
      dots.push(d);
    }
    function go(n) {
      cur = (n + total) % total; // 端では反対側へ回り込む
      track.style.transform = 'translateX(-' + cur * 100 + '%)';
      dots.forEach(function (d, i) { d.classList.toggle('is-on', i === cur); });
    }
    box.querySelector('.prev').addEventListener('click', function () { go(cur - 1); });
    box.querySelector('.next').addEventListener('click', function () { go(cur + 1); });
    go(0);
  });
})();

使い方のコツ

スライドを増やすときは .slide のdivを足すだけで、ドットは枚数に合わせて自動生成されます。実際の画像を使う場合は、スライドの中に <img> を入れて width: 100%; height: 100%; object-fit: cover; を指定してください。切替の速さは .track の transition で調整できます。

一時停止中

自動再生スライダー

<!-- data-interval：切替間隔（ミリ秒） -->
<div class="bnto-auto" data-bnto-autoslider data-interval="2500">
  <div class="view">
    <div class="track">
      <div class="slide s1">1</div>
      <div class="slide s2">2</div>
      <div class="slide s3">3</div>
    </div>
    <span class="pause">一時停止中</span>
  </div>
  <div class="dots" aria-hidden="true"><span class="dot is-on"></span><span class="dot"></span><span class="dot"></span></div>
</div>

.bnto-auto { --c1: hsl(210 70% 50%); max-width: 290px; }
.bnto-auto .view { position: relative; overflow: hidden; border-radius: 14px; }
.bnto-auto .track { display: flex; transition: transform .5s ease; }
.bnto-auto .slide {
  flex: 0 0 100%; height: 150px;
  display: grid; place-items: center;
  font-size: 36px; font-weight: 900; color: #fff;
}
/* デモ用スライド（実画像に差し替えOK） */
.bnto-auto .s1 { background: linear-gradient(135deg, #3E8ED0, #5F5AA2); }
.bnto-auto .s2 { background: linear-gradient(135deg, #2FA35C, #1E7F8C); }
.bnto-auto .s3 { background: linear-gradient(135deg, #D0653E, #B8386B); }
/* ホバー中だけ出る「一時停止中」バッジ */
.bnto-auto .pause {
  position: absolute; right: 8px; top: 8px;
  padding: 4px 10px; border-radius: 999px;
  background: var(--c1); color: #fff;
  font-size: 10px; font-weight: 800;
  opacity: 0; transition: opacity .25s; pointer-events: none;
}
.bnto-auto:hover .pause { opacity: 1; }
.bnto-auto .dots { display: flex; gap: 7px; justify-content: center; margin-top: 10px; }
.bnto-auto .dot { width: 9px; height: 9px; border-radius: 50%; background: #C6D4DF; }
.bnto-auto .dot.is-on { background: var(--c1); }

// 一定間隔で自動送り。マウスをのせている間は一時停止します
(function () {
  document.querySelectorAll('[data-bnto-autoslider]').forEach(function (box) {
    if (box.dataset.bntoInit) return;
    box.dataset.bntoInit = '1';
    var track = box.querySelector('.track');
    var total = track.children.length;
    var dots = box.querySelectorAll('.dot');
    var wait = parseInt(box.dataset.interval || '2500', 10);
    var cur = 0, timer = null;
    function show(n) {
      cur = (n + total) % total;
      track.style.transform = 'translateX(-' + cur * 100 + '%)';
      dots.forEach(function (d, i) { d.classList.toggle('is-on', i === cur); });
    }
    function start() {
      if (timer) return; // 二重起動を防ぐ
      timer = setInterval(function () { show(cur + 1); }, wait);
    }
    function stop() { clearInterval(timer); timer = null; }
    box.addEventListener('mouseenter', stop); // ホバー中は一時停止
    box.addEventListener('mouseleave', start);
    start();
  });
})();

使い方のコツ

切替間隔は data-interval（ミリ秒）で指定します。写真をゆっくり見せたいときは 4000〜5000 程度が目安です。ホバーで一時停止するので「読みたいのに流れてしまう」ストレスがありません。ドットの数はスライドの枚数に合わせて増減させてください。

左右にドラッグ / スワイプしてみてください

ドラッグ・スワイプスライダー

<div class="bnto-drag" data-bnto-dragslider>
  <div class="view">
    <div class="track">
      <div class="slide s1">1</div>
      <div class="slide s2">2</div>
      <div class="slide s3">3</div>
    </div>
  </div>
  <p class="hint">左右にドラッグ / スワイプしてみてください</p>
</div>

.bnto-drag {
  --c1: hsl(268 55% 58%);  /* スライド1のグラデ開始色 */
  --c2: hsl(313 55% 52%);  /* スライド1のグラデ終了色 */
  max-width: 290px;
}
.bnto-drag .view {
  overflow: hidden; border-radius: 14px;
  /* 縦スクロールはブラウザに任せ、横だけJSで扱う */
  touch-action: pan-y; cursor: grab;
}
.bnto-drag .view:active { cursor: grabbing; }
.bnto-drag .track { display: flex; transition: transform .35s ease; }
.bnto-drag .slide {
  flex: 0 0 100%; height: 150px;
  display: grid; place-items: center;
  font-size: 36px; font-weight: 900; color: #fff;
  /* ドラッグ中に文字が選択されないように */
  user-select: none; -webkit-user-select: none;
}
.bnto-drag .s1 { background: linear-gradient(135deg, var(--c1), var(--c2)); }
.bnto-drag .s2 { background: linear-gradient(135deg, #3E8ED0, #2BB3A3); }
.bnto-drag .s3 { background: linear-gradient(135deg, #E8A33D, #D8598C); }
.bnto-drag .hint { margin: 10px 0 0; text-align: center; font-size: 11px; font-weight: 700; color: #5A6B7A; }

// Pointer Events でドラッグ / スワイプ操作（マウス・タッチ・ペン共通）
(function () {
  document.querySelectorAll('[data-bnto-dragslider]').forEach(function (box) {
    if (box.dataset.bntoInit) return;
    box.dataset.bntoInit = '1';
    var view = box.querySelector('.view');
    var track = box.querySelector('.track');
    var total = track.children.length;
    var cur = 0, startX = 0, dx = 0, dragging = false, moved = false;
    function setX(px, anim) {
      track.style.transition = anim ? '' : 'none';
      track.style.transform = 'translateX(calc(-' + cur * 100 + '% + ' + px + 'px))';
    }
    view.addEventListener('pointerdown', function (e) {
      if (e.pointerType === 'mouse' && e.button !== 0) return; // マウスは左ボタンのみ
      dragging = true; moved = false; startX = e.clientX; dx = 0;
      view.setPointerCapture(e.pointerId); // 枠の外に出ても追跡する
    });
    view.addEventListener('pointermove', function (e) {
      if (!dragging) return;
      if (e.pointerType === 'mouse' && e.buttons === 0) { release(); return; } // ボタンが離れていたら必ず終了
      dx = e.clientX - startX;
      if (!moved && Math.abs(dx) < 6) return; // クリック程度の数pxでは動かさない（あそび）
      moved = true;
      setX(dx, false); // アニメなしで指に追従
    });
    function release() {
      if (!dragging) return;
      dragging = false;
      var w = view.clientWidth;
      if (moved) {
        if (dx < -w / 4 && cur < total - 1) cur++; // 幅の1/4以上 左へ→次
        if (dx > w / 4 && cur > 0) cur--;          // 幅の1/4以上 右へ→前
      }
      dx = 0; moved = false;
      setX(0, true);
    }
    view.addEventListener('pointerup', release);
    view.addEventListener('pointercancel', release);
    view.addEventListener('lostpointercapture', release);
  });
})();

使い方のコツ

Pointer Events なのでマウス・タッチ・ペンを同じコードで扱えます。切替の判定は「幅の1/4以上動かしたら」です。w / 4 の数字を小さくすると軽いフリックでも切り替わります。縦スクロールを邪魔しないよう touch-action: pan-y を必ずセットで使ってください。

サムネイル連動ギャラリー

<!-- .shot と .thumb は同じ順番で並べます -->
<div class="bnto-thumb" data-bnto-thumbgallery>
  <div class="main">
    <div class="shot g1">A</div>
    <div class="shot g2">B</div>
    <div class="shot g3">C</div>
    <div class="shot g4">D</div>
  </div>
  <div class="thumbs">
    <button type="button" class="thumb g1" aria-label="画像Aを表示">A</button>
    <button type="button" class="thumb g2" aria-label="画像Bを表示">B</button>
    <button type="button" class="thumb g3" aria-label="画像Cを表示">C</button>
    <button type="button" class="thumb g4" aria-label="画像Dを表示">D</button>
  </div>
</div>

.bnto-thumb {
  --c1: hsl(20 85% 55%);  /* 選択中サムネイルの枠色 */
  max-width: 290px;
}
.bnto-thumb .main { position: relative; height: 140px; border-radius: 14px; overflow: hidden; }
/* メイン画像は重ねておき、is-show だけフェード表示 */
.bnto-thumb .shot {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  font-size: 34px; font-weight: 900; color: #fff;
  opacity: 0; transition: opacity .35s;
}
.bnto-thumb .shot.is-show { opacity: 1; }
.bnto-thumb .thumbs { display: flex; gap: 8px; margin-top: 10px; }
.bnto-thumb .thumb {
  flex: 1; height: 40px; border: 0; border-radius: 9px; padding: 0;
  cursor: pointer; color: #fff;
  font-family: inherit; font-size: 14px; font-weight: 900;
  opacity: .55; transition: opacity .2s, box-shadow .2s;
}
.bnto-thumb .thumb.is-on { opacity: 1; box-shadow: 0 0 0 3px var(--c1); }
/* デモ用の見本画像（実画像に差し替えOK） */
.bnto-thumb .g1 { background: linear-gradient(135deg, #F0A03C, #E86A3C); }
.bnto-thumb .g2 { background: linear-gradient(135deg, #4FB3E8, #2F6FD0); }
.bnto-thumb .g3 { background: linear-gradient(135deg, #9B72E0, #E0559C); }
.bnto-thumb .g4 { background: linear-gradient(135deg, #3EBF87, #1F8FB8); }

// サムネイルをクリックするとメイン表示が切り替わります
(function () {
  document.querySelectorAll('[data-bnto-thumbgallery]').forEach(function (box) {
    if (box.dataset.bntoInit) return;
    box.dataset.bntoInit = '1';
    var shots = box.querySelectorAll('.main .shot');
    var thumbs = box.querySelectorAll('.thumb');
    function show(n) {
      shots.forEach(function (s, i) { s.classList.toggle('is-show', i === n); });
      thumbs.forEach(function (t, i) {
        t.classList.toggle('is-on', i === n);
        t.setAttribute('aria-pressed', i === n ? 'true' : 'false');
      });
    }
    thumbs.forEach(function (t, i) {
      t.addEventListener('click', function () { show(i); });
    });
    show(0); // 最初は1枚目を表示
  });
})();

使い方のコツ

ECサイトの商品画像やカラーバリエーションの切替にそのまま使えます。.shot と .thumb は同じ順番で並べるのがルールです。実画像を使う場合は、.shot と .thumb の中にそれぞれ <img> を入れて object-fit: cover を指定してください。

フェード切替スライダー

<!-- data-interval：切替間隔（ミリ秒）。ドットは自動生成 -->
<div class="bnto-fade" data-bnto-fadeslider data-interval="3000">
  <div class="view">
    <div class="slide s1">1</div>
    <div class="slide s2">2</div>
    <div class="slide s3">3</div>
  </div>
  <div class="dots"></div>
</div>

.bnto-fade { --c1: hsl(330 70% 55%); max-width: 290px; }
.bnto-fade .view { position: relative; height: 150px; border-radius: 14px; overflow: hidden; }
/* 全スライドを重ねておき、opacity で入れ替える */
.bnto-fade .slide {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  font-size: 36px; font-weight: 900; color: #fff;
  opacity: 0; transition: opacity .8s;  /* フェードの長さ */
}
.bnto-fade .slide.is-show { opacity: 1; }
/* デモ用スライド（実画像に差し替えOK） */
.bnto-fade .s1 { background: linear-gradient(135deg, #D8598C, #8E6FD8); }
.bnto-fade .s2 { background: linear-gradient(135deg, #2BB3A3, #3E8ED0); }
.bnto-fade .s3 { background: linear-gradient(135deg, #E8A33D, #D0653E); }
.bnto-fade .dots { display: flex; gap: 7px; justify-content: center; margin-top: 10px; }
.bnto-fade .dot {
  width: 9px; height: 9px; border-radius: 50%;
  border: 0; padding: 0; background: #C6D4DF; cursor: pointer;
}
.bnto-fade .dot.is-on { background: var(--c1); }

// opacity のクロスフェードで自動切替。ドットで任意の1枚へ
(function () {
  document.querySelectorAll('[data-bnto-fadeslider]').forEach(function (box) {
    if (box.dataset.bntoInit) return;
    box.dataset.bntoInit = '1';
    var slides = box.querySelectorAll('.slide');
    var dotsBox = box.querySelector('.dots');
    var wait = parseInt(box.dataset.interval || '3000', 10);
    var cur = 0, timer = null, dots = [];
    for (var i = 0; i < slides.length; i++) {
      var d = document.createElement('button');
      d.type = 'button';
      d.className = 'dot';
      d.setAttribute('aria-label', (i + 1) + '枚目を表示');
      (function (n) {
        d.addEventListener('click', function () { show(n); restart(); });
      })(i);
      dotsBox.appendChild(d);
      dots.push(d);
    }
    function show(n) {
      cur = (n + slides.length) % slides.length;
      slides.forEach(function (s, i) { s.classList.toggle('is-show', i === cur); });
      dots.forEach(function (d, i) { d.classList.toggle('is-on', i === cur); });
    }
    function restart() {
      clearInterval(timer); // 手動操作後はタイマーを引き直す
      timer = setInterval(function () { show(cur + 1); }, wait);
    }
    show(0);
    restart();
  });
})();

使い方のコツ

横に流れるスライドより落ち着いた印象になるので、ヒーローエリアのメインビジュアルに向いています。フェードの長さは transition: opacity .8s、表示時間は data-interval で調整します。ドットをクリックするとタイマーが引き直されるので、切替直後にまた変わってしまうことがありません。

After

Before

Before/After比較スライダー

<!-- range を透明にして全面に重ね、ドラッグ操作を受け取る -->
<div class="bnto-ba" data-bnto-beforeafter>
  <div class="frame">
    <div class="img after">After</div>
    <div class="img before">Before</div>
    <div class="bar" aria-hidden="true"><span class="knob">⇔</span></div>
    <input class="rng" type="range" min="0" max="100" value="50" aria-label="比較位置（左右に動かす）">
  </div>
</div>

.bnto-ba {
  --c1: hsl(200 75% 45%);  /* After側のグラデ開始色 */
  --c2: hsl(245 60% 55%);  /* After側のグラデ終了色 */
  --pos: 50%;  /* 境界の位置。JSが書き換える */
  max-width: 290px;
}
.bnto-ba .frame { position: relative; height: 150px; border-radius: 14px; overflow: hidden; }
.bnto-ba .img {
  position: absolute; inset: 0;
  display: flex; align-items: center;
  font-size: 15px; font-weight: 900; letter-spacing: .08em; color: #fff;
}
.bnto-ba .after { justify-content: flex-end; padding-right: 16px; background: linear-gradient(135deg, var(--c1), var(--c2)); }
/* before は上に重ね、--pos から右側を clip-path で隠す */
.bnto-ba .before {
  justify-content: flex-start; padding-left: 16px;
  background: linear-gradient(135deg, #9AA7B4, #5F6E7C);
  clip-path: inset(0 calc(100% - var(--pos)) 0 0);
}
.bnto-ba .bar {
  position: absolute; top: 0; bottom: 0; left: var(--pos);
  width: 3px; margin-left: -1.5px; background: #fff; pointer-events: none;
}
.bnto-ba .knob {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 30px; height: 30px; border-radius: 50%;
  background: #fff; color: #3A4855;
  display: grid; place-items: center;
  font-size: 13px; font-weight: 900;
  box-shadow: 0 2px 8px rgba(29,42,54,.3);
}
/* 見えない range を全面に重ねて操作を受け取る */
.bnto-ba .rng {
  position: absolute; inset: 0;
  width: 100%; height: 100%; margin: 0;
  opacity: 0; cursor: ew-resize;
}

// つまみ（range）の値に合わせて before の見える幅を変えます
(function () {
  document.querySelectorAll('[data-bnto-beforeafter]').forEach(function (box) {
    if (box.dataset.bntoInit) return;
    box.dataset.bntoInit = '1';
    var rng = box.querySelector('.rng');
    function move() {
      // --pos に連動して clip-path と境界線が動く
      box.style.setProperty('--pos', rng.value + '%');
    }
    rng.addEventListener('input', move);
    move();
  });
})();

使い方のコツ

リフォームの施工前後、写真のレタッチ前後、デザインのリニューアル前後などの見せ方にぴったりです。操作の実体が input[type=range] なので、マウスドラッグ・タッチはもちろんキーボードの左右キーでも動かせます。実画像を使うときは .img の背景を background-image にするか、中に <img> を絶対配置してください。2枚の画像は同じサイズで用意するのがきれいに見せるコツです。

無限ループカルーセル

<!-- クローンはJSが自動で作るので、書くのは本物のスライドだけ -->
<div class="bnto-loop" data-bnto-loopslider>
  <div class="view">
    <div class="track">
      <div class="slide s1">1</div>
      <div class="slide s2">2</div>
      <div class="slide s3">3</div>
    </div>
  </div>
  <button type="button" class="nav prev" aria-label="前のスライドへ">‹</button>
  <button type="button" class="nav next" aria-label="次のスライドへ">›</button>
</div>

.bnto-loop {
  --c1: hsl(150 55% 42%);  /* 矢印の色 */
  position: relative; max-width: 290px;
}
.bnto-loop .view { overflow: hidden; border-radius: 14px; }
.bnto-loop .track { display: flex; transition: transform .45s ease; }
.bnto-loop .slide {
  flex: 0 0 100%; height: 150px;
  display: grid; place-items: center;
  font-size: 36px; font-weight: 900; color: #fff;
}
/* デモ用スライド（実画像に差し替えOK） */
.bnto-loop .s1 { background: linear-gradient(135deg, #2FA36B, #1E7F8C); }
.bnto-loop .s2 { background: linear-gradient(135deg, #3E8ED0, #5F5AA2); }
.bnto-loop .s3 { background: linear-gradient(135deg, #E8874C, #D8598C); }
.bnto-loop .nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 32px; height: 32px; border-radius: 50%;
  border: 0; background: rgba(255,255,255,.92); color: var(--c1);
  font-size: 18px; font-weight: 900; line-height: 1;
  cursor: pointer; display: grid; place-items: center;
  box-shadow: 0 2px 8px rgba(29,42,54,.25);
}
.bnto-loop .prev { left: 8px; }
.bnto-loop .next { right: 8px; }

// 両端にクローンを足し、端に着いたら瞬間移動でシームレスにループ
(function () {
  document.querySelectorAll('[data-bnto-loopslider]').forEach(function (box) {
    if (box.dataset.bntoInit) return;
    box.dataset.bntoInit = '1';
    var track = box.querySelector('.track');
    var slides = track.children;
    var total = slides.length;
    // 両端にクローンを追加（3 | 1 2 3 | 1 の並びになる）
    track.appendChild(slides[0].cloneNode(true));
    track.insertBefore(slides[total - 1].cloneNode(true), slides[0]);
    var cur = 1, busy = false; // クローンの分 +1 した位置が本物の先頭
    function jump(n) {
      track.style.transition = 'none'; // アニメなしで瞬間移動
      cur = n;
      track.style.transform = 'translateX(-' + cur * 100 + '%)';
      void track.offsetWidth; // 移動を反映してから transition を戻す
      track.style.transition = '';
    }
    function go(dir) {
      if (busy) return; // アニメ中の連打は無視
      busy = true;
      cur += dir;
      track.style.transform = 'translateX(-' + cur * 100 + '%)';
    }
    track.addEventListener('transitionend', function () {
      if (cur === total + 1) jump(1); // 末尾クローン→本物の先頭へ
      if (cur === 0) jump(total);     // 先頭クローン→本物の末尾へ
      busy = false;
    });
    box.querySelector('.prev').addEventListener('click', function () { go(-1); });
    box.querySelector('.next').addEventListener('click', function () { go(1); });
    jump(1);
  });
})();

使い方のコツ

最後のスライドの次に最初のスライドが「同じ方向から」流れてくる、ライブラリでおなじみの動きです。仕組みは、両端にクローンを1枚ずつ足しておき、クローンに着いた瞬間（transitionend）にアニメなしで本物の位置へ瞬間移動しているだけです。スライドを増やしてもクローン生成は自動なので、HTMLに書くのは本物だけで大丈夫です。

プログレスバー付きスライダー

<!-- data-interval：1枚あたりの表示時間（ミリ秒） -->
<div class="bnto-prog" data-bnto-progressslider data-interval="3200">
  <div class="view">
    <div class="track">
      <div class="slide s1">1</div>
      <div class="slide s2">2</div>
      <div class="slide s3">3</div>
    </div>
  </div>
  <div class="bar" aria-hidden="true"><i></i></div>
</div>

.bnto-prog {
  --c1: hsl(38 90% 50%);  /* バーの色 */
  max-width: 290px;
}
.bnto-prog .view { overflow: hidden; border-radius: 14px; }
.bnto-prog .track { display: flex; transition: transform .5s ease; }
.bnto-prog .slide {
  flex: 0 0 100%; height: 150px;
  display: grid; place-items: center;
  font-size: 36px; font-weight: 900; color: #fff;
}
/* デモ用スライド（実画像に差し替えOK） */
.bnto-prog .s1 { background: linear-gradient(135deg, #E8A33D, #D0653E); }
.bnto-prog .s2 { background: linear-gradient(135deg, #2FA35C, #2BB3A3); }
.bnto-prog .s3 { background: linear-gradient(135deg, #8E6FD8, #3E8ED0); }
.bnto-prog .bar {
  height: 5px; border-radius: 999px;
  background: #DFE9F1; margin-top: 10px; overflow: hidden;
}
/* scaleX(0→1) で伸ばす。width より軽い */
.bnto-prog .bar i {
  display: block; height: 100%;
  background: var(--c1);
  transform: scaleX(0); transform-origin: 0 50%;
}

// 次の切替までの残り時間をバーで表示しながら自動送り
(function () {
  document.querySelectorAll('[data-bnto-progressslider]').forEach(function (box) {
    if (box.dataset.bntoInit) return;
    box.dataset.bntoInit = '1';
    var track = box.querySelector('.track');
    var bar = box.querySelector('.bar i');
    var total = track.children.length;
    var wait = parseInt(box.dataset.interval || '3200', 10);
    var cur = 0, t0 = null;
    function frame(now) {
      if (t0 === null) t0 = now;
      var p = (now - t0) / wait;
      if (p >= 1) { // バーが満タンになったら次のスライドへ
        cur = (cur + 1) % total;
        track.style.transform = 'translateX(-' + cur * 100 + '%)';
        t0 = now;
        p = 0;
      }
      bar.style.transform = 'scaleX(' + p + ')';
      requestAnimationFrame(frame);
    }
    requestAnimationFrame(frame);
  });
})();

使い方のコツ

「あとどれくらいで次に切り替わるか」が見えるので、自動再生でもユーザーが安心して眺められます。表示時間は data-interval（ミリ秒）で調整してください。進捗の描画は requestAnimationFrame なので、非表示タブでは自動的に止まり無駄な処理が発生しません。バーをスライドの上に重ねたいときは .bar を絶対配置に変えるだけです。

PHOTO

画像の上でマウスを動かしてみてください

ホバールーペ（部分拡大）

<!-- data-zoom：拡大率。lens の中には同じ内容の複製を入れる -->
<div class="bnto-zoom" data-bnto-zoomlens data-zoom="2.5">
  <div class="pic">PHOTO</div>
  <div class="lens" aria-hidden="true"><div class="pic">PHOTO</div></div>
  <p class="hint">画像の上でマウスを動かしてみてください</p>
</div>

.bnto-zoom {
  --c1: hsl(345 75% 55%);  /* 見本画像のグラデ開始色 */
  --c2: hsl(30 80% 55%);  /* 見本画像のグラデ終了色 */
  position: relative; max-width: 290px;
}
.bnto-zoom .pic {
  height: 150px; border-radius: 14px;
  display: grid; place-items: center;
  font-size: 22px; font-weight: 900; letter-spacing: .14em; color: #fff;
  cursor: crosshair;
  background: repeating-linear-gradient(45deg, rgba(255,255,255,.1) 0 14px, rgba(255,255,255,0) 14px 28px),
              linear-gradient(135deg, var(--c1), var(--c2));
}
/* カーソルに追従する丸レンズ */
.bnto-zoom .lens {
  position: absolute; left: 0; top: 0;
  width: 110px; height: 110px; border-radius: 50%;
  border: 3px solid #fff; box-shadow: 0 6px 18px rgba(29,42,54,.35);
  overflow: hidden; pointer-events: none;
  opacity: 0; transform: translate(-50%, -50%); transition: opacity .2s;
}
.bnto-zoom .lens.is-show { opacity: 1; }
/* レンズ内の複製。サイズと位置はJSが動かす（模様も拡大率に合わせる） */
.bnto-zoom .lens .pic {
  position: absolute; left: 0; top: 0;
  border-radius: 0; font-size: 55px; cursor: default;
  background: repeating-linear-gradient(45deg, rgba(255,255,255,.1) 0 35px, rgba(255,255,255,0) 35px 70px),
              linear-gradient(135deg, var(--c1), var(--c2));
}
.bnto-zoom .hint { margin: 10px 0 0; text-align: center; font-size: 11px; font-weight: 700; color: #5A6B7A; }

// カーソル位置にレンズを追従させ、中に data-zoom 倍の複製を映します
(function () {
  document.querySelectorAll('[data-bnto-zoomlens]').forEach(function (box) {
    if (box.dataset.bntoInit) return;
    box.dataset.bntoInit = '1';
    var zoom = parseFloat(box.dataset.zoom || '2.5');
    var pic = box.querySelector('.pic');
    var lens = box.querySelector('.lens');
    var big = lens.querySelector('.pic');
    pic.addEventListener('pointermove', function (e) {
      var r = pic.getBoundingClientRect();
      var x = e.clientX - r.left, y = e.clientY - r.top;
      lens.style.left = x + 'px'; // レンズをカーソルに追従
      lens.style.top = y + 'px';
      big.style.width = r.width * zoom + 'px'; // 複製を zoom 倍に
      big.style.height = r.height * zoom + 'px';
      // カーソル位置がレンズの中心に来るようにずらす
      big.style.transform = 'translate(' + (lens.offsetWidth / 2 - x * zoom) + 'px,' + (lens.offsetHeight / 2 - y * zoom) + 'px)';
    });
    pic.addEventListener('pointerenter', function () { lens.classList.add('is-show'); });
    pic.addEventListener('pointerleave', function () { lens.classList.remove('is-show'); });
  });
})();

使い方のコツ

ECサイトの商品画像で「生地の質感を見せたい」ときの定番です。拡大率は data-zoom、レンズの大きさはCSSの width / height で調整します。実画像で使う場合は、.pic を2つとも background-image: url(同じ画像) にするか、中に同じ <img> を入れてください（レンズ内の複製はJSが自動で拡大位置を合わせます）。タッチ端末ではピンチ拡大が使えるため、ホバー前提のこのUIは補助として考えるのがおすすめです。

縦スライダー

<!-- 上下ボタンで縦方向に送るスライダー（実画像なら中身を img に） -->
<div class="bnto-vsldr" data-bnto-vslider>
  <div class="view">
    <div class="track">
      <div class="slide s1">1</div>
      <div class="slide s2">2</div>
      <div class="slide s3">3</div>
    </div>
  </div>
  <button type="button" class="nav up" aria-label="前のスライドへ">↑</button>
  <button type="button" class="nav down" aria-label="次のスライドへ">↓</button>
</div>

.bnto-vsldr {
  --c1: hsl(198 70% 46%);  /* 上下ボタンの色 */
  position: relative; max-width: 290px;
}
/* view の高さ＝1枚分。track を縦に積んで translateY で送る */
.bnto-vsldr .view { overflow: hidden; border-radius: 14px; height: 150px; }
.bnto-vsldr .track { display: flex; flex-direction: column; transition: transform .45s cubic-bezier(.25, .8, .3, 1); }
.bnto-vsldr .slide {
  flex: 0 0 150px; height: 150px;
  display: grid; place-items: center;
  font-size: 36px; font-weight: 900; color: #fff;
}
/* デモ用スライド（実画像に差し替えOK） */
.bnto-vsldr .s1 { background: linear-gradient(135deg, #2F8FB8, #2F5FA3); }
.bnto-vsldr .s2 { background: linear-gradient(135deg, #2FA36B, #1E8C8C); }
.bnto-vsldr .s3 { background: linear-gradient(135deg, #D08A3E, #C24C6B); }
.bnto-vsldr .nav {
  position: absolute; right: 8px;
  width: 32px; height: 32px; border-radius: 50%;
  border: 0; background: rgba(255,255,255,.92); color: var(--c1);
  font-size: 18px; font-weight: 900; line-height: 1;
  cursor: pointer; display: grid; place-items: center;
  box-shadow: 0 2px 8px rgba(29,42,54,.25);
}
.bnto-vsldr .up { top: 8px; }
.bnto-vsldr .down { bottom: 8px; }

// 上下ボタンで縦方向にスライド（translateY・複数設置OK）
(function () {
  document.querySelectorAll('[data-bnto-vslider]').forEach(function (box) {
    if (box.dataset.bntoInit) return;
    box.dataset.bntoInit = '1';
    var track = box.querySelector('.track');
    var total = track.children.length;
    var cur = 0;
    function go(n) {
      cur = (n + total) % total; // 端では反対側へ回り込む
      track.style.transform = 'translateY(-' + (cur * 100 / total) + '%)';
    }
    box.querySelector('.up').addEventListener('click', function () { go(cur - 1); });
    box.querySelector('.down').addEventListener('click', function () { go(cur + 1); });
    go(0);
  });
})();

使い方のコツ

横スライダーとの違いは flex-direction: column と translateY() だけです。.view の height がスライド1枚の高さになるので、スライドの高さと必ずそろえてください。縦に送る動きは、キャッチコピーを1行ずつ見せたいヒーローや、実績数値のローテーション表示に向いています。

中央拡大カルーセル

<!-- 中央のスライドが大きく、両脇が小さく見えるカルーセル -->
<div class="bnto-center" data-bnto-centerslider>
  <div class="view">
    <div class="track">
      <div class="slide s1">1</div>
      <div class="slide s2">2</div>
      <div class="slide s3">3</div>
      <div class="slide s4">4</div>
    </div>
  </div>
  <button type="button" class="nav prev" aria-label="前のスライドへ">‹</button>
  <button type="button" class="nav next" aria-label="次のスライドへ">›</button>
</div>

.bnto-center {
  --c1: hsl(255 55% 58%);  /* 矢印の色 */
  position: relative; max-width: 290px;
}
.bnto-center .view { overflow: hidden; padding: 12px 0; }
.bnto-center .track { display: flex; align-items: center; transition: transform .45s cubic-bezier(.25, .8, .3, 1); }
/* 各スライドは幅62%＋左右3%マージン。既定は縮小＆半透明 */
.bnto-center .slide {
  flex: 0 0 62%; height: 120px; margin: 0 3%; border-radius: 14px;
  display: grid; place-items: center;
  font-size: 34px; font-weight: 900; color: #fff;
  transform: scale(.8); opacity: .5;
  transition: transform .45s, opacity .45s;
}
/* 中央のスライドだけ等倍＆不透明に */
.bnto-center .slide.is-active { transform: scale(1); opacity: 1; }
.bnto-center .s1 { background: linear-gradient(135deg, #7A5FD0, #D0559C); }
.bnto-center .s2 { background: linear-gradient(135deg, #3E8ED0, #2BB3A3); }
.bnto-center .s3 { background: linear-gradient(135deg, #E8A33D, #D0653E); }
.bnto-center .s4 { background: linear-gradient(135deg, #2FA36B, #1E7F8C); }
.bnto-center .nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 32px; height: 32px; border-radius: 50%;
  border: 0; background: rgba(255,255,255,.92); color: var(--c1);
  font-size: 18px; font-weight: 900; line-height: 1;
  cursor: pointer; display: grid; place-items: center;
  box-shadow: 0 2px 8px rgba(29,42,54,.25); z-index: 2;
}
.bnto-center .prev { left: 0; }
.bnto-center .next { right: 0; }

// 中央のスライドを大きく見せ、track ごとずらして送る（複数設置OK）
(function () {
  document.querySelectorAll('[data-bnto-centerslider]').forEach(function (box) {
    if (box.dataset.bntoInit) return;
    box.dataset.bntoInit = '1';
    var view = box.querySelector('.view');
    var track = box.querySelector('.track');
    var slides = track.children;
    var total = slides.length;
    var cur = 0;
    function go(n) {
      cur = (n + total) % total; // 端では反対側へ回り込む
      var s = slides[cur];
      // 中央スライドの中心が view の中心に来る量だけ track をずらす
      var shift = s.offsetLeft + s.offsetWidth / 2 - view.clientWidth / 2;
      track.style.transform = 'translateX(-' + shift + 'px)';
      for (var i = 0; i < total; i++) slides[i].classList.toggle('is-active', i === cur);
    }
    box.querySelector('.prev').addEventListener('click', function () { go(cur - 1); });
    box.querySelector('.next').addEventListener('click', function () { go(cur + 1); });
    for (var i = 0; i < total; i++) (function (n) {
      slides[n].addEventListener('click', function () { if (n !== cur) go(n); }); // 脇のスライドを押すと中央へ
    })(i);
    go(0);
    window.addEventListener('resize', function () { go(cur); }); // 幅が変わっても中央を保つ
  });
})();

使い方のコツ

中央のスライドが大きく、両脇がのぞく「coverflow風」の見せ方です。1枚の幅はCSSの flex: 0 0 62% で決まり、ずらす量はスライドの実寸から自動計算するので、枚数を増やしても調整不要です。脇のスライドをクリックするとその1枚が中央へ来ます。おすすめ商品や導入事例を、主役を強調しながら見せたいときに向いています。

ストーリー風スライダー

<!-- data-interval：1枚あたりの表示時間（ミリ秒）。.bars はJSが自動生成 -->
<div class="bnto-story" data-bnto-storyslider data-interval="3000">
  <div class="bars" aria-hidden="true"></div>
  <div class="view">
    <div class="slide s1 is-show">1</div>
    <div class="slide s2">2</div>
    <div class="slide s3">3</div>
  </div>
</div>

.bnto-story {
  --c1: hsl(330 75% 56%);  /* デモ用スライドの基調色 */
  position: relative; max-width: 290px;
}
/* タップ（クリック）で次へ。スライドは重ねてフェード切替 */
.bnto-story .view { position: relative; height: 150px; border-radius: 14px; overflow: hidden; cursor: pointer; }
.bnto-story .slide {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  font-size: 36px; font-weight: 900; color: #fff;
  opacity: 0; transition: opacity .4s;
}
.bnto-story .slide.is-show { opacity: 1; }
.bnto-story .s1 { background: linear-gradient(135deg, #D0559C, #7A5FD0); }
.bnto-story .s2 { background: linear-gradient(135deg, #2BB3A3, #2F6FD0); }
.bnto-story .s3 { background: linear-gradient(135deg, #E8A33D, #D0653E); }
/* 上部の分割プログレスバー（1枚＝1本） */
.bnto-story .bars { position: absolute; top: 8px; left: 8px; right: 8px; display: flex; gap: 5px; z-index: 2; }
.bnto-story .bars span { flex: 1; height: 3px; border-radius: 999px; background: rgba(255,255,255,.4); overflow: hidden; }
.bnto-story .bars span i {
  display: block; height: 100%; width: 100%;
  background: #fff; transform: scaleX(0); transform-origin: 0 50%;
}
.bnto-story .bars span.is-done i { transform: scaleX(1); }        /* 見終わった分は満タン */
.bnto-story .bars span.is-live i { animation: bnto-storyfill linear forwards; }  /* 表示中はバーが伸びる */
@keyframes bnto-storyfill { from { transform: scaleX(0); } to { transform: scaleX(1); } }

// 上部の分割バーが伸び、満タンで次へ。タップ（クリック）でも次へ送る
(function () {
  document.querySelectorAll('[data-bnto-storyslider]').forEach(function (box) {
    if (box.dataset.bntoInit) return;
    box.dataset.bntoInit = '1';
    var slides = box.querySelectorAll('.slide');
    var total = slides.length;
    var barsBox = box.querySelector('.bars');
    var wait = parseInt(box.dataset.interval || '3000', 10);
    var cur = 0, bars = [];
    for (var i = 0; i < total; i++) {   // 枚数ぶんのバーを生成
      var b = document.createElement('span');
      b.innerHTML = '<i></i>';
      barsBox.appendChild(b);
      bars.push(b);
    }
    function show(n) {
      cur = (n + total) % total;
      slides.forEach(function (s, i) { s.classList.toggle('is-show', i === cur); });
      bars.forEach(function (b, i) {
        var fill = b.firstChild;
        b.classList.remove('is-live', 'is-done');
        if (i < cur) b.classList.add('is-done');   // 見終わった分は満タン
        else if (i === cur) {
          void fill.offsetWidth;                    // アニメを確実に再スタート
          fill.style.animationDuration = wait + 'ms';
          b.classList.add('is-live');               // 表示中はバーが伸びる
        }
      });
    }
    // 現在のバーが伸びきったら次へ
    barsBox.addEventListener('animationend', function (e) {
      if (e.target.parentElement === bars[cur]) show(cur + 1);
    });
    box.querySelector('.view').addEventListener('click', function () { show(cur + 1); }); // タップで次へ
    show(0);
  });
})();

使い方のコツ

SNSのストーリーでおなじみの、上部に分割バーが並ぶUIです。1枚あたりの表示時間は data-interval（ミリ秒）で調整します。バーの伸びはCSSアニメーションに任せ、伸びきった瞬間（animationend）に次へ送っています。クリック（タップ）でも手動で先へ進められます。キャンペーンの手順紹介や、短いお知らせを順番に見せたいときに向いています。

スライダー・ギャラリーJSの基礎知識

スライダー（カルーセル）は、限られたスペースで複数の画像やコンテンツを見せられる定番のUIです。このページのサンプルはすべて依存ライブラリなしのバニラJavaScriptで、SwiperやSlick、jQueryプラグインは一切不要です。デモのスライドは権利フリーのCSSグラデーションで描いた見本なので、そのまま試してから、お手元の画像に差し替えて使えます。

使い方は、HTML / CSS / JSの3タブをそれぞれ貼り付けるか、「全部コピー」ボタンでひとまとめになったコードを1回貼り付けるだけです。切替間隔や拡大率は data-interval / data-zoom などの属性で指定します。初期化は data-bnto-* 属性の自動検出式なので、同じページに何個置いても、うっかりコードを2回貼っても壊れません。

ライブラリを使わず自作する利点

Swiperのような高機能ライブラリは便利な一方、読み込むファイルだけで数十〜数百KBあり、実際に使う機能はごく一部ということが少なくありません。数枚のスライドを送るだけなら、このページのような数十行のバニラJSで十分です。表示が軽くなるのはもちろん、ライブラリのバージョンアップや仕様変更に振り回されない、コードを読めば動きをすべて把握できる、という保守面の利点もあります。反対に、レスポンシブで表示枚数を細かく変えたい、数百枚を仮想化して表示したい、といった要件が出てきたらライブラリの採用を検討するとよいバランスです。

スライドは transform で動かすのが軽さのコツ

スライドの移動は left や margin ではなく transform: translateX() で行うのが鉄則です。transform はレイアウトの再計算（リフロー）を起こさずGPUで合成されるため、画像サイズが大きくてもなめらかに動きます。このページではBefore/After比較の境界も clip-path、プログレスバーも scaleX() と、描画コストの低いプロパティだけでアニメーションさせています。

Pointer Events でマウスもタッチも1本化

スワイプ対応というと touchstart と mousedown を並べて書く方法を思い浮かべるかもしれませんが、現在は pointerdown / pointermove / pointerup の Pointer Events に一本化するのがすっきりします。マウス・タッチ・ペンのすべてで同じイベントが発火し、setPointerCapture() を使えば枠の外までドラッグしても追跡が途切れません。あわせてCSSの touch-action: pan-y を指定しておくと、縦スクロールを邪魔せずに横スワイプだけを扱えます。

スライダーのアクセシビリティ

操作ボタンは必ず button 要素で作り、矢印やドットのような見た目だけのボタンには aria-label で「前のスライドへ」などの説明を付けます。こうしておくとTabキーで移動してEnterで操作でき、スクリーンリーダーにも意味が伝わります。自動再生は「読みたいのに流れてしまう」の原因になりやすいため、当サービスのサンプルはホバーで一時停止する作りにしています。Before/After比較は input[type=range] ベースなので、キーボードの左右キーでも動かせます。

「全部コピー」と「分けて貼る」の使い分け

「全部コピー」を使うと、HTML・CSS・JavaScriptがひとつの自己完結ブロックとしてコピーされるので、1回の貼り付けだけですぐ動きを確認できます。動作のお試しや、1ページ完結のLPに組み込むときはこの方法が手軽です。

一方、本番サイトへ本格的に組み込む場合は、CSSはスタイルシート（.cssファイル）へ、JavaScriptは</body>直前や共通の.jsファイルへ、HTMLは使いたい場所へと分けて貼るのが一般的です。スタイルとスクリプトを1か所に集約できるため、複数ページ・複数パーツで使い回すときの管理がしやすく、ブラウザのキャッシュも効きやすくなります。なお、同じパーツをページ内で何度も使う場合でも、CSSとJSを貼るのは1回だけで大丈夫です（初期化スクリプトが該当要素すべてに自動で効きます）。

よくある質問

Swiperなどのライブラリなしでも大丈夫ですか？

数枚のスライドを送る用途であれば、このページのようなバニラJavaScriptで十分です。ライブラリの読み込み（数十〜数百KB）が不要になるため表示が軽く、バージョンアップへの追従作業も発生しません。多数のブレークポイント設定や仮想スライドが必要な大規模用途では、ライブラリの採用も検討してください。

スマホのスワイプ操作に対応できますか？

対応できます。ドラッグ・スワイプスライダーは Pointer Events（pointerdown / pointermove / pointerup）で実装しているため、マウス・タッチ・ペンを同じコードで扱えます。タッチ専用の処理を別に書き分ける必要はありません。

デモの色付きスライドを画像に差し替えるには？

スライドのdiv（CSSグラデーション）の中に img タグを入れるか、divごと img に置き換えるだけです。CSSで width: 100%、height: 100%、object-fit: cover を指定すると、枠にぴったり収まります。

自動再生はアクセシビリティ的に問題ありませんか？

動き続けるコンテンツは読みにくさの原因になるため、当サービスのサンプルはマウスをのせている間は一時停止する作りにしています。切替間隔も data-interval 属性で調整でき、3〜5秒程度のゆったりした設定をおすすめします。

このページのパーツはAIコーディングツールでも使えますか？

はい。Claude CodeやCursorのようにWebページを読めるAIには、このページのURLとパーツ名（例:「自動再生スライダー」）を伝えるだけで実装を指示できます。AIがWebを読めない場合は、「全部コピー」で取得した自己完結ブロックをチャットに貼り付けて調整を頼むのが確実です。改変後のコードは、公開前に動作確認することをおすすめします。

スライダー・ギャラリーJS実装 12選

ベーシックカルーセル

自動再生スライダー

ドラッグ・スワイプスライダー

サムネイル連動ギャラリー

フェード切替スライダー

Before/After比較スライダー

無限ループカルーセル

プログレスバー付きスライダー

ホバールーペ（部分拡大）

縦スライダー

中央拡大カルーセル

ストーリー風スライダー

スライダー・ギャラリーJSの基礎知識

ライブラリを使わず自作する利点

スライドは transform で動かすのが軽さのコツ

Pointer Events でマウスもタッチも1本化

スライダーのアクセシビリティ

「全部コピー」と「分けて貼る」の使い分け

よくある質問

関連カテゴリ