基本のカルーセルを作る方法【HTML/CSS/JavaScript・サンプルコード付き】

基本のカルーセルを作る方法

Webサイトで商品や記事、画像などの複数コンテンツを横並びにして見せたい場合は、カルーセルを使うと限られたスペースを有効に活用できます。この記事では、HTML・CSS・JavaScriptを使って、複数のカードを同時に表示しながら左右へ1枚ずつ送れる基本のカルーセルを作ります。左右の操作ボタンにはSVGアイコンを使用し、現在の表示位置が分かるドットも配置します。

パソコンでは5枚のカードのうち3枚を同時に表示し、左右のボタンをクリックすると横に並んだカードを1枚分ずつ移動できます。ドットをクリックして表示位置を直接変更することもでき、最初と最後ではそれ以上移動しないようにボタンを無効化します。商品一覧や関連記事、サービス紹介など、複数のコンテンツを横方向にまとめて見せたい場面に利用できます。

HTMLではカルーセルと各カード、操作ボタン、ドットを配置し、CSSでは複数カードの横並びや表示領域、ボタンなどのデザインを設定します。JavaScriptでは表示する位置を管理し、カードの幅と間隔に合わせてカルーセルを移動させます。画面幅640px以下ではカードを1枚表示へ切り替えるため、パソコンだけでなくスマートフォンでも操作しやすい構成です。

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

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

デモ

基本のカルーセル

複数のカードを横に並べ、左右のボタンまたはドットで1枚ずつ送れます。

HTML

HTMLでカルーセル全体と表示するカードを配置します。

CSS

CSSでカードを横並びにしてデザインを設定します。

JavaScript

JavaScriptでカードを1枚ずつ横方向へ移動します。

PHP

カードとして表示するコンテンツを自由に変更できます。

WordPress

記事や商品などを並べるカルーセルにも利用できます。

パソコンでは3枚のカードを同時に表示し、左右のボタンまたはドットでカードを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="basic-carousel_wrap">

    <!-- タイトル -->
    <div class="basic-carousel_title">
      基本のカルーセル
    </div>

    <!-- 説明文 -->
    <p class="basic-carousel_text">
      複数のカードを横に並べ、左右のボタンまたはドットで1枚ずつ送れます。
    </p>

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

      <!-- 前のカードを表示するボタン -->
      <button
        class="basic-carousel_button basic-carousel_prev"
        type="button"
        aria-label="前のカードを表示">

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

      </button>

      <!-- カードの表示領域 -->
      <div class="basic-carousel_view">

        <!-- 横方向へ移動するカード一覧 -->
        <div class="basic-carousel_track">

          <!-- 1枚目のカード -->
          <div class="basic-carousel_card">

            <div class="basic-carousel_card-title">
              HTML
            </div>

            <p class="basic-carousel_card-text">
              HTMLでカルーセル全体と表示するカードを配置します。
            </p>

          </div>

          <!-- 2枚目のカード -->
          <div class="basic-carousel_card">

            <div class="basic-carousel_card-title">
              CSS
            </div>

            <p class="basic-carousel_card-text">
              CSSでカードを横並びにしてデザインを設定します。
            </p>

          </div>

          <!-- 3枚目のカード -->
          <div class="basic-carousel_card">

            <div class="basic-carousel_card-title">
              JavaScript
            </div>

            <p class="basic-carousel_card-text">
              JavaScriptでカードを1枚ずつ横方向へ移動します。
            </p>

          </div>

          <!-- 4枚目のカード -->
          <div class="basic-carousel_card">

            <div class="basic-carousel_card-title">
              PHP
            </div>

            <p class="basic-carousel_card-text">
              カードとして表示するコンテンツを自由に変更できます。
            </p>

          </div>

          <!-- 5枚目のカード -->
          <div class="basic-carousel_card">

            <div class="basic-carousel_card-title">
              WordPress
            </div>

            <p class="basic-carousel_card-text">
              記事や商品などを並べるカルーセルにも利用できます。
            </p>

          </div>

        </div>

      </div>

      <!-- 次のカードを表示するボタン -->
      <button
        class="basic-carousel_button basic-carousel_next"
        type="button"
        aria-label="次のカードを表示">

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

      </button>

    </div>

    <!-- 表示位置を切り替えるドット -->
    <div class="basic-carousel_dots">

      <button
        class="basic-carousel_dot is-active"
        type="button"
        aria-label="1番目の位置を表示">
      </button>

      <button
        class="basic-carousel_dot"
        type="button"
        aria-label="2番目の位置を表示">
      </button>

      <button
        class="basic-carousel_dot"
        type="button"
        aria-label="3番目の位置を表示">
      </button>

    </div>

  </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; /* ページ全体で使用するフォント */
}

