JS

ネイティブネタ帳

UI

モーダル

タブ

ドロワー

スライダー

スクロール

アコーディオン

目次

ローディングアニメーション

ツールチップ

ヘッダー

テーブル

グラフ

背景

フォーム

フォーム

文字

文字の装飾

文字の操作

文字のカウント

数字の操作

ウィンドウ

ウィンドウ操作

タイトルの操作

ページ遷移時の動き

class

classの操作

要素

要素の操作

要素の追加

API

WP REST API

Google Books APIs

楽天市場API

openBD

画像・動画

画像の操作

YouTube

リンク

Google Analytics

cookie

検索

検索

お気に入り登録

JavaScriptのMath.max()でSwiper内の要素の高さを揃えて表示

お気に入り登録をすると、お気に入り記事一覧に登録することができます。

Math.max()

JavaScriptのMath.max()でSwiper内の要素の高さを揃えて表示

JavaScriptのMath.max()でSwiper内の要素の高さを揃えて表示

以前、jQueryのスライダーライブラリ「slick」で高さを揃えるスニペットを記事にしましたが、この記事ではネイティブなJavaScriptのライブラリ「Swiper」で、かつ要素の高さを揃えるコードもネイティブな記述で作ります。

jQueryライブラリslickの要素の高さを揃えて表示させるデザインスニペット
困っている人
困っている人

Swiperの中の要素の高さがバラバラになる・・。

こんなお悩みのある方は、是非この記事を参考にしてみてください。

Math.max()

JavaScriptの Math.max() は、入力引数として与えられた0個以上の数値の内、最大の数を返す関数です。

console.log(Math.max(1, 3, 2));
// expected output: 3

console.log(Math.max(-1, -3, -2));
// expected output: -1

const array1 = [1, 3, 2];

console.log(Math.max(...array1));
// expected output: 3

上記のサンプルのコードは 「mdn web docs」よりお借りしました。分かりやすいです。

指定要素の数の内の最大の値が返るので、この記事では「要素の高さ」を指定要素にして、その中の最大数値を返します。

そうすることで、要素の高さを最大サイズで合わせるようにします。

Swiperスライダーのサンプル

早速サンプルですが、実装後との比較ができるよう「高さを揃えない通常の場合」と「高さを揃えた場合」の2種類を設置しました。

2つのサンプルを見比べながら、どのような感じになるのかをご覧ください。

高さを揃えないSwiperのスライダーサンプル

まずは、高さを揃えないスライダーのサンプルです。

見ての通り、最大で300px。最小で200pxと、スライダーの中の要素の高さがバラバラになります。

Flexboxを使えば高さが揃うと思いきや、バラバラの要素が「孫階層」なので、高さが合わずにこのようなバラバラになってしまいます。

高さを揃えたSiwperのスライダーサンプル

次に、JavaScriptで高さを揃えたサンプルです。

このように、Swiperの中の要素が全て最大300pxの高さに合うようになります。

かかかず
かかかず

こんな感じに高さが揃うので、気持ちいいですね。

実装の手順と方法

手順と方法

それぞれのコードの解説の前に、実装の手順と方法について簡単にご説明します。

Swiperを記述

はじめにSwiper本体を読み込ませる必要があるので、以下のコードをHTMLの <head>〜</head> の中に記述しましょう。

<link
  rel="stylesheet"
  href="https://unpkg.com/swiper@7/swiper-bundle.min.css"
/>
<script src="https://unpkg.com/swiper@7/swiper-bundle.min.js"></script>

この記事では、記述するだけでOKなCDNでの読み込みの場合で進めます。

HTMLを記述

次に、設置したい場所へHTMLを記述します。この記事で記述しているHTMLのコードは以下の通りです。

<div class="wrapper">
    <div class="sample-swiper carousel no-shadow">
      <div class="swiper-container">
        <!-- Additional required wrapper -->
        <div class="swiper-wrapper">
          <!-- Slides -->
          <div class="swiper-slide Slide2">
            <div class="item2 itemBlue">その1</div>
          </div>
          <div class="swiper-slide Slide2">
            <div class="item2 itemRed">その2</div>
          </div>
          <div class="swiper-slide Slide2">
            <div class="item2 itemBlack">その3</div>
          </div>
          <div class="swiper-slide Slide2">
            <div class="item2 itemBlue">その4</div>
          </div>
          <div class="swiper-slide Slide2">
            <div class="item2 itemRed">その5</div>
          </div>
          <div class="swiper-slide Slide2">
            <div class="item2 itemBlack">その6</div>
          </div>
        </div>
        <!-- If we need pagination -->
        <div class="swiper-pagination"></div>

        <!-- If we need navigation buttons -->
        <div class="swiper-button-prev"></div>
        <div class="swiper-button-next"></div>
      </div>
      <!-- Slider main container -->
    </div>
  </div>
JavaScriptでSwiperのオプションを記述

