マウスを乗せると自動再生が止まるカルーセルを作る方法【HTML/CSS/JavaScript・サンプルコード付き】

画像・画像比率・間隔・角丸・矢印ボタン・ドット・色などを設定して、HTML・CSS・JavaScriptを自動生成できます。

マウスホバーで自動再生が止まるカルーセルを作る方法

Webサイトで複数の画像を順番に見せたいときは、自動で画像が切り替わるカルーセルが便利です。ただし、画像を確認しようとしている間も自動再生が続くと、見ていた画像が次へ移動してしまうことがあります。そこで今回は、通常は一定時間ごとに画像を自動で送り、カルーセルへマウスホバーしている間だけ自動再生を停止するカルーセルを作ります。

パソコンでは3枚の画像を同時に表示し、3秒ごとに1枚ずつ横方向へ移動します。最後の位置まで進むと最初の位置へ戻り、そのまま自動再生を続けます。左右の矢印ボタンやドットから手動で表示位置を変更することもできるため、自動再生を待たずに見たい位置へ移動できます。

カルーセルへマウスホバーすると自動再生が停止し、マウスを外すと再び自動再生を開始します。商品画像や作品、写真などを自動で見せながら、利用者が確認しているときは表示を止めたい場面に利用できます。また、画面幅640px以下では表示枚数を1枚へ切り替えるため、スマートフォンでも画像を見やすく表示できます。

コードについて 本記事のコードはサンプルコードです。ご利用前に必ず動作確認を行ってください。

免責事項 本コードの利用により発生した損害について、当サイトは一切の責任を負いません。

デモ

マウスホバーで自動再生が止まるカルーセル

カルーセルにマウスホバーすると自動再生が停止し、マウスを外すと再開します。

画像は3秒ごとに自動で切り替わります。カルーセルにマウスホバーすると自動再生が停止し、マウスを外すと再開します。

コードをコピーして使おう！

<!DOCTYPE html>
<html lang="ja">
<head>

  <!-- 文字コード -->
  <meta charset="UTF-8">

  <!-- スマートフォン表示に対応 -->
  <meta
    name="viewport"
    content="width=device-width, initial-scale=1.0"
  >

  <!-- ページタイトル -->
  <title>マウスホバーで自動再生が止まるカルーセル</title>

  <!-- CSSファイルを読み込み -->
  <link rel="stylesheet" href="style.css">

</head>
<body>

  <!-- カルーセル操作エリア -->
  <div class="hover-pause-carousel_area">

    <!-- 前の画像を表示するボタン -->
    <button
      class="hover-pause-carousel_button"
      id="hover-pause-carousel-prev"
      type="button"
      aria-label="前の画像を表示"
    >

      <!-- 左向きのSVG矢印 -->
      <svg viewBox="0 0 24 24" aria-hidden="true">
        <path d="M15 18 9 12l6-6"></path>
      </svg>

    </button>

    <!-- 画像表示エリア -->
    <div class="hover-pause-carousel_view">

      <!-- 横方向へ移動する画像一覧 -->
      <div class="hover-pause-carousel_track">

        <!--
          使用する画像は利用者自身で用意します。
          sampleフォルダ内にimagesフォルダを作成し、
          image1.pngからimage6.pngまでの画像を配置してください。
        -->

        <!-- 1枚目の画像 -->
        <div class="hover-pause-carousel_item">
          <img src="images/image1.png" alt="画像1">
        </div>

        <!-- 2枚目の画像 -->
        <div class="hover-pause-carousel_item">
          <img src="images/image2.png" alt="画像2">
        </div>

        <!-- 3枚目の画像 -->
        <div class="hover-pause-carousel_item">
          <img src="images/image3.png" alt="画像3">
        </div>

        <!-- 4枚目の画像 -->
        <div class="hover-pause-carousel_item">
          <img src="images/image4.png" alt="画像4">
        </div>

        <!-- 5枚目の画像 -->
        <div class="hover-pause-carousel_item">
          <img src="images/image5.png" alt="画像5">
        </div>

        <!-- 6枚目の画像 -->
        <div class="hover-pause-carousel_item">
          <img src="images/image6.png" alt="画像6">
        </div>

      </div>

    </div>

    <!-- 次の画像を表示するボタン -->
    <button
      class="hover-pause-carousel_button"
      id="hover-pause-carousel-next"
      type="button"
      aria-label="次の画像を表示"
    >

      <!-- 右向きのSVG矢印 -->
      <svg viewBox="0 0 24 24" aria-hidden="true">
        <path d="m9 18 6-6-6-6"></path>
      </svg>

    </button>

  </div>

  <!-- 現在位置を示すドット -->
  <div class="hover-pause-carousel_dots">

    <button class="hover-pause-carousel_dot" type="button" aria-label="1番目の位置へ移動"></button>

    <button class="hover-pause-carousel_dot" type="button" aria-label="2番目の位置へ移動"></button>

    <button class="hover-pause-carousel_dot" type="button" aria-label="3番目の位置へ移動"></button>

    <button class="hover-pause-carousel_dot" type="button" aria-label="4番目の位置へ移動"></button>

    <button class="hover-pause-carousel_dot" type="button" aria-label="5番目の位置へ移動"></button>

    <button class="hover-pause-carousel_dot" type="button" aria-label="6番目の位置へ移動"></button>

  </div>

  <!-- JavaScriptファイルを読み込み -->
  <script src="script.js"></script>

