スライドする画像下にテキストを置く　クリックするとリンク先へ

したいこと
下のイメージが理想になります。

①の以下のスライドでイメージ画像下にテキストをつけ
テキストクリックするとリンク先へジャンプしたい
。【テキストが縦並びになる　画像下にならない】

【試した事１】
参考<div class="main_imgSlide">
<a href="" class="main_img"><img src="" alt="img"></a>
...

</div> 上記を参考にしました。他、何個もしましたがどうしてもできずに。わかる方、よろしくお願いいたします。

①

<div class="container-slider flex">  <div class="swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide"><a><img class="container-img-slider" src="https://続く" alt="" /></a></div> <div class="swiper-slide">Slide 2</div> <div class="swiper-slide">Slide 3</div> <div class="swiper-slide">Slide 4</div> <div class="swiper-slide">Slide 5</div> <div class="swiper-slide">Slide 6</div> </div> <style> .container.flex { width: 100%; } .swiper-container { width: 50%; height: fit-content; margin: 5px !important; } .swiper-slide { text-align: center; font-size: 18px; /* Center slide text vertically */ display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; } .container-slider { width: 100%; height: 600px; } .flex { display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; } @media screen and (max-width: 768px) { .pc_only { display: none !important; } } .container-img-slider { width: 100%; height: auto; opacity: 1; transition: transform 0.3s ease; } .zoom{ transform: scale(1.2); } </style> <script type="text/javascript"> $(function(){ $(".container-img-slider").on("click",function(){ $(this).toggleClass('zoom') }) }) </script>

<!-- Swiper -->
<div class="swiper-container">
<div class="swiper-wrapper">

<div class="swiper-slide"><a><img class="container-img-slider" src="https://oppai1.com/wp-content/uploads/2021/03/StampDecor_153903.gif" alt="" /></a></div>
<div><p>テキスト</p></div>

<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div>
<div class="swiper-slide">Slide 4</div>
<div class="swiper-slide">Slide 5</div>
<div class="swiper-slide">Slide 6</div>
</div>

<!-- Add Pagination -->
<div class="swiper-pagination"></div>
</div>
<div class="swiper-container ">
<div class="swiper-wrapper">

<div class="swiper-slide"><a><img class="container-img-slider" 
src="https://oppai1.com/wp-content/uploads/2021/03/StampDecor_153903.gif" alt="" /></a></div>
<div class="swiper-slide"><a><img class="container-img-slider" src="" alt="" /></a></div>
<div class="swiper-slide"></a></div>
<div class="swiper-slide">Slide 4</div>
<div class="swiper-slide">Slide 5</div>
</div>
<!-- Add Pagination -->
<div class="swiper-pagination"></div>
</div>
<div class="swiper-container pc_only">
<div class="swiper-wrapper">
<div class="swiper-slide"><a><img class="container-img-slider" src="img02.jpg" alt="" /></a></div>
<div class="swiper-slide"><a><img class="container-img-slider" src="img01.jpg" alt="" /></a></div>
<div class="swiper-slide">Slide 3</div>
<div class="swiper-slide">Slide 4</div>
<div class="swiper-slide">Slide 5</div>
</div>
<!-- Add Pagination -->
<div class="swiper-pagination"></div>
</div>
<div class="swiper-container pc_only">
<div class="swiper-wrapper">
<div class="swiper-slide"><a><img class="container-img-slider" src="img02.jpg" alt="" /></a></div>
<div class="swiper-slide"><a><img class="container-img-slider" src="img01.jpg" alt="" /></a></div>
<div class="swiper-slide">Slide 3</div>
<div class="swiper-slide">Slide 4</div>
<div class="swiper-slide">Slide 5</div>
</div>
<!-- Add Pagination -->
<div class="swiper-pagination"></div>
</div>
</div>

<style>

.container.flex {
    width: 100%;
}

  .swiper-container {
    width: 50%;
    height: fit-content;
    margin: 5px !important;
  }

  .swiper-slide {
    text-align: center;
    font-size: 18px;

    /* Center slide text vertically */
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
  }

  .container-slider {
    width: 100%;
    height: 600px;
  }

  .flex {
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
  }

  @media screen and (max-width: 768px) {
    .pc_only {
      display: none !important;
    }
  }

  .container-img-slider {
    width: 100%;
    height: auto;
    opacity: 1;
    transition: transform 0.3s ease;
  }

.zoom{
      transform: scale(1.2);
    }
</style>
  <script type="text/javascript">
    $(function(){
      $(".container-img-slider").on("click",function(){
        $(this).toggleClass('zoom')
      })
    })
  </script>
コード

Lhankor_Mhy

2021/03/29 00:54

「テキスト」とは、コードの中のどれですか？

Kakakaff1150253

2021/03/29 02:22

ご連絡ありがとうございます。ここから、下が画像を入れてスライドします。各画像下にテキスト(キャプション)リンク先へを記したいのです。いちお、<p>タグや<div>で囲みましたがテキストが縦になります。 <div class="swiper-slide"><a><img class="container-img-slider" src="https://続く" alt="" /></a></div> <div><p>テキスト</p></div> <div class="swiper-slide">Slide 2</div> <div class="swiper-slide">Slide 3</div> <div class="swiper-slide">Slide 4</div> <div class="swiper-slide">Slide 5</div> <div class="swiper-slide">Slide 6</div> 返信が遅れてすみません。

K_3578

2021/03/29 02:50

とりあえずソースコードはMarkDownの<code>ブロック内に貼り付けてください。

Lhankor_Mhy

2021/03/29 03:04

.swiper-slideの中に「テキスト」を入れればいいように思えるのですが、お試しになりましたか？もし、すでに試してダメだった場合、どういう部分がダメでしたか？

Kakakaff1150253

2021/03/29 03:17

K_3578さま入力しました。確認お願いいたします。

K_3578

2021/03/29 03:19

@質問者さん書き方が悪かったので下記に例示しておきます。 ```HTML,CSS等言語名を書くソースコード ``` という書き方です。HTML,CSSを分けて書いている場合は<code>ブロック間を1行空けてください。

Kakakaff1150253

2021/03/29 03:23

すみません。

K_3578

2021/03/29 03:25

謝罪する必要はないです。あくまで見づらいものを直して頂けないか、という｢修正依頼｣ですので。

Kakakaff1150253

2021/03/29 03:27

Lhankor_Mhyさま以下のどこに？でしょうか？ .swiper-container { width: 50%; height: fit-content; margin: 5px !important; }

Kakakaff1150253

2021/03/29 03:52

Lhankor_Mhyさま ★部分に入れるとテキストが縦になります。入力する場所が悪いでしょうか？ <div class="swiper-slide"><a><img class="container-img-slider" src="https://続く" alt="" /></a>★<p>テキスト</p></div>

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

回答1件

ベストアンサー

補足欄でお示しいただいたように、<div class="swiper-slide"><a><img class="container-img-slider" src="https://続く" alt="" /></a>★<p>テキスト</p></div>とした上で、CSSを以下のようにしてみてはいかがでしょうか。

css
1        .swiper-slide {
2            text-align: center;
3            font-size: 18px;
4
5            /* Center slide text vertically */
6            /* ここから削除
7            display: -webkit-box;
8            display: -ms-flexbox;
9            display: -webkit-flex;
10            display: flex;
11            -webkit-box-pack: center;
12            -ms-flex-pack: center;
13            -webkit-justify-content: center;
14            justify-content: center;
15            -webkit-box-align: center;
16            -ms-flex-align: center;
17            -webkit-align-items: center;
18            align-items: center;
19              ここまで削除
20            */
21        }
22