/* カルーセル内のサイズ計算 */
.basic-carousel_wrap,
.basic-carousel_wrap *{
  box-sizing:border-box; /* paddingとborderを横幅へ含める */
}

/* カルーセル全体 */
.basic-carousel_wrap{
  width:100%; /* 画面幅に合わせて横幅を縮小 */
  max-width:900px; /* 最大横幅。値を大きくすると全体が横に広がる */
  margin:40px auto; /* 上下40pxの余白を付けて左右中央へ配置 */
  padding:32px; /* 内側の余白。値を大きくすると余白が広がる */
  border:1px solid #dbe4f3; /* 全体を囲む枠線。1pxを大きくすると太くなる */
  border-radius:20px; /* 全体の角丸。値を大きくすると丸みが強くなる */
  background:#f8fbff; /* カルーセル全体の背景色 */
  color:#111827; /* カルーセル全体の基本文字色 */
  font-family:sans-serif; /* カルーセル内で使用するフォント */
}

/* タイトル */
.basic-carousel_title{
  margin:0 0 12px; /* 下側12pxの余白。値を大きくすると説明文との間隔が広がる */
  font-size:22px; /* タイトルの文字サイズ。値を大きくすると文字が大きくなる */
  font-weight:700; /* タイトルの太さ。値を大きくすると文字が太くなる */
  line-height:1.5; /* 行の高さ。値を大きくすると行間が広がる */
  text-align:center; /* タイトルを中央揃えにする */
}

/* 説明文 */
.basic-carousel_text{
  margin:0 0 28px; /* 下側28pxの余白。値を大きくするとカルーセルとの間隔が広がる */
  color:#4b5563; /* 説明文の文字色 */
  font-size:16px; /* 説明文の文字サイズ。値を大きくすると文字が大きくなる */
  line-height:1.8; /* 説明文の行間。値を大きくすると行間が広がる */
  text-align:center; /* 説明文を中央揃えにする */
}

/* カルーセルの操作エリア */
.basic-carousel_area{
  display:flex; /* ボタンとカード表示領域を横並びにする */
  align-items:center; /* 縦方向の中央へ揃える */
  gap:18px; /* ボタンと表示領域の間隔。値を大きくすると間隔が広がる */
}

/* 前後の操作ボタン */
.basic-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; /* マウスカーソルを指マークにする */
}

/* 移動できないときの操作ボタン */
.basic-carousel_button:disabled{
  background:#cbd5e1; /* 無効時の背景色 */
  cursor:default; /* 無効時は通常のカーソルにする */
}

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

/* カードの表示領域 */
.basic-carousel_view{
  flex:1; /* 左右ボタンを除いた残りの横幅を使用 */
  min-width:0; /* Flexbox内で表示領域が縮小できるようにする */
  overflow:hidden; /* 表示領域の外側にあるカードを隠す */
}

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

/* 各カード */
.basic-carousel_card{
  flex:0 0 calc((100% - 32px) / 3);
  /*
    3枚のカードを同時表示する。
    32pxは16pxのカード間隔2か所分。
    3を変更すると1画面に表示するカード数の計算が変わる。
  */
  min-width:0; /* カードが必要以上に横へ広がるのを防ぐ */
  padding:28px 22px; /* 上下28px・左右22px。値を大きくすると内側余白が広がる */
  border:1px solid #dbe4f3; /* カードの枠線。1pxを大きくすると太くなる */
  border-radius:16px; /* カードの角丸。値を大きくすると丸みが強くなる */
  background:#ffffff; /* カードの背景色 */
}