</body>
</html>

/* ページ全体 */
body{
  margin:0; /* ブラウザ標準の外側余白を削除 */
  padding:40px 20px; /* 上下40px・左右20px。値を大きくすると画面端との間隔が広がる */
  background:#ffffff; /* ページ全体の背景色 */
  color:#111827; /* ページ全体の基本文字色 */
  font-family:sans-serif; /* ページ全体で使用するフォント */
}

/* カルーセル内のサイズ計算 */
.hover-pause-carousel_area,
.hover-pause-carousel_area *,
.hover-pause-carousel_dots,
.hover-pause-carousel_dots *{
  box-sizing:border-box; /* paddingとborderを要素の横幅・高さへ含める */
}

/* カルーセル操作エリア */
.hover-pause-carousel_area{
  display:flex; /* 左ボタン・画像・右ボタンを横並びにする */
  align-items:center; /* 各要素を上下中央へ揃える */
  width:100%; /* 設置した場所の横幅いっぱいに表示する */
  gap:18px; /* ボタンと画像表示エリアの間隔。値を大きくすると間隔が広がる */
}

/* 左右の操作ボタン */
.hover-pause-carousel_button{
  display:flex; /* SVG矢印を中央配置する */
  align-items:center; /* SVG矢印を上下中央へ配置する */
  justify-content:center; /* SVG矢印を左右中央へ配置する */
  flex-shrink:0; /* 画面幅が狭くなってもボタンを縮小しない */
  width:48px; /* ボタンの横幅。値を大きくするとボタンが大きくなる */
  height:48px; /* ボタンの高さ。値を大きくするとボタンが大きくなる */
  padding:0; /* ブラウザ標準の内側余白を削除 */
  border:none; /* ブラウザ標準の枠線を削除 */
  border-radius:50%; /* 50%でボタンを円形にする */
  background:#2563eb; /* ボタンの背景色 */
  color:#ffffff; /* SVG矢印の色 */
  cursor:pointer; /* マウスを重ねたときに指の形へ変更 */
}

/* SVG矢印 */
.hover-pause-carousel_button svg{
  width:24px; /* SVGの横幅。値を大きくすると矢印が大きくなる */
  height:24px; /* SVGの高さ。値を大きくすると矢印が大きくなる */
  fill:none; /* SVG内部を塗りつぶさない */
  stroke:currentColor; /* ボタンの文字色を矢印の線色として使用 */
  stroke-width:2; /* 矢印の線幅。値を大きくすると線が太くなる */
  stroke-linecap:round; /* 線の端を丸くする */
  stroke-linejoin:round; /* 線の接続部分を丸くする */
}

