カルーセル（スライダー）の実装解説｜Carousel & Image Slider JS & CSS Guide

2026年4月14日

カルーセル（スライダー）デザイン見本

クリックやボタン操作で画像を切り替える実装デモです。クリックで瞬時切り替え・矢印ボタンのスライドカルーセル・自動スライド（オートプレイ） の3パターンを収録。コピーしてすぐに使えるHTML・CSS・JSのコードを掲載しています。

① クリックで瞬時切り替え — hidden クラスの付け外しで表示を切り替える

ボックスをクリックすると次の画像に切り替わります

Slide 1

Slide 2

Slide 3

Slide 4

HTML

<div class="boxes-container">
  <div class="box box-1"></div>
  <div class="box box-2 hidden"></div>
  <div class="box box-3 hidden"></div>
  <div class="box box-4 hidden"></div>
</div>

CSS

.boxes-container {
  width: 80%;
  height: 300px;
  margin: 0 auto;
  cursor: pointer;
}

.box {
  width: 100%;
  height: 100%;
}

.box-1 { background: #667eea; }
.box-2 { background: #f093fb; }
.box-3 { background: #4facfe; }
.box-4 { background: #43e97b; }

.hidden {
  display: none;
}

(function() {
  var wrap = document.querySelector('.boxes-container');
  var boxes = wrap.querySelectorAll('.box');
  var pos = 0;

  wrap.addEventListener('click', function() {
    boxes[pos].className = 'box box-' + (pos + 1) + ' hidden';
    pos = (pos + 1) % boxes.length;
    boxes[pos].className = 'box box-' + (pos + 1);
  });
})();

hidden クラスで非表示にし、クリックのたびに表示対象を1つずつ進める

最初に表示したいスライド以外にはあらかじめ hidden（display: none）クラスを付けて非表示にしておきます。クリックイベントが発火したら、現在表示中のスライドに hidden を追加し、次のスライドから hidden を外します。「今どれを表示しているか」は変数 pos で管理します。(pos + 1) % boxes.length の剰余演算を使うと、最後のスライドで自動的に最初に戻るループが簡潔に書けます。

② 矢印ボタンのスライドカルーセル — overflow: hidden と translateX でスライドアニメーション

Slide 1

Slide 2

Slide 3

Slide 4

表示中: 1 / 4

HTML

<div class="carousel-container">
  <div class="carousel">
    <div class="box box-1"></div>
    <div class="box box-2"></div>
    <div class="box box-3"></div>
    <div class="box box-4"></div>
  </div>
  <button class="btn-prev">&#10094;</button>
  <button class="btn-next">&#10095;</button>
</div>

CSS

.carousel-container {
  width: 80%;
  height: 300px;
  margin: 0 auto;
  overflow: hidden;
  position: relative;
}

.carousel {
  width: 100%;
  height: 100%;
  display: flex;
  transition: transform 0.3s ease;
}

.box {
  height: 100%;
  min-width: 100%;
}

.box-1 { background: #667eea; }
.box-2 { background: #f093fb; }
.box-3 { background: #4facfe; }
.box-4 { background: #43e97b; }

.btn-prev,
.btn-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  border: none;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  font-size: 20px;
  width: 40px;
  height: 40px;
  cursor: pointer;
}

.btn-prev { left: 10px; }
.btn-next { right: 10px; }

.btn-prev:hover,
.btn-next:hover { background: rgba(0, 0, 0, 0.85); }

(function() {
  var container = document.querySelector('.carousel-container');
  var carousel  = container.querySelector('.carousel');
  var slides    = carousel.querySelectorAll('.box');
  var btnPrev   = container.querySelector('.btn-prev');
  var btnNext   = container.querySelector('.btn-next');
  var pos = 0;

  function move() {
    var w = slides[0].getBoundingClientRect().width;
    carousel.style.transform = 'translateX(' + (-w * pos) + 'px)';
    btnPrev.style.display = pos === 0 ? 'none' : 'block';
    btnNext.style.display = pos === slides.length - 1 ? 'none' : 'block';
  }

  btnPrev.addEventListener('click', function() { pos--; move(); });
  btnNext.addEventListener('click', function() { pos++; move(); });
  window.addEventListener('resize', move);
  move();
})();

overflow: hidden で枠外を隠し、translateX でスライド全体を横にずらす

コンテナに overflow: hidden を設定することで、枠からはみ出したスライドが非表示になります。内側の .carousel を display: flex にすることで全スライドを横一列に並べ、transform: translateX() で左右にずらします。ずらす量は「スライド幅 × 現在のインデックス」で計算します。transition: transform 0.3s を付けるとスライドアニメーションになります。ウィンドウリサイズ時にも位置がズレないよう window.resize で再計算するのがポイントです。

③ 自動スライド（オートプレイ） — setInterval で一定時間ごとに自動切り替え

Slide 1

Slide 2

Slide 3

Slide 4

表示中: 1 / 4

HTML

<div class="carousel-container">
  <div class="carousel">
    <div class="box box-1"></div>
    <div class="box box-2"></div>
    <div class="box box-3"></div>
    <div class="box box-4"></div>
  </div>
</div>

CSS

.carousel-container {
  width: 80%;
  height: 300px;
  margin: 0 auto;
  overflow: hidden;
}

.carousel {
  width: 100%;
  height: 100%;
  display: flex;
  transition: transform 0.3s ease;
}

.box {
  height: 100%;
  min-width: 100%;
}

.box-1 { background: #667eea; }
.box-2 { background: #f093fb; }
.box-3 { background: #4facfe; }
.box-4 { background: #43e97b; }

(function() {
  var container = document.querySelector('.carousel-container');
  var carousel  = container.querySelector('.carousel');
  var slides    = carousel.querySelectorAll('.box');
  var pos = 0;
  var interval = 2500;

  function move() {
    var w = slides[0].getBoundingClientRect().width;
    carousel.style.transform = 'translateX(' + (-w * pos) + 'px)';
  }

  function next() {
    pos = (pos + 1) % slides.length;
    move();
  }

  var timer = setInterval(next, interval);
  window.addEventListener('resize', move);
})();

setInterval でタイマーを作り、一定時間ごとに next() を呼び出して自動で進める

setInterval(関数, ミリ秒) は指定した間隔で関数を繰り返し実行します。スライドを進める next() を渡すことで自動再生になります。間隔を変えたい場合は clearInterval(timer) で一度止め、新しいミリ秒値で setInterval を再呼び出しします。最後のスライドで先頭に戻る折り返しは剰余演算 (pos + 1) % slides.length で実現できます。矢印ボタンと組み合わせる場合は、手動操作後にタイマーをリセットするとUXが向上します。

当サイトで公開しているWebデザインやUIの実装例は、一覧として以下記事に纏めています。

カルーセル（スライダー）の実装解説｜Carousel & Image Slider JS & CSS Guide

カルーセル（スライダー） デザイン見本

① クリックで瞬時切り替え — hidden クラスの付け外しで表示を切り替える

② 矢印ボタンのスライドカルーセル — overflow: hidden と translateX でスライドアニメーション

③ 自動スライド（オートプレイ） — setInterval で一定時間ごとに自動切り替え

カルーセル（スライダー）デザイン見本