/* カードのタイトル */
.basic-carousel_card-title{
  margin:0 0 12px; /* 下側12pxの余白。値を大きくすると本文との間隔が広がる */
  color:#111827; /* タイトルの文字色 */
  font-size:22px; /* タイトルの文字サイズ。値を大きくすると文字が大きくなる */
  font-weight:700; /* タイトルの太さ。値を大きくすると文字が太くなる */
  line-height:1.5; /* 行の高さ。値を大きくすると行間が広がる */
}

/* カードの本文 */
.basic-carousel_card-text{
  margin:0; /* ブラウザ標準の外側余白を削除 */
  color:#4b5563; /* 本文の文字色 */
  font-size:15px; /* 本文の文字サイズ。値を大きくすると文字が大きくなる */
  line-height:1.8; /* 本文の行間。値を大きくすると行間が広がる */
}

/* ドット全体 */
.basic-carousel_dots{
  display:flex; /* ドットを横並びにする */
  align-items:center; /* ドットを縦方向の中央へ揃える */
  justify-content:center; /* ドットを横方向の中央へ配置する */
  gap:10px; /* ドット同士の間隔。値を大きくすると間隔が広がる */
  margin-top:24px; /* 上側24pxの余白。値を大きくするとカードとの間隔が広がる */
}

/* 各ドット */
.basic-carousel_dot{
  width:12px; /* ドットの横幅。値を大きくするとドットが大きくなる */
  height:12px; /* ドットの高さ。値を大きくするとドットが大きくなる */
  padding:0; /* ボタン内側の追加余白を削除 */
  border:none; /* ブラウザ標準の枠線を削除 */
  border-radius:50%; /* 50%で円形にする */
  background:#cbd5e1; /* 通常時のドットの色 */
  cursor:pointer; /* マウスカーソルを指マークにする */
}

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

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

  /* ページ全体 */
  body{
    padding:24px 12px; /* 上下24px・左右12px。狭い画面に合わせて余白を小さくする */
  }

  /* カルーセル全体 */
  .basic-carousel_wrap{
    padding:24px 18px; /* 上下24px・左右18px。狭い画面に合わせて余白を小さくする */
  }

  /* カルーセルの操作エリア */
  .basic-carousel_area{
    gap:8px; /* ボタンと表示領域の間隔。狭い画面に合わせて間隔を小さくする */
  }

  /* 前後の操作ボタン */
  .basic-carousel_button{
    width:42px; /* スマートフォンでのボタン横幅。値を大きくするとボタンが大きくなる */
    height:42px; /* スマートフォンでのボタン高さ。値を大きくするとボタンが大きくなる */
  }

  /* 操作ボタン内のSVG */
  .basic-carousel_button svg{
    width:22px; /* スマートフォンでのSVG横幅。値を大きくすると矢印が大きくなる */
    height:22px; /* スマートフォンでのSVG高さ。値を大きくすると矢印が大きくなる */
  }

  /* 横方向へ移動するカード一覧 */
  .basic-carousel_track{
    gap:12px; /* スマートフォンでのカード間隔。値を大きくすると間隔が広がる */
  }

  /* 各カード */
  .basic-carousel_card{
    flex:0 0 100%; /* スマートフォンではカードを1枚表示する */
    padding:26px 22px; /* 上下26px・左右22px。値を大きくすると内側余白が広がる */
  }

}

// カルーセル全体を取得
const basicCarousel=document.querySelector(
  ".basic-carousel_wrap"
);

// 横方向へ移動するカード一覧を取得
const basicCarouselTrack=basicCarousel.querySelector(
  ".basic-carousel_track"
);