/* 画像表示エリア */
.hover-pause-carousel_view{
  flex:1; /* 左右ボタン以外の残りの横幅を使用 */
  min-width:0; /* 内容によって横幅が必要以上に広がるのを防ぐ */
  overflow:hidden; /* 表示範囲からはみ出した画像を非表示 */
}

/* 横方向へ移動する画像一覧 */
.hover-pause-carousel_track{
  display:flex; /* 画像を横並びにする */
  gap:16px; /* 画像同士の間隔。値を大きくすると画像同士が離れる */
  transition:transform .3s ease; /* 0.3秒で滑らかに移動 */
}

/* 各画像 */
.hover-pause-carousel_item{
  flex:0 0 calc((100% - 32px) / 3); /* PCでは3枚表示。32pxは16pxの間隔2つ分 */
  min-width:0; /* 内容によって横幅が広がるのを防ぐ */
  overflow:hidden; /* 角丸からはみ出した画像を非表示 */
  border:1px solid #dbe4f3; /* 画像を囲む枠線。1pxを大きくすると線が太くなる */
  border-radius:16px; /* 画像の角丸。値を大きくすると丸みが強くなる */
  background:#ffffff; /* 画像枠の背景色 */
}

/* 画像本体 */
.hover-pause-carousel_item img{
  display:block; /* 画像下部に発生する余白を削除 */
  width:100%; /* 画像枠の横幅いっぱいに表示 */
  height:220px; /* 画像の高さ。値を大きくすると画像が縦に高くなる */
  object-fit:cover; /* 縦横比を保ちながら画像枠全体を埋める */
}

/* 現在位置を示すドット */
.hover-pause-carousel_dots{
  display:flex; /* ドットを横並びにする */
  justify-content:center; /* ドットを左右中央へ配置 */
  gap:10px; /* ドット同士の間隔。値を大きくすると間隔が広がる */
  margin-top:24px; /* 画像との間隔。値を大きくするとドットが下へ離れる */
}

/* 各ドット */
.hover-pause-carousel_dot{
  width:12px; /* ドットの横幅。値を大きくするとドットが大きくなる */
  height:12px; /* ドットの高さ。値を大きくするとドットが大きくなる */
  padding:0; /* ブラウザ標準の内側余白を削除 */
  border:none; /* ブラウザ標準の枠線を削除 */
  border-radius:50%; /* 50%でドットを円形にする */
  background:#cbd5e1; /* 通常時のドットの背景色 */
  cursor:pointer; /* マウスを重ねたときに指の形へ変更 */
}

/* 現在位置のドット */
.hover-pause-carousel_dot.is-active{
  background:#2563eb; /* 現在位置のドットの背景色 */
}

/* 画面幅640px以下 */
@media(max-width:640px){

  /* ページ全体 */
  body{
    padding:24px 12px; /* 上下24px・左右12pxへ余白を小さくする */
  }

  /* カルーセル操作エリア */
  .hover-pause-carousel_area{
    gap:8px; /* ボタンと画像表示エリアの間隔を8pxへ小さくする */
  }

  /* 左右の操作ボタン */
  .hover-pause-carousel_button{
    width:42px; /* スマートフォンでのボタン横幅 */
    height:42px; /* スマートフォンでのボタン高さ */
  }

  /* SVG矢印 */
  .hover-pause-carousel_button svg{
    width:22px; /* スマートフォンでのSVG横幅 */
    height:22px; /* スマートフォンでのSVG高さ */
  }

  /* 横方向へ移動する画像一覧 */
  .hover-pause-carousel_track{
    gap:12px; /* スマートフォンでの画像同士の間隔 */
  }

  /* 各画像 */
  .hover-pause-carousel_item{
    flex:0 0 100%; /* スマートフォンでは画像を1枚表示 */
  }

  /* 画像本体 */
  .hover-pause-carousel_item img{
    height:220px; /* スマートフォンでの画像高さ */
  }

}

