scrollLeftでつくる！ライブラリ不要のシンプルなカルーセル実装法【JS中級】

7月 2, 2025 7月 2, 2025

小瀧

こんにちは！静岡県浜松市でWEBデザイナーをしています小瀧です。

「カルーセル」と聞くと、多くの方はSlickやSwiperなどのライブラリを思い浮かべるかもしれません。
でも実は、ちょっとしたJSとCSSだけで、軽量でカスタマイズしやすいカルーセルを作ることができるんです。

今回はその中でも「scrollLeftを使ったカルーセルの自作方法」をご紹介します。
jQueryも外部ライブラリも一切不要。

ネイティブJavaScriptでスマートに横スクロールさせましょう！

scrollLeftとは？

scrollLeft は、横方向のスクロール位置を数値で取得・設定できるプロパティです。
例えば次のように使います。

 carousel.scrollLeft += 300;

このコードは、対象要素のスクロール位置を300px右にずらすという意味になります。
ボタンを押すたびに少しずつスクロールするカルーセルをつくる際に、非常に便利なプロパティです。

See the Pen
Untitled by 小瀧賢 (@ekwwawpb-the-styleful)
on CodePen.

基本構造：HTMLとCSS

HTML構造

<div class="carousel-wrapper">
  <button id="prevBtn">◀</button>
  <div class="carousel" id="carousel">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
  </div>
  <button id="nextBtn">▶</button>
</div>

CSS（横スクロールスタイル）

.carousel-wrapper {
    display: flex;
    align-items: center;
    gap: 10px;
  }
  .carousel {
    display: flex;
    overflow-x: auto;
    scroll-behavior: smooth;
    width: 300px;
    gap: 10px;
  }
  .item {
    min-width: 300px;
    height: 200px;
    background: #eee;
    text-align: center;
    line-height: 200px;
    font-size: 2rem;
    border-radius: 6px;
  }

CSSのポイントは overflow-x: auto と scroll-behavior: smooth。
この2つで「横スクロールできるエリア」が完成します。

JavaScriptでscrollLeftを制御

次に、前後のボタンを押したときに scrollLeft を増減してスライドさせます。

const carousel = document.getElementById("carousel");
  const prevBtn = document.getElementById("prevBtn");
  const nextBtn = document.getElementById("nextBtn");
  const scrollAmount = 300; // 1スライド分の横幅
  prevBtn.addEventListener("click", () => {
    carousel.scrollLeft -= scrollAmount;
  });
  nextBtn.addEventListener("click", () => {
    carousel.scrollLeft += scrollAmount;
  });

これだけで、ライブラリ不要のカルーセルが完成します。
横幅やスライド量は必要に応じて調整してください。

応用：スライド終端の制御やレスポンシブ対応

もう少し作り込む場合は、次のような機能を追加できます!

ボタンを非表示にする（最初・最後のスライド時）
アイテム数やウィンドウ幅に応じた `scrollAmount` の自動計算
ドラッグやスワイプ操作の対応（モバイル向け）

例えば、ボタンの無効化

function updateButtons() {
    prevBtn.disabled = carousel.scrollLeft === 0;
    const maxScroll = carousel.scrollWidth - carousel.clientWidth;
    nextBtn.disabled = carousel.scrollLeft >= maxScroll;
  }
  carousel.addEventListener("scroll", updateButtons);
  window.addEventListener("load", updateButtons);

これで「最初・最後ではボタンを押せない」仕様が簡単に実現できます。