// すべてのカードを取得
const basicCarouselCards=basicCarousel.querySelectorAll(
  ".basic-carousel_card"
);

// 前のカードを表示するボタンを取得
const basicCarouselPrev=basicCarousel.querySelector(
  ".basic-carousel_prev"
);

// 次のカードを表示するボタンを取得
const basicCarouselNext=basicCarousel.querySelector(
  ".basic-carousel_next"
);

// 表示位置を切り替えるドットを取得
const basicCarouselDots=basicCarousel.querySelectorAll(
  ".basic-carousel_dot"
);

// 現在の表示位置
// 0は最初の位置。
// 値が1増えるごとにカードを1枚分送る。
let basicCarouselIndex=0;

// 画面幅に応じて同時表示するカード数を取得
function getBasicCarouselVisibleCount(){

  // 640px以下では1枚表示。
  // 640を大きくすると1枚表示へ切り替わる画面幅が広くなる。
  if(window.innerWidth<=640){
    return 1;
  }

  // 641px以上では3枚表示。
  // 3を変更する場合はCSS側のカード幅も同じ表示枚数に合わせて変更する。
  return 3;

}

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

  // 現在の同時表示枚数を取得
  const visibleCount=
    getBasicCarouselVisibleCount();

  // 最後まで移動できる位置を計算
  const maxIndex=
    basicCarouselCards.length-visibleCount;

  // 画面幅変更後に現在位置が範囲外になった場合は最後の位置へ戻す
  if(basicCarouselIndex>maxIndex){
    basicCarouselIndex=maxIndex;
  }

  // 1枚目のカードを取得
  const firstCard=
    basicCarouselCards[0];

  // カード1枚の実際の横幅を取得
  const cardWidth=
    firstCard.getBoundingClientRect().width;

  // カード一覧に適用されているCSSを取得
  const trackStyle=
    window.getComputedStyle(basicCarouselTrack);

  // CSSで設定したカード間隔を取得
  // 間隔を取得できない場合は0として扱う
  const gap=
    parseFloat(trackStyle.columnGap) || 0;

  // カード1枚の横幅と間隔を合わせた距離だけ横方向へ移動
  basicCarouselTrack.style.transform=
    "translateX(-"+
    ((cardWidth+gap)*basicCarouselIndex)+
    "px)";

  // 現在位置に対応するドットを切り替える
  basicCarouselDots.forEach(function(dot,index){

    dot.classList.toggle(
      "is-active",
      index===basicCarouselIndex
    );

  });

  // 最初の位置では前ボタンを無効にする
  basicCarouselPrev.disabled=
    basicCarouselIndex===0;

  // 最後の位置では次ボタンを無効にする
  basicCarouselNext.disabled=
    basicCarouselIndex===maxIndex;

}

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

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

    basicCarouselIndex--;

    updateBasicCarousel();

  }

});

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

  // 現在の同時表示枚数を取得
  const visibleCount=
    getBasicCarouselVisibleCount();

  // 最後まで移動できる位置を計算
  const maxIndex=
    basicCarouselCards.length-visibleCount;

  // 最後の位置より前にいる場合だけ1枚分進める
  if(basicCarouselIndex<maxIndex){

    basicCarouselIndex++;

    updateBasicCarousel();

  }

});

// 各ドットをクリックしたとき
basicCarouselDots.forEach(function(dot,index){

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

    // クリックしたドットに対応する位置へ移動
    basicCarouselIndex=index;

    updateBasicCarousel();

  });

});

// 画面幅が変わったときに表示枚数と位置を再計算
window.addEventListener("resize",function(){

  updateBasicCarousel();

});

// ページを開いたときの状態を設定
updateBasicCarousel();

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

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

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

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

ファイル構成と設置方法

このサンプルはHTML・CSS・JavaScriptの3ファイルで構成されています。HTMLでは5枚のカード、左右の操作ボタン、表示位置を切り替える3つのドットを配置します。CSSでは複数のカードを横並びにし、PCでは3枚を同時表示、画面幅640px以下では1枚表示へ切り替えます。JavaScriptでは左右のボタンやドットの操作に合わせてカード一覧を横方向へ移動し、現在位置に応じて操作ボタンとドットの状態を更新します。