/* カルーセル操作エリアを取得 */
const hoverPauseCarouselArea =
  document.querySelector(".hover-pause-carousel_area");

/* 横方向へ移動する画像一覧を取得 */
const hoverPauseCarouselTrack =
  hoverPauseCarouselArea.querySelector(".hover-pause-carousel_track");

/* すべての画像を取得 */
const hoverPauseCarouselItems =
  hoverPauseCarouselArea.querySelectorAll(".hover-pause-carousel_item");

/* 前へボタンを取得 */
const hoverPauseCarouselPrev =
  hoverPauseCarouselArea.querySelector("#hover-pause-carousel-prev");

/* 次へボタンを取得 */
const hoverPauseCarouselNext =
  hoverPauseCarouselArea.querySelector("#hover-pause-carousel-next");

/* すべてのドットを取得 */
const hoverPauseCarouselDots =
  document.querySelectorAll(".hover-pause-carousel_dot");

/* 現在の表示位置。0は最初の位置 */
let hoverPauseCarouselIndex = 0;

/* 自動再生に使用するタイマー */
let hoverPauseCarouselTimer = null;

/* 画面幅に応じて表示する画像枚数を返す */
function hoverPauseCarouselVisibleCount(){

  /* 640px以下では1枚、それより広い画面では3枚表示 */
  return window.innerWidth <= 640 ? 1 : 3;

}

/* 移動できる最後の位置を取得 */
function hoverPauseCarouselMaxIndex(){

  /* 画像総数から表示枚数を引いて最後の位置を計算 */
  return Math.max(
    0,
    hoverPauseCarouselItems.length - hoverPauseCarouselVisibleCount()
  );

}

/* カルーセルの表示位置を更新 */
function hoverPauseCarouselUpdate(){

  /* 1枚分の横幅を取得 */
  const hoverPauseCarouselCardWidth =
    hoverPauseCarouselItems[0].getBoundingClientRect().width;

  /* トラックに適用されているCSSを取得 */
  const hoverPauseCarouselStyle =
    getComputedStyle(hoverPauseCarouselTrack);

  /* 画像同士の間隔を取得。取得できない場合は0 */
  const hoverPauseCarouselGap =
    parseFloat(hoverPauseCarouselStyle.columnGap) || 0;

  /* 現在の画面幅で移動できる最後の位置を取得 */
  const hoverPauseCarouselMax =
    hoverPauseCarouselMaxIndex();

  /* 表示位置が最後の位置を超えた場合は最後へ戻す */
  if(hoverPauseCarouselIndex > hoverPauseCarouselMax){

    hoverPauseCarouselIndex =
      hoverPauseCarouselMax;

  }

  /* 画像1枚分の横幅と間隔を使って横方向へ移動 */
  hoverPauseCarouselTrack.style.transform =
    "translateX(-" +
    (
      (hoverPauseCarouselCardWidth + hoverPauseCarouselGap) *
      hoverPauseCarouselIndex
    ) +
    "px)";

  /* 現在位置に合わせてドットを更新 */
  hoverPauseCarouselDots.forEach(function(dot,dotIndex){

    /* 移動できる位置より後ろのドットを非表示 */
    dot.hidden =
      dotIndex > hoverPauseCarouselMax;

    /* 現在位置と同じドットだけ有効化 */
    dot.classList.toggle(
      "is-active",
      dotIndex === hoverPauseCarouselIndex
    );

  });

}

