複数の画像を表示するカルーセルを作る方法【HTML/CSS/JavaScript・サンプルコード付き】

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

複数の画像を表示するカルーセルを作る方法

HTML・CSS・JavaScriptを使って、複数の画像を同時に表示するカルーセルを作る方法を紹介します。このサンプルでは6枚の画像を横方向に並べ、PCでは3枚の画像を同時に表示します。カルーセルの左右に配置した矢印ボタンをクリックすると、表示している画像を1枚ずつ横方向へ移動できます。

左右の操作ボタンにはSVGの矢印アイコンを使用し、現在の表示位置はカルーセル下部のドットで確認できます。最初または最後の表示位置まで移動すると、それ以上進めない方向の矢印ボタンが無効になります。商品画像、作品一覧、旅行写真、ギャラリーなど、複数の画像を限られたスペースで順番に見せたい場合に利用できます。

画面幅640px以下では画像を1枚ずつ表示するレイアウトへ切り替え、スマートフォンでも画像を見やすい大きさで確認できるようにしています。HTMLでは表示する画像を配置し、CSSでは画像の横並びやサイズ、余白、操作ボタンなどのデザインを設定します。JavaScriptでは左右の矢印ボタンとドットによる1枚ずつの移動、現在位置の更新、画面幅に応じた表示枚数の切り替えを行います。

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

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

デモ

複数の画像を表示するカルーセル

左右のボタンまたはドットで画像を1枚ずつ送れます。

左右の矢印ボタンまたはドットを操作すると、画像が1枚ずつ横方向へ移動します。PCでは3枚、画面幅640px以下では1枚の画像を表示します。

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

<!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="multi-image-carousel_area">

    <!-- 前の画像を表示するボタン -->
    <button
      class="multi-image-carousel_button"
      id="multi-image-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="multi-image-carousel_view">

      <!-- 横方向へ移動する画像一覧 -->
      <div class="multi-image-carousel_track" id="multi-image-carousel-track">

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

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

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

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

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

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

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

      </div>

    </div>

    <!-- 次の画像を表示するボタン -->
    <button
      class="multi-image-carousel_button"
      id="multi-image-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="multi-image-carousel_dots" id="multi-image-carousel-dots">

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

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

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

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

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

    <!-- 6番目の位置へ移動 -->
    <button
      class="multi-image-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; /* ページ全体で使用するフォント */
}

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

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

/* 左右の操作ボタン */
.multi-image-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; /* マウスを重ねたときに指の形へ変更 */
}

/* 操作できない左右ボタン */
.multi-image-carousel_button:disabled{
  background:#cbd5e1; /* 操作できないボタンの背景色 */
  cursor:default; /* 通常のマウスポインターへ戻す */
}

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

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

/* 横方向へ移動する画像一覧 */
.multi-image-carousel_track{
  display:flex; /* 画像を横並びにする */
  gap:16px; /* 画像同士の間隔。値を大きくすると間隔が広がる */
  transition:transform .3s ease; /* 0.3秒で移動。値を大きくするとゆっくり、小さくすると速くなる */
}

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

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

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

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

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

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

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

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

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

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

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

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

  /* 画像本体 */
  .multi-image-carousel_item img{
    height:220px; /* スマートフォンでの画像高さ。値を変更すると縦サイズが変わる */
  }

}

/* カルーセル本体を取得 */
const multiImageCarouselArea =
  document.querySelector(".multi-image-carousel_area");

/* 横方向へ移動する画像一覧を取得 */
const multiImageCarouselTrack =
  multiImageCarouselArea.querySelector(".multi-image-carousel_track");

/* すべての画像を取得 */
const multiImageCarouselItems =
  multiImageCarouselArea.querySelectorAll(".multi-image-carousel_item");

/* 前へボタンを取得 */
const multiImageCarouselPrev =
  multiImageCarouselArea.querySelector("#multi-image-carousel-prev");

/* 次へボタンを取得 */
const multiImageCarouselNext =
  multiImageCarouselArea.querySelector("#multi-image-carousel-next");

/* すべてのドットを取得 */
const multiImageCarouselDots =
  document.querySelectorAll(".multi-image-carousel_dot");

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

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

  /*
    640px以下では1枚、それより広い画面では3枚表示する。
    640を変更すると表示枚数を切り替える画面幅が変わる。
    1と3を変更すると各画面幅で使用する表示枚数が変わる。
  */
  return window.innerWidth <= 640 ? 1 : 3;

}

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

  /*
    画像総数から同時表示枚数を引いて最後の位置を計算する。
    0を下限にすることで画像数が少ない場合でも負の値にならないようにする。
  */
  return Math.max(
    0,
    multiImageCarouselItems.length - multiImageCarouselVisibleCount()
  );

}

