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

カード型カルーセルを作る方法

カード型カルーセルを作る方法を紹介します。画像・タイトル・説明文・ボタンを1枚のカードとして横方向へ切り替えられるレイアウトです。商品一覧やサービス紹介、おすすめ記事、制作実績など、複数の情報をコンパクトに表示したい場面で利用できます。左右の矢印ボタンとドットナビによる切り替えに対応しているため、シンプルながら使いやすいカルーセルを実装できます。HTML・CSS・JavaScriptのみで動作するため、そのままコピーして利用でき、カードのデザインや色、画像、テキストも自由に変更できます。

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

免責事項 本記事を利用したことによる損害・不具合について、当サイトは一切の責任を負いません。

デモ

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

<!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="card-carousel_demo">

    <!-- カルーセル表示エリア -->
    <div class="card-carousel_view">

      <!-- 横にスライドするカード一覧 -->
      <div class="card-carousel_track" id="card-carousel-track">

        <!-- カードスライド1 -->
        <div class="card-carousel_slide">

          <!-- カード本体 -->
          <div class="card-carousel_card">

            <!-- カード画像：imagesフォルダに配置した画像ファイル名へ変更 -->
            <img src="images/【配置した画像のファイル名1】" alt="カード画像1">

            <!-- カード内容 -->
            <div>

              <!-- ラベル -->
              <div class="card-carousel_badge">おすすめ</div>

              <!-- カードタイトル -->
              <div class="card-carousel_title">商品カード 01</div>

              <!-- カード説明文 -->
              <p class="card-carousel_text">
                商品画像・タイトル・説明文・ボタンをまとめたカード型カルーセルです。
              </p>

              <!-- ボタン -->
              <a href="#" class="card-carousel_button">詳しく見る</a>

            </div>

          </div>

        </div>

        <!-- カードスライド2 -->
        <div class="card-carousel_slide">

          <!-- カード本体 -->
          <div class="card-carousel_card">

            <!-- カード画像：imagesフォルダに配置した画像ファイル名へ変更 -->
            <img src="images/【配置した画像のファイル名2】" alt="カード画像2">

            <!-- カード内容 -->
            <div>

              <!-- ラベル -->
              <div class="card-carousel_badge">新着</div>

              <!-- カードタイトル -->
              <div class="card-carousel_title">商品カード 02</div>

              <!-- カード説明文 -->
              <p class="card-carousel_text">
                サービス紹介や制作実績などにも利用できます。
              </p>

              <!-- ボタン -->
              <a href="#" class="card-carousel_button">詳しく見る</a>

            </div>

          </div>

        </div>

        <!-- カードスライド3 -->
        <div class="card-carousel_slide">

          <!-- カード本体 -->
          <div class="card-carousel_card">

            <!-- カード画像：imagesフォルダに配置した画像ファイル名へ変更 -->
            <img src="images/【配置した画像のファイル名3】" alt="カード画像3">

            <!-- カード内容 -->
            <div>

              <!-- ラベル -->
              <div class="card-carousel_badge">人気</div>

              <!-- カードタイトル -->
              <div class="card-carousel_title">商品カード 03</div>

              <!-- カード説明文 -->
              <p class="card-carousel_text">
                HTML・CSS・JavaScriptだけで動作します。
              </p>

              <!-- ボタン -->
              <a href="#" class="card-carousel_button">詳しく見る</a>

            </div>

          </div>

        </div>

      </div>

      <!-- 前へボタン -->
      <button class="card-carousel_arrow card-carousel_prev" type="button" id="card-carousel-prev" aria-label="前へ">
        前へ
      </button>

      <!-- 次へボタン -->
      <button class="card-carousel_arrow card-carousel_next" type="button" id="card-carousel-next" aria-label="次へ">
        次へ
      </button>

    </div>

    <!-- ドットナビ -->
    <div class="card-carousel_dots">

      <!-- 1枚目へ移動 -->
      <button class="card-carousel_dot is-active" type="button" data-index="0" aria-label="1枚目"></button>

      <!-- 2枚目へ移動 -->
      <button class="card-carousel_dot" type="button" data-index="1" aria-label="2枚目"></button>

      <!-- 3枚目へ移動 -->
      <button class="card-carousel_dot" type="button" data-index="2" aria-label="3枚目"></button>

    </div>

  </div>

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

</body>
</html>

/* ページ全体 */
body{
  margin:0;  /* ページ外側の余白 */
  font-family:sans-serif;  /* 使用するフォント */
  background:#f8fafc;  /* ページ背景色 */
}

/* カード型カルーセル全体 */
.card-carousel_demo{
  max-width:1000px;  /* 最大横幅：大きくするとカルーセル全体が広くなる */
  margin:40px auto;  /* 上下余白と中央寄せ */
  padding:20px;  /* 外側余白 */
  box-sizing:border-box;  /* paddingを幅に含める */
}