/* 自動再生を開始 */
function hoverPauseCarouselStart(){

  /* 既存のタイマーを解除して重複実行を防ぐ */
  clearInterval(hoverPauseCarouselTimer);

  /*
    3000ミリ秒ごとに表示位置を1つ進める。
    3000を大きくすると切り替え間隔が長くなり、
    小さくすると短くなる。
  */
  hoverPauseCarouselTimer = setInterval(function(){

    /* 移動できる最後の位置を取得 */
    const hoverPauseCarouselMax =
      hoverPauseCarouselMaxIndex();

    /* 最後まで進んでいる場合 */
    if(hoverPauseCarouselIndex >= hoverPauseCarouselMax){

      /* 最初の位置へ戻す */
      hoverPauseCarouselIndex = 0;

    }else{

      /* 表示位置を1つ進める */
      hoverPauseCarouselIndex++;

    }

    /* 表示位置を更新 */
    hoverPauseCarouselUpdate();

  },3000);

}

/* 自動再生を停止 */
function hoverPauseCarouselStop(){

  /* 自動再生タイマーを解除 */
  clearInterval(hoverPauseCarouselTimer);

  /* タイマーの状態を初期化 */
  hoverPauseCarouselTimer = null;

}

/* 前へボタンをクリックしたとき */
hoverPauseCarouselPrev.addEventListener("click", function(){

  /* 移動できる最後の位置を取得 */
  const hoverPauseCarouselMax =
    hoverPauseCarouselMaxIndex();

  /* 最初の位置にいる場合 */
  if(hoverPauseCarouselIndex <= 0){

    /* 最後の位置へ移動 */
    hoverPauseCarouselIndex =
      hoverPauseCarouselMax;

  }else{

    /* 表示位置を1つ戻す */
    hoverPauseCarouselIndex--;

  }

  /* 表示位置を更新 */
  hoverPauseCarouselUpdate();

});

/* 次へボタンをクリックしたとき */
hoverPauseCarouselNext.addEventListener("click", function(){

  /* 移動できる最後の位置を取得 */
  const hoverPauseCarouselMax =
    hoverPauseCarouselMaxIndex();

  /* 最後の位置にいる場合 */
  if(hoverPauseCarouselIndex >= hoverPauseCarouselMax){

    /* 最初の位置へ戻す */
    hoverPauseCarouselIndex = 0;

  }else{

    /* 表示位置を1つ進める */
    hoverPauseCarouselIndex++;

  }

  /* 表示位置を更新 */
  hoverPauseCarouselUpdate();

});

/* 各ドットへクリック処理を設定 */
hoverPauseCarouselDots.forEach(function(dot,dotIndex){

  dot.addEventListener("click", function(){

    /* 移動できる位置のドットだけ処理 */
    if(dotIndex <= hoverPauseCarouselMaxIndex()){

      /* クリックしたドットと同じ位置へ移動 */
      hoverPauseCarouselIndex =
        dotIndex;

      /* 表示位置を更新 */
      hoverPauseCarouselUpdate();

    }

  });

});

/* カルーセルへマウスホバーしたとき */
hoverPauseCarouselArea.addEventListener("mouseenter", function(){

  /* 自動再生を停止 */
  hoverPauseCarouselStop();

});

/* カルーセルからマウスが外れたとき */
hoverPauseCarouselArea.addEventListener("mouseleave", function(){

  /* 自動再生を再開 */
  hoverPauseCarouselStart();

});

/* 画面幅が変更されたとき */
window.addEventListener("resize", function(){

  /* 画面幅に合わせて表示位置を再計算 */
  hoverPauseCarouselUpdate();

});

/* 最初の表示位置を設定 */
hoverPauseCarouselUpdate();

/* ページを開いたときに自動再生を開始 */
hoverPauseCarouselStart();

コードについて 本記事のコードはサンプルコードです。ご利用前に必ず動作確認を行ってください。 免責事項 本コードの利用により発生した損害について、当サイトは一切の責任を負いません。

コードをコピーする場合 使用するコードのタブを選び、「このタブをコピー」をクリックすると、現在表示中のコードをコピーできます。 サンプル一式を取得する場合 HTML・CSSなどすべてのファイルが必要な場合は、「サンプル一式をダウンロード」をクリックしてください。