/* カルーセルの表示状態を更新 */
function multiImageCarouselUpdate(){

  /* 1枚分の実際の横幅を取得 */
  const multiImageCarouselCardWidth =
    multiImageCarouselItems[0].getBoundingClientRect().width;

  /* 画像一覧へ適用されているCSSを取得 */
  const multiImageCarouselStyle =
    getComputedStyle(multiImageCarouselTrack);

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

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

  /* 画面幅変更後に現在位置が最大値を超えた場合は補正 */
  if(multiImageCarouselIndex > multiImageCarouselMax){

    multiImageCarouselIndex =
      multiImageCarouselMax;

  }

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

  /* 最初の位置では前へボタンを無効にする */
  multiImageCarouselPrev.disabled =
    multiImageCarouselIndex === 0;

  /* 最後の位置では次へボタンを無効にする */
  multiImageCarouselNext.disabled =
    multiImageCarouselIndex === multiImageCarouselMax;

  /* ドットの表示数と現在位置を更新 */
  multiImageCarouselDots.forEach(function(dot,dotIndex){

    /* 移動できない位置のドットを非表示にする */
    dot.hidden =
      dotIndex > multiImageCarouselMax;

    /* 現在位置のドットだけアクティブにする */
    dot.classList.toggle(
      "is-active",
      dotIndex === multiImageCarouselIndex
    );

  });

}

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

  /* 最初の位置より後ろにいる場合だけ1つ戻す */
  if(multiImageCarouselIndex > 0){

    multiImageCarouselIndex--;

    /* 表示状態を更新 */
    multiImageCarouselUpdate();

  }

});

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

  /* 最後の位置より前にいる場合だけ1つ進める */
  if(multiImageCarouselIndex < multiImageCarouselMaxIndex()){

    multiImageCarouselIndex++;

    /* 表示状態を更新 */
    multiImageCarouselUpdate();

  }

});

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

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

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

      /* クリックしたドットの位置へ変更 */
      multiImageCarouselIndex =
        dotIndex;

      /* 表示状態を更新 */
      multiImageCarouselUpdate();

    }

  });

});

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

  /* 表示枚数と現在位置を再計算 */
  multiImageCarouselUpdate();

});

/* ページを開いたときの表示状態を設定 */
multiImageCarouselUpdate();

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

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

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

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

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

ファイル構成と設置方法

このサンプルはHTML・CSS・JavaScriptと6枚のPNG画像で構成されています。HTMLでは左右の操作ボタン、6つの画像項目、現在位置を選択できるドットを配置します。CSSでは画像の横並び、表示枚数、画像の高さ、左右の操作ボタン、ドット、移動アニメーションなどを設定します。JavaScriptでは左右のボタンやドットを操作したときの移動処理を行い、画面幅に応じて同時に表示する画像数と移動できる位置を切り替えます。画像は利用者自身で用意し、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つのmulti-image-carousel_item、表示位置を直接選択するドットを記述しています。画像はimages/image1.pngからimages/image6.pngまでを参照します。画像のファイル名や代替テキストを変更する場合もindex.htmlを編集します。

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

script.jsはカルーセルの移動を制御するファイルです。左右のボタンをクリックすると画像を1枚分ずつ横方向へ移動し、ドットをクリックすると対応する位置へ直接移動します。最初と最後の位置では、それ以上移動できない方向のボタンを無効にします。また、画面幅に応じて同時表示数と移動可能な位置を計算し、画面幅が変更された場合にも表示位置を更新します。

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フォルダ内の画像を表示します。左右の操作ボタンをクリックすると画像が1枚分ずつ横方向へ移動し、下部のドットをクリックすると対応する表示位置へ直接切り替えられます。

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

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

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

数値調整
style.css
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矢印の線の太さです。値を大きくすると線が太くなり、小さくすると細くなります。

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

transition:transform .3s ease;
画像が次の位置へ移動する時間です。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%;
各画像の横幅です。100%では画像項目の横幅いっぱいに表示されます。

height: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
multiImageCarouselIndex = 0
最初の表示位置を保持する初期値です。0は先頭の表示位置を表します。

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

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

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

multiImageCarouselIndex--・multiImageCarouselIndex++
左右の操作ボタンをクリックしたときに現在位置を変更する処理です。--では1つ前の位置へ戻り、++では1つ次の位置へ進みます。

レスポンシブ対応
このサンプルはレスポンシブ対応です。カルーセル操作エリアには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の画面幅に合わせて利用できます。