以前、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本体を読み込ませる必要があるので、以下のコードを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のコードは以下の通りです。
<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の動き方を指定するオプションです。
コードは <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のコードを記述します。
このコードも <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を使えば簡単にできる為使うケースはあまりないとは思いますが、その他の場合でも使えるので、その時は是非参考にしてみてください。