Q ダウンロードしたけど、これをネット上で動かすにはどうするの？

Googleアカウントがあれば、InfinityFreeで無料サーバーを作成して、ダウンロードしたサンプルをネット上で動かせます。

InfinityFreeを初めて利用する場合は①から、すでにサーバーを作成している場合は②へ進んでください。

ファイル構成と設置方法

このサンプルはHTML・CSS・JavaScriptと6枚のPNG画像で構成されています。パソコンでは3枚の画像を同時に表示し、3秒ごとに1枚ずつ自動で送ります。カルーセルへマウスホバーしている間は自動再生を停止し、マウスを外すと再開します。左右の操作ボタンとドットから手動で表示位置を変更することもできます。画像は利用者自身で用意し、sampleフォルダ内のimagesフォルダへ配置します。

sample/
├── index.html
├── style.css
├── script.js
└── images/
    ├── image1.png
    ├── image2.png
    ├── image3.png
    ├── image4.png
    ├── image5.png
    └── image6.png

各ファイルの役割
index.htmlはカルーセルを構成するファイルです。前の位置へ戻る操作ボタン、次の位置へ進む操作ボタン、6つのhover-pause-carousel_item、表示位置を直接選択するドットを記述しています。画像はimages/image1.pngからimages/image6.pngまでを参照します。画像のファイル名や代替テキストを変更する場合もindex.htmlを編集します。

style.cssはカルーセルのレイアウトとデザインを設定するファイルです。640pxより大きい画面では3枚、640px以下では1枚の画像を同時に表示します。画像の高さ、画像同士の間隔、角丸、左右の操作ボタン、ドット、画像が横方向へ移動するときのアニメーションなどもこのファイルで設定します。

script.jsは画像の移動、自動再生、マウスホバーによる停止と再開、左右の操作ボタン、ドットの操作を設定するファイルです。3秒ごとに表示位置を1つ進め、最後の位置まで進むと最初の位置へ戻ります。カルーセルへマウスカーソルが入るとmouseenterで自動再生を停止し、カルーセルから外れるとmouseleaveで自動再生を再開します。

imagesフォルダにはカルーセルで使用する画像を配置します。このサンプルではimage1.png、image2.png、image3.png、image4.png、image5.png、image6.pngの6枚のPNG画像を使用します。画像ファイルは利用者自身で用意してください。

設置方法・使い方
sampleフォルダへindex.html、style.css、script.jsを配置し、同じsampleフォルダ内へimagesフォルダを作成します。利用者自身で用意した6枚のPNG画像をimage1.png、image2.png、image3.png、image4.png、image5.png、image6.pngというファイル名でimagesフォルダへ配置してください。別のファイル名を使用する場合は、index.htmlの各img要素にあるsrcを実際の画像パスへ変更します。

すべてのファイルと画像を配置したあと、sample/index.htmlをブラウザで開きます。index.htmlから同じ階層のstyle.cssとscript.jsを読み込み、imagesフォルダ内の画像を表示します。ページを開くと自動再生が始まり、3秒ごとに画像が1枚分移動します。カルーセルへマウスホバーすると自動再生が停止し、マウスを外すと再開します。左右の操作ボタンや下部のドットから手動で表示位置を変更することもできます。

カスタマイズできる内容
index.htmlではカルーセルに表示する画像を変更できます。各img要素のsrcを使用する画像のパスへ変更し、altも画像の内容に合わせて変更してください。画像を追加または削除する場合は、hover-pause-carousel_itemとhover-pause-carousel_dotの数を合わせて変更します。

style.cssでは画像の高さ、画像同士の間隔、角丸、操作ボタンやドットの大きさ、画像が横方向へ移動する時間などを変更できます。script.jsでは自動再生の間隔や、画面幅に応じた同時表示数を変更できます。外側を囲む固定フレームや最大横幅は設けておらず、hover-pause-carousel_areaのwidth:100%;によって設置した場所の横幅に合わせて表示されます。画像にはobject-fit:cover;を使用しているため、指定した画像領域を埋めるように表示され、元画像の縦横比によっては上下または左右の一部が切り取られます。

