画像サイズを気にせず使えるスライダーを作る方法【HTML/CSS/JavaScript・サンプルコード付き】

スライダー

画像サイズを気にせず使えるスライダーを作る方法

画像サイズを気にせず使えるスライダーをHTML・CSS・JavaScriptで作る方法を紹介します。縦長・横長・正方形などサイズや縦横比が異なる画像でも、表示エリアの大きさを一定に保ったまま表示できるため、画像ごとにサイズを調整する手間を減らせます。

このサンプルでは、画像そのもののサイズは変更せず、固定サイズの表示エリア内へ収まるように表示します。そのため、大きさの異なる画像を混在させてもスライダー全体のレイアウトが崩れにくく、商品画像や写真ギャラリー、作品一覧など幅広い用途で利用できます。

表示する画像は自由に差し替えられ、前へ・次へボタンで画像を切り替えられます。画像サイズを統一して編集する必要がないため、さまざまなサイズの画像をそのまま利用したいWebサイトにも導入しやすいサンプルです。

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

デモ

このデモでは、縦長・横長・正方形などサイズの異なる画像を同じ表示エリアで切り替えられます。画像のサイズは変更せず、表示枠の中へ収まるように表示される様子を確認できます。

横長画像
縦長画像
正方形画像

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

<!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="flexible-image-slider_demo">

    <!-- 画像表示エリア -->
    <div class="flexible-image-slider_box">

      <!-- 横に動くスライド一覧 -->
      <div class="flexible-image-slider_track" id="flexible-image-slider-track">

        <!-- スライド1：画像1 -->
        <div class="flexible-image-slider_slide">
          <img src="images/【ここに1枚目の画像ファイル名】" alt="画像1">
        </div>

        <!-- スライド2：画像2 -->
        <div class="flexible-image-slider_slide">
          <img src="images/【ここに2枚目の画像ファイル名】" alt="画像2">
        </div>

        <!-- スライド3：画像3 -->
        <div class="flexible-image-slider_slide">
          <img src="images/【ここに3枚目の画像ファイル名】" alt="画像3">
        </div>

      </div>

    </div>

    <!-- 操作ボタン -->
    <div class="flexible-image-slider_controls">

      <button class="flexible-image-slider_button" type="button" id="flexible-image-slider-prev">
        前へ
      </button>

      <button class="flexible-image-slider_button" type="button" id="flexible-image-slider-next">
        次へ
      </button>

    </div>

  </div>

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

</body>
</html>

ファイル構成と設置方法

このサンプルは、HTML・CSS・JavaScriptの3ファイルで構成されています。HTMLでスライダーのレイアウトを作成し、CSSで画像を固定サイズの表示枠内へ収まるように表示し、JavaScriptで画像を切り替えます。画像の縦横比やサイズが異なっていても、表示枠の大きさを保ったまま利用できます。 

sample/
├── index.html
├── style.css
├── script.js
└── images/
    ├── 【ここに1枚目の画像】
    ├── 【ここに2枚目の画像】
    └── 【ここに3枚目の画像】

sampleフォルダをそのまま配置し、ブラウザで sample/index.html を開くと動作を確認できます。使用する画像は sample/images/ フォルダへ配置し、index.html の各 img タグの src 属性へ画像ファイル名を指定してください。画像サイズを事前に統一する必要はありません。

表示枠の横幅や高さ、背景色、角丸などのデザインは style.css で変更できます。画像切り替え速度は style.css の transition で設定しており、.45s は0.45秒を表します。数値を大きくするとゆっくり、小さくすると速く切り替わります。表示枠の高さは .flexible-image-slider_slide の height を変更することで調整できます。

コメント