SwiperのFree Modeを使用して1ページ当たり複数画像を表示する際、高さの異なる画像を下揃えにしたい

実現したいこと

こちらのSwiperのFree Modeのサンプルコードを改良して、幅と高さが不揃いの画像を下揃えにしたいです。

発生している問題・エラーメッセージ

画像が上揃えになってしまいます。

該当のソースコード

index.html

html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6    <title>Document</title>
7    <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css"/>
8    <link rel="stylesheet" type="text/css" href="css/swipe_style.css">
9</head>
10<body>
11    <div class="swiper mySwiper">
12        <div class="swiper-wrapper">
13            <div class="swiper-slide"><img src="150x100.png" alt=""></div>
14            <div class="swiper-slide"><img src="110x200.png" alt=""></div>
15            <div class="swiper-slide"><img src="300x200.png" alt=""></div>
16            <div class="swiper-slide"><img src="180x500.png" alt=""></div>
17        </div>
18    </div>
19
20    <script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
21
22    <!-- Initialize Swiper -->
23    <script>
24      var swiper = new Swiper(".mySwiper", {
25        slidesPerView: 20,
26        loop: true,
27        spaceBetween: 5,
28        freeMode: true,
29        navigation: {
30          nextEl: ".swiper-button-next",
31          prevEl: ".swiper-button-prev"
32        }
33      });
34    </script>
35</body>
36</html>

swipe_style.css

css
1@charset "utf-8";
2
3body {
4    position: relative;
5    height: 100%;
6
7    background: #eee;
8    font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
9    font-size: 14px;
10    color: #000;
11    margin: 0;
12    padding: 0;
13}
14
15.swiper {
16    width: 100%;
17    height: 100%;
18}
19
20.swiper-slide {
21    text-align: center;
22    font-size: 18px;
23    background: #fff;
24
25    /* Center slide text vertically */
26    display: -webkit-box;
27    display: -ms-flexbox;
28    display: -webkit-flex;
29    display: flex;
30    -webkit-box-pack: center;
31    -ms-flex-pack: center;
32    -webkit-justify-content: center;
33    justify-content: center;
34    -webkit-box-align: center;
35    -ms-flex-align: center;
36    -webkit-align-items: center;
37    align-items: flex-end;
38}
39
40.swiper-slide img {
41    display: block;
42    width: 100%;
43    height: 100%;
44    object-fit: cover;
45}

試したこと

cssの一部を以下のように実装したところ、画像は下揃えになりますが、レスポンシブが無効になってしまいます。

css
1.swiper-slide {
2    display: flex;
3    position: relative;
4    width: 100px;
5    height: 500px;
6}
7.swiper-slide img {
8    position: absolute;
9    bottom: 0;
10    left: 25px;
11}

行動規範の内容に同意します

回答1件

ベストアンサー

これでどうでしょう。

CSS
1.swiper-slide {
2  display: flex;
3  align-items: end;
4}

投稿2022/07/11 15:45

kei344

総合スコア69625

nobu09

2022/07/12 01:13 編集

ご回答いただきありがとうございます。修正してみましたが、上揃えのままでした。

kei344

2022/07/11 16:36

たしかに試してみたら高さの計算が不思議な感じになっていますね。提示のコードに以下のCSSを追加したらとりあえず下揃えになりました。 .swiper-wrapper { align-items: end; } https://jsfiddle.net/9yvoa6w5/

nobu09

2022/07/12 01:10

ありがとうございます！期待通りの動作になりました！ swiper-wrapperが親要素になるので、そちらにalign-items:end;を設定する必要があったのですね！

行動規範の内容に同意します

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.31%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！

SwiperのFree Modeを使用して1ページ当たり複数画像を表示する際、高さの異なる画像を下揃えにしたい

実現したいこと

発生している問題・エラーメッセージ

該当のソースコード

試したこと

関連した質問