/* カルーセル表示エリア */
.card-carousel_view{
  position:relative;  /* 矢印ボタン配置の基準 */
  overflow:hidden;  /* はみ出したスライドを隠す */
}

/* 横にスライドするカード一覧 */
.card-carousel_track{
  display:flex;  /* スライドを横並び */
  transition:transform .4s ease;  /* スライド速度：.4sを大きくするとゆっくり、小さくすると速くなる */
}

/* カードスライド1枚分 */
.card-carousel_slide{
  flex:0 0 100%;  /* 1画面に1枚表示 */
  padding:20px 70px;  /* 内側余白：左右を大きくすると矢印とカードが重なりにくくなる */
  box-sizing:border-box;  /* paddingを幅に含める */
}

/* カード本体 */
.card-carousel_card{
  display:grid;  /* 画像と文章を横並び */
  grid-template-columns:320px 1fr;  /* 左画像幅：320pxを変更すると画像列の幅が変わる */
  gap:32px;  /* 画像と文章の間隔 */
  align-items:center;  /* 縦中央 */
  padding:28px;  /* カード内側余白 */
  background:#ffffff;  /* カード背景色 */
  border-radius:22px;  /* カード角丸 */
  box-shadow:0 14px 35px rgba(15,23,42,.12);  /* カードの影 */
}

/* カード画像 */
.card-carousel_card img{
  display:block;  /* 画像下の余白を消す */
  width:100%;  /* 画像横幅 */
  height:220px;  /* 画像高さ：変更すると画像の縦サイズが変わる */
  object-fit:cover;  /* 画像を枠いっぱいに表示 */
  border-radius:18px;  /* 画像角丸 */
}

/* ラベル */
.card-carousel_badge{
  display:inline-block;  /* ラベル型にする */
  margin-bottom:14px;  /* ラベル下の余白 */
  padding:6px 14px;  /* ラベル内側余白 */
  border-radius:999px;  /* 丸いラベル */
  background:#dbeafe;  /* ラベル背景色 */
  color:#2563eb;  /* ラベル文字色 */
  font-size:13px;  /* ラベル文字サイズ */
  font-weight:700;  /* ラベル文字の太さ */
}

/* カードタイトル */
.card-carousel_title{
  margin:0 0 16px;  /* 下余白 */
  font-size:32px;  /* 文字サイズ */
  font-weight:700;  /* 文字の太さ */
  color:#0f172a;  /* 文字色 */
}

/* カード説明文 */
.card-carousel_text{
  margin:0 0 24px;  /* 下余白 */
  line-height:1.8;  /* 行間 */
  color:#475569;  /* 文字色 */
}

/* カード内ボタン */
.card-carousel_button{
  display:inline-flex;  /* ボタン型 */
  align-items:center;  /* 縦中央 */
  justify-content:center;  /* 横中央 */
  width:150px;  /* ボタン横幅 */
  height:46px;  /* ボタン高さ */
  border-radius:999px;  /* 丸いボタン */
  background:#2563eb;  /* ボタン背景色 */
  color:#ffffff;  /* ボタン文字色 */
  text-decoration:none;  /* 下線を消す */
  font-weight:700;  /* 文字の太さ */
}

/* 前へ・次へ矢印ボタン */
.card-carousel_arrow{
  position:absolute;  /* カルーセル上に配置 */
  top:50%;  /* 縦中央 */
  width:46px;  /* ボタン横幅 */
  height:46px;  /* ボタン高さ */
  padding:0;  /* 内側余白なし */
  border:1px solid #dbeafe;  /* 枠線 */
  border-radius:50%;  /* 円形 */
  background:#ffffff;  /* 白背景 */
  cursor:pointer;  /* カーソル */
  transform:translateY(-50%);  /* 縦位置補正 */
  box-shadow:0 10px 22px rgba(15,23,42,.14);  /* 影 */
  font-size:0;  /* ボタン内テキストを非表示 */
  z-index:5;  /* カードより前面 */
}

/* 矢印アイコン */
.card-carousel_arrow::before{
  content:"";  /* 矢印用の空要素 */
  position:absolute;  /* ボタン内に配置 */
  top:50%;  /* 縦中央 */
  left:50%;  /* 横中央 */
  width:11px;  /* 矢印サイズ */
  height:11px;  /* 矢印サイズ */
  border-top:3px solid #2563eb;  /* 矢印の線 */
  border-right:3px solid #2563eb;  /* 矢印の線 */
}

/* 前へボタン */
.card-carousel_prev{
  left:10px;  /* 左位置 */
}

/* 次へボタン */
.card-carousel_next{
  right:10px;  /* 右位置 */
}

/* 前へ矢印 */
.card-carousel_prev::before{
  transform:translate(-40%,-50%) rotate(-135deg);  /* 左向き矢印と中央位置補正 */
}