640pxより大きい画面では3枚、640px以下では1枚を同時表示します。表示枚数を変更する場合は、style.cssで設定している画像項目の横幅と、script.jsで使用している同時表示数を合わせて変更してください。

数値調整
style.css
margin:0;
ページ全体の外側余白です。0ではブラウザ標準の外側余白を削除します。

padding:40px 20px;
ページ全体の内側余白です。40pxは上下、20pxは左右の余白です。値を大きくすると画面端との間隔が広がり、小さくすると狭くなります。

width:100%;
カルーセル操作エリアの横幅です。100%では設置した親要素の横幅いっぱいに表示されます。

gap:18px;
左右の操作ボタンと画像表示エリアの間隔です。値を大きくすると間隔が広がり、小さくすると狭くなります。

width:48px;・height:48px;
左右の操作ボタンの横幅と高さです。値を大きくするとボタンが大きくなり、小さくすると小さくなります。

padding:0;
操作ボタンに追加する内側余白です。0では追加の余白を付けません。値を大きくするとボタン内部の余白が増えます。

border-radius:50%;
操作ボタンの角丸です。横幅と高さが同じ状態で50%を指定することで円形になります。値を小さくすると丸みが弱くなります。

width:24px;・height:24px;
操作ボタン内に表示するSVG矢印の横幅と高さです。値を大きくすると矢印が大きくなり、小さくすると小さくなります。

stroke-width:2;
SVG矢印の線の太さです。値を大きくすると線が太くなり、小さくすると細くなります。

min-width:0;
画像表示エリアや各画像項目が内容によって必要以上に横へ広がることを防ぐ指定です。Flexbox内で画像表示エリアを親要素の横幅に収めるために使用します。

gap:16px;
640pxより大きい画面で使用する画像同士の間隔です。値を大きくすると画像同士が離れ、小さくすると近くなります。

transition:transform .3s ease;
画像が次の位置へ移動する時間です。.3sは0.3秒を表します。値を大きくするとゆっくり移動し、小さくすると速く移動します。

flex:0 0 calc((100% - 32px) / 3);
640pxより大きい画面で3枚の画像を同時表示するための横幅です。32pxは16pxの画像間隔2か所分で、残った横幅を3等分しています。画像同士の間隔や表示枚数を変更する場合は、この計算式も合わせて調整します。

border:1px solid #dbe4f3;
各画像項目を囲む枠線です。1pxは線の太さです。値を大きくすると枠線が太くなり、小さくすると細くなります。

border-radius:16px;
各画像の角丸です。値を大きくすると丸みが強くなり、0にすると四角になります。

width:100%;・height:220px;
画像本体の横幅と高さです。横幅100%では画像項目いっぱいに表示します。220pxを大きくすると画像が縦方向に高くなり、小さくすると低くなります。

gap:10px;
ドット同士の間隔です。値を大きくするとドット同士が離れ、小さくすると近くなります。

margin-top:24px;
画像表示部分とドットの間隔です。値を大きくすると上下の間隔が広がり、小さくすると狭くなります。

width:12px;・height:12px;
各ドットの横幅と高さです。値を大きくするとドットが大きくなり、小さくすると小さくなります。

padding:0;
ドットに追加する内側余白です。0では追加の余白を付けません。値を大きくするとドット内部の余白が増えます。

border-radius:50%;
ドットの角丸です。横幅と高さが同じ状態で50%を指定することで円形になります。値を小さくすると丸みが弱くなります。

@media (max-width:640px)
1枚表示へ切り替える基準となる画面幅です。640px以下になると、ページ全体の余白、操作ボタンと画像表示エリアの間隔、操作ボタン、SVG矢印、画像同士の間隔、各画像項目の横幅などをスマートフォン向けへ変更します。

