swiperで実装した動く画像の下にテキストを入れたい

前提・実現したいこと

swiperで実装した動く画像の下にテキストを入れたいです。また、そのテキストも画像とともに動かしたいです。
例：春の画像の下に「春」のテキスト、夏の画像の下に「夏」のテキストといった感じです。

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

画像の横にテキストが出てしまうこと。

エラーはありません。

該当のソースコード

JavaScript
1<!DOCTYPE html>
2<html lang="en">
3<head>
4  <meta charset="utf-8">
5  <title>Swiper demo</title>
6  <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
7
8  <!-- Link Swiper's CSS -->
9  <link rel="stylesheet" href="../css/swiper.min.css">
10
11  <!-- Demo styles -->
12  <style>
13    html, body {
14      position: relative;
15      height: 80%;
16    }
17    body {
18      background: white;
19      font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
20      font-size: 14px;
21      color:#000;
22      margin: 0;
23      padding: 0;
24    }
25    .swiper-container {
26      width: 80%;
27      height: 90%;
28    }
29    .swiper-slide {
30      text-align: center;
31      font-size: 18px;
32      background: #fff;
33
34      /* Center slide text vertically */
35      display: -webkit-box;
36      display: -ms-flexbox;
37      display: -webkit-flex;
38      display: flex;
39      -webkit-box-pack: center;
40      -ms-flex-pack: center;
41      -webkit-justify-content: center;
42      justify-content: center;
43      -webkit-box-align: center;
44      -ms-flex-align: center;
45      -webkit-align-items: center;
46      align-items: center;
47    }
48    .seasons {
49      display: block!important;
50    }
51  </style>
52</head>
53<body>
54  <!-- Swiper -->
55  <div class="swiper-container">
56    <div class="swiper-wrapper">
57      <div class="swiper-slide">
58        <img src="../images/spring.jpg" alt="">
59        <p class="seasons">春</p>
60      </div>
61      <div class="swiper-slide">
62        <img src="../images/summer.jpg" alt="">
63        <p class="seasons">夏</p>
64      </div>
65      <div class="swiper-slide">
66        <img src="../images/autumn.jpg" alt="">
67        <p class="seasons">秋</p>
68      </div>
69      <div class="swiper-slide">
70        <img src="../images/winter.jpg" alt="">
71        <p class="seasons">冬</p>
72      </div>
73    </div>
74    <!-- Add Pagination -->
75    <div class="swiper-pagination"></div>
76  </div>
77
78  <!-- Swiper JS -->
79  <script src="../js/swiper.min.js"></script>
80
81  <!-- Initialize Swiper -->
82  <script>
83    var swiper = new Swiper('.swiper-container', {
84      speed: 1000,
85      loop: true,
86      autoplay: {
87        delay: 2000
88      },
89      slidesPerView: 3,
90      spaceBetween: 30,
91      pagination: {
92        el: '.swiper-pagination',
93        //clickable: true,
94      },
95    });
96  </script>
97</body>
98</html>
99

試したこと

テキストのcssを .seasons {display: block!important; }　としました。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

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

回答1件

ベストアンサー

こんにちは、

HTML
1<div class="swiper-slide">
2    <img src="../images/spring.jpg" alt="">
3    <p class="seasons">春</p>
4</div>

のところのimgとpをdivで囲ってみてはどうでしょうか？

HTML
1<div class="swiper-slide">
2    <div>
3        <img src="../images/spring.jpg" alt="">
4        <p class="seasons">春</p>
5    </div>
6</div>

またそれでも駄目でしたら、CSSで画像のwidthなりheightなりいじって見るとよいかもしれません。

CSS
1.swiper-slide img {
2    width: ?px;
3}

投稿2020/05/26 00:10

fake_shibe

総合スコア806

whitehorse85921

2020/05/26 07:04

こんばんは。 imgとpのところをdivタグで囲んだところ、望んだとおりの実装になりました。ありがとうございます。なぜ、divタグで囲むとそうなるのか分らないですが嬉しいです。

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

あなたの回答

tips

プレビュー

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

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

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

ただいまの回答率
85.46%

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

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

質問する

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

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