/* 次へ矢印 */
.card-carousel_next::before{
  transform:translate(-60%,-50%) rotate(45deg);  /* 右向き矢印と中央位置補正 */
}

/* ドットナビ */
.card-carousel_dots{
  display:flex;  /* 横並び */
  justify-content:center;  /* 中央寄せ */
  gap:10px;  /* ドット間隔 */
  margin-top:24px;  /* カードとの距離 */
}

/* ドット */
.card-carousel_dot{
  width:12px;  /* ドット横幅 */
  height:12px;  /* ドット高さ */
  padding:0;  /* 内側余白なし */
  border:none;  /* 枠線なし */
  border-radius:50%;  /* 円形 */
  background:#cbd5e1;  /* 通常色 */
  cursor:pointer;  /* カーソル */
}

/* 選択中のドット */
.card-carousel_dot.is-active{
  background:#2563eb;  /* 選択中の色 */
}

/* タブレット表示 */
@media(max-width:768px){

  .card-carousel_slide{
    padding:20px 56px;  /* タブレット時の左右余白 */
  }

  .card-carousel_card{
    grid-template-columns:1fr;  /* 縦並び */
  }

  .card-carousel_title{
    font-size:26px;  /* タブレット時のタイトルサイズ */
  }

}

/* スマホ表示 */
@media(max-width:600px){

  .card-carousel_slide{
    padding:18px 48px;  /* スマホ時の左右余白 */
  }

  .card-carousel_card{
    padding:22px;  /* スマホ時のカード内側余白 */
  }

  .card-carousel_card img{
    height:190px;  /* スマホ時の画像高さ */
  }

  .card-carousel_arrow{
    width:40px;  /* スマホ時のボタン横幅 */
    height:40px;  /* スマホ時のボタン高さ */
  }

}

// カードを横に移動するエリアを取得
const cardCarouselTrack = document.getElementById("card-carousel-track");

// 前へボタンを取得
const cardCarouselPrev = document.getElementById("card-carousel-prev");

// 次へボタンを取得
const cardCarouselNext = document.getElementById("card-carousel-next");

// ドットナビを取得
const cardCarouselDots = document.querySelectorAll(".card-carousel_dot");

// スライド一覧を取得
const cardCarouselSlides = document.querySelectorAll(".card-carousel_slide");

// 現在表示中のスライド番号
let cardCarouselCurrent = 0;

// スライド総数
const cardCarouselTotal = cardCarouselSlides.length;

// スライドを切り替える
function cardCarouselShowSlide(index){

  // 1枚目より前へ移動した場合は最後へ移動
  if(index < 0){
    cardCarouselCurrent = cardCarouselTotal - 1;

  // 最後より次へ移動した場合は1枚目へ戻る
  }else if(index >= cardCarouselTotal){
    cardCarouselCurrent = 0;

  // 通常の移動
  }else{
    cardCarouselCurrent = index;
  }

  // スライドを横方向へ移動
  cardCarouselTrack.style.transform =
    "translateX(-" + (cardCarouselCurrent * 100) + "%)";

  // すべてのドットから選択状態を外す
  cardCarouselDots.forEach(function(dot){
    dot.classList.remove("is-active");
  });

  // 現在のドットを選択状態にする
  cardCarouselDots[cardCarouselCurrent].classList.add("is-active");

}

// 前へボタンを押した時
cardCarouselPrev.addEventListener("click", function(){

  // 前のカードへ移動
  cardCarouselShowSlide(cardCarouselCurrent - 1);

});

// 次へボタンを押した時
cardCarouselNext.addEventListener("click", function(){

  // 次のカードへ移動
  cardCarouselShowSlide(cardCarouselCurrent + 1);

});

// ドットナビをクリックした時
cardCarouselDots.forEach(function(dot){

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

    // クリックした番号へ移動
    cardCarouselShowSlide(Number(this.dataset.index));

  });

});

// 初期表示
cardCarouselShowSlide(0);

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

ファイル構成と設置方法

このサンプルは、HTML・CSS・JavaScriptを分けたシンプルな構成です。HTMLでカード型カルーセルのレイアウトを作成し、CSSでカードデザインやスライドアニメーションを設定しています。JavaScriptでは前へ・次へボタンとドットナビによるスライド切り替え処理を行っています。表示する画像は sample/images/ フォルダへ配置して利用します。

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

sample/index.html をブラウザで開くとカード型カルーセルを確認できます。使用する画像は sample/images/ に配置し、HTML内の画像パスを書き換えてください。カードの横幅・高さ・角丸・余白・影などのデザインは style.css で変更できます。スライドアニメーションの速度は style.css の transition: .4s を変更すると調整でき、数値を大きくするとゆっくり、小さくすると速く切り替わります。