padding:24px 12px;
640px以下で使用するページ全体の内側余白です。24pxは上下、12pxは左右の余白です。値を大きくすると画面端との間隔が広がり、小さくすると狭くなります。

gap:8px;
640px以下で使用する左右の操作ボタンと画像表示エリアの間隔です。PC表示の18pxより狭くして、画像を表示する横幅を確保します。

width:42px;・height:42px;
640px以下で使用する左右の操作ボタンの横幅と高さです。PC表示の48pxより小さくします。

width:22px;・height:22px;
640px以下で使用するSVG矢印の横幅と高さです。PC表示の24pxより小さくします。

gap:12px;
640px以下で使用する画像同士の間隔です。PC表示の16pxより狭くします。

flex:0 0 100%;
640px以下で各画像項目を画像表示エリアと同じ横幅にする指定です。100%にすることで画像を1枚ずつ表示します。値を小さくすると次の画像の一部が見える構成に変更できます。

height:220px;
640px以下で使用する画像の高さです。値を大きくすると画像が高くなり、小さくすると低くなります。

script.js
hoverPauseCarouselIndex = 0;
最初の表示位置を保持する初期値です。0は先頭の表示位置を表します。

hoverPauseCarouselTimer = null;
自動再生タイマーを開始する前の初期状態です。自動再生を開始するとタイマー情報が保存され、停止するとタイマーを解除します。

window.innerWidth <= 640 ? 1 : 3
同時表示する画像数を切り替える処理です。画面幅が640px以下の場合は1枚、それより大きい場合は3枚を同時表示します。640は切り替え基準、1と3はそれぞれの画面幅で使用する表示枚数です。style.cssの@media (max-width:640px)と同じ基準値を使用しています。

Math.max(0, ...)
移動できる最後の位置を計算するときに使用します。画像枚数が同時表示数以下の場合などでも最後の位置が負の値にならないよう、0を最小値として設定します。

parseFloat(...columnGap) || 0
CSSで設定している画像同士の間隔を取得する処理です。取得した間隔を画像1枚分の横幅と合わせて移動距離の計算に使用し、値を取得できない場合は0として計算します。

3000
自動再生の切り替え間隔です。3000ミリ秒は3秒を表します。5000へ変更すると5秒ごとになります。値を大きくすると次の画像へ移動するまでの時間が長くなり、小さくすると短くなります。

hoverPauseCarouselIndex++・hoverPauseCarouselIndex--
表示位置を1つ進める、または1つ戻す処理です。現在は1回の操作で画像1枚分移動します。

mouseenter・mouseleave
マウスホバーによる自動再生の停止と再開に使用するイベントです。mouseenterではカルーセルへマウスカーソルが入ったときに自動再生を停止し、mouseleaveではカルーセルからマウスカーソルが外れたときに自動再生を再開します。

レスポンシブ対応
このサンプルはレスポンシブ対応です。カルーセル操作エリアにはwidth:100%;を指定しているため、外側を囲む固定フレームや最大横幅を設けず、設置した親要素の横幅に合わせて表示されます。640pxより大きい画面ではflex:0 0 calc((100% - 32px) / 3);によって3枚の画像を同時表示し、画像同士には16pxの間隔を設けます。JavaScriptも3枚表示を基準に移動できる最後の位置を計算します。

画面幅640px以下では@media (max-width:640px)を使用し、ページ全体の内側余白を24px 12pxへ変更します。左右の操作ボタンと画像表示エリアの間隔は8px、操作ボタンは42px、SVG矢印は22px、画像同士の間隔は12pxへ変更し、各画像項目をflex:0 0 100%;にすることで1枚表示へ切り替えます。script.jsでもwindow.innerWidth <= 640 ? 1 : 3を使用して同じ画面幅を基準に同時表示数を切り替えます。画面幅が変更された場合は現在位置と移動できる範囲を再計算するため、スマートフォン・タブレット・PCの画面幅に合わせて利用できます。