次に、JavaScriptのコードをページに記述します。これは、Swiperの動き方を指定するオプションです。

コードは <body>〜</body> で、</body> の閉じタグ(クロージングタグ)の前に記述しましょう。

const swiper = new Swiper(".swiper-container", {
  pagination: {
    el: ".swiper-pagination",
  },
  // 前後スライドボタンを表示
  navigation: {
    nextEl: ".swiper-button-next",
    prevEl: ".swiper-button-prev",
  },
  loop: true, // ループの有効化
  slidesPerView: 3.0,
  slidesPerGroup: 1,
  initialSlide: 1,
  spaceBetween: 15,
  centeredSlides : true,
});
高さを揃えるJavaScriptを記述

最後に、高さを揃えるJavaScriptのコードを記述します。

このコードも <body>〜</body> で、</body> の閉じタグ(クロージングタグ)の前に記述しましょう。

function matchHeight(elements) {
 const target = Array.from(document.querySelectorAll(elements));
 const heightList = [];
 target.forEach(element => {
  const height = element.clientHeight;
  heightList.push(height);
 });
 const maxHeight = Math.max.apply(null,heightList);
 target.forEach(element => {
  element.style.height = maxHeight + 'px'; // 最大高さに揃える
 });
}

matchHeight('.item2');
かかかず
かかかず

これで完成です。サンプルでのCSSは微々たるものなので、割愛させてください。

ざっくりとしたコードの解説

HTML

HTMLは、CDNで記述する内容と、スライダーを設置する内容の2種類です。

まずは、CDNでSwiper本体読み込ませる記述は、以下のコードをHTMLの <head>〜</head> の中に記述します。

<link
  rel="stylesheet"
  href="https://unpkg.com/swiper@7/swiper-bundle.min.css"
/>
<script src="https://unpkg.com/swiper@7/swiper-bundle.min.js"></script>

そして次に、Swiperでスライダーを設置します。コードは以下で、設置したい場所に設置します。

<div class="wrapper">
    <div class="sample-swiper carousel no-shadow">
      <div class="swiper-container">
        <!-- Additional required wrapper -->
        <div class="swiper-wrapper">
          <!-- Slides -->
          <div class="swiper-slide Slide2">
            <div class="item2 itemBlue">その1</div>
          </div>
          <div class="swiper-slide Slide2">
            <div class="item2 itemRed">その2</div>
          </div>
          <div class="swiper-slide Slide2">
            <div class="item2 itemBlack">その3</div>
          </div>
          <div class="swiper-slide Slide2">
            <div class="item2 itemBlue">その4</div>
          </div>
          <div class="swiper-slide Slide2">
            <div class="item2 itemRed">その5</div>
          </div>
          <div class="swiper-slide Slide2">
            <div class="item2 itemBlack">その6</div>
          </div>
        </div>
        <!-- If we need pagination -->
        <div class="swiper-pagination"></div>

        <!-- If we need navigation buttons -->
        <div class="swiper-button-prev"></div>
        <div class="swiper-button-next"></div>
      </div>
      <!-- Slider main container -->
    </div>
  </div>
かかかず
かかかず

HTMLは、なんてことはないSwiperでよく見る構文です。

JavaScript

JavaScriptは、まずはじめにSwiperのオプションを記述します。

const swiper = new Swiper(".swiper-container", {
  pagination: {
    el: ".swiper-pagination",
  },
  // 前後スライドボタンを表示
  navigation: {
    nextEl: ".swiper-button-next",
    prevEl: ".swiper-button-prev",
  },
  loop: true, // ループの有効化
  slidesPerView: 3.0,
  slidesPerGroup: 1,
  initialSlide: 1,
  spaceBetween: 15,
  centeredSlides : true,
});

パラメータや、モジュールを変更することで、Swiperでは色々なレイアウト・表示ができます。それら一覧で見れるよう、以下にリンクを置いておきますので、気になった方はご覧ください。

外部リンク 利用できるパラメータやモジュール(英語)

そして、この記事のメインである「高さを合わせるコード」です。

はじめに、指定要素をquerySelectorAllで全て取得して、それぞれの要素から高さを取得します。

function matchHeight(elements) {
 const target = Array.from(document.querySelectorAll(elements));
 const heightList = [];
 target.forEach(element => {
  const height = element.clientHeight;
  heightList.push(height);
 });
 const maxHeight = Math.max.apply(null,heightList);
 target.forEach(element => {
  element.style.height = maxHeight + 'px'; // 最大高さに揃える
 });
}

matchHeight('.item2');

取得した高さは、空の配列に入れていきながら全ての高さの値から最大の値を取得し、それぞれの要素の高さを最大値に設定します。

さいごに

この高さを揃えるjavaScriptのコードは、Swiper以外の場合でも使えます。

高さを揃える場合、Flexboxを使えば簡単にできる為使うケースはあまりないとは思いますが、その他の場合でも使えるので、その時は是非参考にしてみてください。