sample/
├── index.html
├── style.css
└── script.js

各ファイルの役割
index.htmlはカルーセル全体を構成するファイルです。タイトル、説明文、5枚のカード、左右の操作ボタン、3つのドットを配置しています。カードのタイトルや本文を変更すると、カルーセルに表示する内容を用途に合わせて編集できます。左右の操作ボタンにはSVGの矢印を使用しています。

style.cssはカルーセルのレイアウトとデザインを設定するファイルです。カルーセル全体の横幅や余白、カードの表示枚数、カード間隔、背景色、枠線、角丸、操作ボタン、SVG、ドット、カードが移動する時間などを変更できます。

script.jsはカルーセルを操作するファイルです。左右のボタンをクリックしたときにカードを1枚分ずつ移動し、ドットをクリックしたときは対応する位置へ移動します。また、最初と最後の位置では移動できない方向のボタンを無効にし、画面幅が変わったときは表示枚数と現在位置を再計算します。

設置方法・使い方
sampleフォルダへindex.html、style.css、script.jsを配置します。3つのファイルを同じ階層へ保存したあと、sample/index.htmlをブラウザで開いてください。index.htmlからstyle.cssとscript.jsを読み込むため、追加のライブラリや外部サービスを用意する必要はありません。

PCでは5枚のカードのうち3枚が同時に表示されます。右側のボタンをクリックするとカードが1枚分ずつ横へ移動し、左側のボタンをクリックすると前の位置へ戻ります。下部のドットをクリックすると対応する位置へ直接移動できます。最初の位置では左ボタン、最後の位置では右ボタンが無効になります。

カスタマイズできる内容
index.htmlでは「基本のカルーセル」のタイトル、説明文、各カードのタイトルと本文を変更できます。商品、関連記事、サービス紹介など、複数の項目を横並びで見せる内容へ置き換えて利用できます。左右の操作ボタンに使用しているSVGは、各pathのd属性を変更すると別の矢印形状へ変更できます。

style.cssではカルーセル全体の最大横幅、余白、背景色、枠線、角丸、カードの大きさと間隔、操作ボタンの大きさと色、SVGの大きさと線の太さ、ドットの大きさと間隔、カードの移動時間を変更できます。PCの表示枚数を変更する場合は、.basic-carousel_cardの横幅計算とscript.jsの表示枚数を同じ枚数になるように変更してください。

数値調整
style.css
padding:40px 20px;
ページ全体の内側余白です。上下の40pxを大きくすると上下の余白が広がり、左右の20pxを大きくすると画面端との間隔が広がります。

max-width:900px;
カルーセル全体の最大横幅です。値を大きくすると横に広がり、小さくするとコンパクトになります。

margin:40px auto;
カルーセル全体の上下余白です。40pxを大きくすると上下の間隔が広がり、小さくすると狭くなります。

padding:32px;
カルーセル全体の内側余白です。値を大きくすると内容と外枠の間隔が広がり、小さくすると狭くなります。

border:1px solid #dbe4f3;
カルーセル全体の枠線です。1pxを大きくすると枠線が太くなります。

border-radius:20px;
カルーセル全体の角丸です。値を大きくすると丸みが強くなり、0にすると四角になります。

margin:0 0 12px;
カルーセルのタイトル下側の余白です。12pxを大きくすると説明文との間隔が広がり、小さくすると狭くなります。

font-size:22px;
カルーセルのタイトル文字サイズです。値を大きくすると文字が大きくなり、小さくすると小さくなります。

font-weight:700;
カルーセルのタイトルの太さです。値を大きくすると太くなり、小さくすると細くなります。

line-height:1.5;
カルーセルのタイトルの行の高さです。値を大きくすると行間が広がり、小さくすると狭くなります。

margin:0 0 28px;
説明文の下側余白です。28pxを大きくするとカルーセルとの間隔が広がり、小さくすると狭くなります。

font-size:16px;
説明文の文字サイズです。値を大きくすると文字が大きくなり、小さくすると小さくなります。

line-height:1.8;
説明文の行間です。値を大きくすると行間が広がり、小さくすると詰まった表示になります。

gap:18px;
左右の操作ボタンとカード表示領域の間隔です。値を大きくすると間隔が広がり、小さくすると近くなります。

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

border-radius:50%;
操作ボタンを円形にする値です。50%で円形になり、値を小さくすると角の丸みが弱くなります。

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

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

gap:16px;
PC表示でのカード同士の間隔です。値を大きくするとカード間が広がり、小さくすると狭くなります。

transition:transform .3s ease;
カードが横へ移動するときの時間です。0.3秒で移動します。値を大きくするとゆっくり、小さくすると速く移動します。

flex:0 0 calc((100% - 32px) / 3);
PCで3枚のカードを同時表示するための横幅です。32pxは16pxのカード間隔2か所分で、3は表示するカード枚数です。表示枚数を変更する場合は、カード間隔の合計とscript.js側の表示枚数も合わせて変更してください。

padding:28px 22px;
カードの内側余白です。上下の28pxを大きくするとカードが縦方向に広がり、左右の22pxを大きくすると文章と枠線の間隔が広がります。

border:1px solid #dbe4f3;
カードの枠線です。1pxを大きくすると枠線が太くなります。

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

margin:0 0 12px;
カードタイトルの下側余白です。12pxを大きくすると本文との間隔が広がり、小さくすると狭くなります。

font-size:22px;
カードタイトルの文字サイズです。値を大きくすると文字が大きくなり、小さくすると小さくなります。

font-weight:700;
カードタイトルの文字の太さです。値を大きくすると太くなり、小さくすると細くなります。

line-height:1.5;
カードタイトルの行の高さです。値を大きくすると行間が広がります。

font-size:15px;
カード本文の文字サイズです。値を大きくすると文字が大きくなり、小さくすると小さくなります。

line-height:1.8;
カード本文の行間です。値を大きくすると行間が広がり、小さくすると狭くなります。

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

margin-top:24px;
ドットとカルーセルの間の余白です。値を大きくすると間隔が広がり、小さくすると狭くなります。

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

border-radius:50%;
ドットを円形にする値です。50%で円形になり、値を小さくすると角の丸みが弱くなります。

script.js
let basicCarouselIndex=0;
カルーセルを最初の位置から表示するための値です。0が最初の位置を表し、1増えるごとにカードを1枚分送ります。

window.innerWidth<=640
1枚表示へ切り替える画面幅です。640を大きくすると、より広い画面でも1枚表示へ切り替わります。

return 1;
画面幅640px以下で同時表示するカード枚数です。現在は1枚に設定しています。

return 3;
画面幅641px以上で同時表示するカード枚数です。現在は3枚に設定しています。変更する場合はstyle.cssのカード横幅計算も同じ表示枚数へ変更してください。

parseFloat(trackStyle.columnGap) || 0
CSSからカード間隔を取得できなかった場合に使用する値です。0は間隔なしとして計算することを表します。

レスポンシブ対応
このサンプルはレスポンシブ対応です。style.cssのwidth:100%とmax-width:900pxにより、カルーセル全体が画面幅に合わせて縮小されます。画面幅640px以下では、ページ全体の余白をpadding:24px 12px;、カルーセル全体の余白をpadding:24px 18px;、操作ボタンと表示領域の間隔をgap:8px;へ変更します。

さらに640px以下では、操作ボタンを42px四方、SVGを22px四方、カード間隔を12px、カードの内側余白を26px 22pxへ変更します。カードはflex:0 0 100%;として1枚表示に切り替え、script.jsでも640px以下では表示枚数を1枚として計算します。画面幅が変更された場合はJavaScriptで表示位置を再計算するため、スマートフォン・タブレット・PCで利用できます。